React Interview Questions and Answers (Hooks, State, Performance)

They ask why the list re-renders when you type in a search box two components up.

You mumble “virtual DOM” and hope it ends. It doesn’t. They want the dependency array, the state that lived too high, and whether you measured before you memoized.

That’s react interview questions on a frontend loop. Rendering model, Hooks, state boundaries, performance, then a small component on a shared editor. Prep the wider frontend track with how to prepare for frontend engineering interviews. Coding muscle still helps: top coding interview patterns and live coding tips.

Samples are fictional. Practice them spoken. Clicking through a blog isn’t the same as explaining useEffect while someone watches the cursor.

Rendering and reconciliation

React calls your function components, builds a tree of elements, and diffs it against the previous tree (reconciliation). Same position + same type → update that fiber. Different type → tear down and remount. Keys tell React which child is which in a list.

Keys should be stable IDs. Array index as key is fine for static lists. Painful when you insert/reorder and local state sticks to the wrong row.

Spoken: “Reconciliation is the diff. Keys keep identity across renders. Index keys scramble state when the list mutates. I don’t say ‘virtual DOM’ and stop. I say what remounts and why.”

Controlled vs uncontrolled inputs show up early. Controlled: value in React state. Uncontrolled: ref to the DOM. Forms in interviews are almost always controlled so you can validate as you type.

Q: Sibling updates, parent re-renders, child looks “stuck”?

A: “I’d check whether the child holds state that should have reset when the parent selection changed. Remount with a key on the child when the identity changes. Or lift/reset state on purpose. I’d also confirm I’m not mutating state in place.”

Hooks (and the pitfalls that fail candidates)

Rules of Hooks

Only call Hooks at the top level of a React function. Same order every render. No Hooks inside conditions or loops. Custom Hooks are just functions that call other Hooks; they share the rules.

useState and batching

Setters are async from your perspective. Don’t read state right after set and expect the new value in the same tick. Functional updates (setN(n => n + 1)) when the next value depends on the previous. React 18 batches more updates, including in timeouts and promises, than older mental models assume.

useEffect without the folklore

Effects run after paint. Dependencies list what you read for sync with an external system. Missing deps → stale closures. Over-listed deps → loops. Cleanup for subscriptions and timers.

Spoken: “Effect is for syncing with something outside React: network, DOM plugin, websocket. If I’m deriving data from props, I compute during render or useMemo. I don’t fetch in an effect just because a tutorial did in 2019 if the team has a data library now.”

Stale closure classic: interval that captures count from the first render. Fix with functional updates or a ref for the latest value when you truly need it.

Custom Hooks

Extract repeated effect + state pairs. Name them useSomething. Return a small tuple or object. Don’t hide half the app in one Hook with twelve return fields unless the team already lives that way.

Q: useEffect fetches, component unmounts, then setState warns.

A: “AbortController in the effect. Abort on cleanup. Ignore the result if aborted. Or use a library that cancels for you. I wouldn’t leave the race.”

Hooks / reconcile walkthrough. Blank boxes, interviewer hands only.

State management

Local state first. Lift when two siblings need the same data. Context for sparse, rarely changing values (theme, locale, auth user). Context as a global Redux replacement for high-frequency updates will re-render everyone under the Provider.

Redux Toolkit, Zustand, Jotai, and server caches (React Query / TanStack Query, SWR) show up by stack. Interview signal: you pick based on update frequency and ownership (server vs client), not brand loyalty.

Spoken: “Server state in a cache library. UI state local or in a small store. I don’t dump fetched lists into Redux by default in 2026 unless the codebase already does.”

Prop drilling: three levels is annoying, not always wrong. Context or composition (children / slots) when drilling hides the real API of a component.

Performance and testing

Measure first. React DevTools Profiler. Then:

• memo on pure children that get the same props
• useMemo / useCallback when referential equality matters to a memoized child or a dep array
• Split state so typing in an input doesn’t redraw a huge sibling tree
• Virtualize long lists
• Code-split routes

Blind memoization adds noise. Interviewers notice when you wrap everything without a reason.

Testing: React Testing Library over enzyme-style internals. Assert what the user sees. Jest or Vitest. Mock network at the boundary. A bit of Playwright/Cypress talk is fine for senior roles.

Q: Typeahead feels laggy. Where first?

A: “Profile. Is every keystroke rendering a heavy tree? Debounce the query. Move expensive work out of the input’s parent. Virtualize results. I wouldn’t start with rewriting the whole form in a new library.”

Live-coding component prompts

Common shapes:

• Searchable list with highlight
• Modal with focus trap talk-through
• Paginated table (client or fake API)
• Tiny form with validation
• Counter / cart with derived totals

Talk before you type. State shape. Controlled inputs. Empty and loading states. Accessibility: labels, button roles, keyboard.

Illustrative prompt: filter a user list by name.

Spoken plan: “State for query string. Derive filtered list during render with filter + toLowerCase, or memo if the list is huge. Input labeled. Empty state when no matches. Keys from user id.”

Then build it. Then add a deliberate follow-up they might ask: debounce, or lift the query into the URL.

Voice practice with component-tree notes. Prep tool on the desk, not in a live interview.

Render → reconcile → commit. Keys protect list identity.

Night-before drill

Out loud, timer on:

• Reconciliation + keys in under a minute
• One stale useEffect story and the fix
• When Context hurts
• One Profiler-driven perf fix you’ve done (or a clear hypothetical)
• Build a filterable list while narrating state

Behavioral still appears. Keep STAR ready for a production UI bug or a design clash with design/system partners.

Practicing with OfferBull

Reading Hook docs is easy. Explaining a stale closure under a clock is not.

OfferBull is an AI mock interview app for iOS and Android. Voice interviewer. You speak. Paste a React JD or upload a resume. Follow-ups based on what you said. Suggestions and STAR while you practice. English and Chinese.

Before the interview. Not during.

Start an AI mock interview

FAQ

Class components? Know lifecycle names if the codebase is old. New answers assume function components + Hooks unless they say otherwise.

Next.js? Only if the JD lists it. Be ready for SSR/CSR trade-offs when they ask. Don’t force App Router trivia into a pure React screen.

TypeScript required? Often yes for frontend roles. Be ready to type props and event handlers even if the toy prompt is JS.

Redux mandatory? No. Know why a store exists. Match their stack.

How deep on Fiber? Usually not. Reconciliation, keys, and render cost are enough. Internals only if they push.

Practice This Out Loud

Tonight: keys in 45 seconds, one useEffect pitfall, Context vs local state, one filterable-list build with spoken tests. Record it. Then a voice mock with follow-ups. → Practice Now