React Interview Questions to Ask Before You Hire

12 React interview questions — with what to listen for

1. 1

   What actually causes a React component to re-render, and what does React do on each render?

   What a strong answer covers

   State updates, parent re-renders, and context changes — not prop changes alone in the naive sense; render as re-running the function to produce a new tree, reconciled against the previous one, with commits applying real DOM changes. This model underlies every performance question; imprecision here predicts cargo-cult optimization.

2. 2

   When do useMemo and useCallback help, when are they noise, and how do you decide?

   What a strong answer covers

   Referential stability for memoized children and effect dependencies, expensive computations — and the honest caveat that most usage is premature. Measuring before memoizing, and awareness that the React Compiler is changing this calculus, marks a current, judgment-driven candidate.

3. 3

   Explain the useEffect dependency array and the classes of bugs it creates. How do you write effects that do not lie?

   What a strong answer covers

   Stale closures from missing deps, loops from unstable object deps, cleanup discipline for subscriptions and races (aborting fetches). The deeper answer: most effect bugs dissolve by not using effects — deriving during render, event handlers for event logic, and libraries for data fetching.

4. 4

   Walk me through your state architecture decisions: local state, lifted state, context, and external stores — what goes where and why?

   What a strong answer covers

   State as low as possible, lifting only when shared, context for low-frequency global concerns (theme, session) with its re-render cost named, external stores (Zustand, Redux) for complex client state, and server-cache libraries (React Query/SWR) for server data. Separating server state from client state is the modern architectural line.

5. 5

   A list page with 5,000 rows scrolls badly and every keystroke in its search box lags. Diagnose and fix it.

   What a strong answer covers

   Profiler first to see what re-renders; fixes: virtualization for the list, debouncing or deferring the search input (useDeferredValue/transitions), memoized row components with stable props, splitting state so typing does not re-render the world. Concrete tool use plus layered fixes is the pass.

6. 6

   What are keys in lists actually for, and what breaks with index keys?

   What a strong answer covers

   Identity across renders driving reconciliation; index keys on reordering lists cause state bleeding between rows (inputs, animations) and wasted DOM work. A candidate who has debugged the wrong-row-state bug explains this vividly — that story is the verification.

7. 7

   How do controlled and uncontrolled form patterns differ, and how do you build a large form without performance and complexity collapse?

   What a strong answer covers

   Controlled inputs re-rendering on every keystroke versus refs/uncontrolled reads; large forms via form libraries with subscription-based re-rendering, field-level validation, and schema validation at submit. Naming the per-keystroke re-render cost as the scaling problem is the insight being tested.

8. 8

   Explain error boundaries and Suspense: what does each catch or coordinate, and where do you place them?

   What a strong answer covers

   Error boundaries catching render-phase errors (not handlers or async), placed at route and feature granularity with recovery UI; Suspense coordinating async fallbacks for lazy components and data, enabling streaming in framework contexts. Granular placement strategy over one app-wide wrapper is the mature answer.

9. 9

   What changes with React Server Components, and how does your component design change when some components never re-render on the client?

   What a strong answer covers

   Server components as data-fetching, zero-bundle render layers; client components as interactive islands; boundary design pushing interactivity down the tree, and props crossing the boundary needing serializability. Framework grounding (Next.js) is expected; confusion between SSR and RSC is the common failure worth catching.

10. 10

    How do you test React components — what do you test, with what tools, and what do you refuse to test?

    What a strong answer covers

    Testing Library querying by role and behavior over implementation details, user-event simulation, mocked network at the fetch/msw layer, and refusal to assert on internal state or snapshot-everything. A thin Playwright layer for journeys completes the answer; brittle-test war stories add credibility.

11. 11

    Two components need the same complex logic — walk me through your options and how you choose.

    What a strong answer covers

    Custom hooks as the default for stateful logic, plain functions for pure logic, composition/children patterns for UI structure — with render props and HOCs recognized as legacy patterns still met in codebases. Reaching for a custom hook with a clear API is the expected modern instinct.

12. 12

    Your team's React app has grown to 400 components and new features keep touching old ones. What structural conventions keep it maintainable?

    What a strong answer covers

    Feature-based organization over type-based, colocation of components/hooks/tests, a design-system layer, public-API boundaries between features (index exports, lint-enforced), and state kept feature-local. Evidence of having lived through the refactor from chaos is worth more than the diagram.

Frequently asked questions