React Interview Questions for Hiring Managers (With What Good Answers Look Like)

If you are hiring a React engineer, familiarity with React matters. But a candidate who can explain hooks fluently has not necessarily shown that they can work effectively in your application. The useful distinction emerges when you give them a specific problem and ask them to explain what is happening, how they would investigate it, and what their proposed fix changes.

I would build a React interview around the interfaces the engineer will actually own. A checkout flow, an internal dashboard, and a content site have different constraints. The same framework knowledge may support all three, but the questions deserve different emphasis.

These twenty React interview questions cover fundamentals, state, effects, performance, and testing. The answer notes give a hiring manager a basis for discussion. For a substantive technical assessment, involve someone who can evaluate the candidate’s code and reasoning beyond the notes; a checklist is useful, but it cannot substitute for that judgment.

How to Structure a React Interview

Start with the role and the application. Ask about relevant work, use a selection of the questions below, and reserve time for a small implementation or code review. You do not need to ask every question in one sitting. You need enough depth to distinguish an explanation the candidate understands from one they have learned to repeat.

Use comparable prompts and record the assistance you provide. Let candidates clarify assumptions, consult documentation when that fits the exercise, and explain their choices. For senior roles, follow a correct answer with a change in requirements or a question about failure. The ability to revise a solution is often more informative than the initial answer.

React fundamentals

1. How do props and state affect a component?

Props are inputs supplied to a component, while state is retained by React for that component. Both should be treated as immutable snapshots. State updates request another render; mutating an existing object does not give React the same signal as supplying a new value.

Ask where a full name belongs when first and last names are already available. Computing it during render avoids keeping redundant values synchronized. Then introduce a genuine reason to preserve an independently editable value. The candidate should be able to distinguish derived data from state that has its own meaning.

2. Why do list items need stable keys?

Keys help React match siblings across renders and preserve the appropriate identity and state. A stable identifier is usually a better choice than an array index for a list that can reorder, insert, or delete items.

Use an editable list as the example. What happens to an input’s local state after the rows move? The candidate should connect the key to the identity of the item. Changing a key deliberately can reset state, but generating new keys on every render resets it unintentionally.

3. What causes a component to render again?

State changes, a parent render, and changes to a consumed context can all lead to rendering. Memoization may allow some work to be skipped. Ask the candidate to distinguish calling a component to calculate its output from committing changes to the DOM.

That distinction matters when diagnosing performance. A component rendering again is not automatically a defect, and it does not mean every DOM element was replaced. I want the engineer to understand the behavior before deciding it needs to be prevented.

4. How do JSX and reconciliation produce UI updates?

JSX describes the UI through React elements. React uses that description, including element types and keys, to decide what to preserve and what to update.

Ask what happens when a parent changes from a div to a section while still containing the same form component. Replacing the parent element type can replace the subtree and reset the form’s state. This gives the candidate a concrete way to demonstrate that they understand identity, rather than simply saying that React uses a virtual DOM.

Hooks and State Management

5. When should you use useEffect?

An effect synchronizes a component with an external system, such as a subscription or browser API. Calculating a filtered list usually belongs in render. Work that follows a particular user action often belongs in that action’s handler.

Give the candidate a component that uses several effects to derive state from other state. Ask which effects they would remove and why. The goal is to understand whether they can simplify the data flow without breaking behavior. React’s own guidance makes this distinction explicit. Source: React effect guidance

6. How do dependencies and cleanup work?

An effect’s dependencies describe the reactive values it reads. Cleanup runs before a changed effect is set up again and when the component unmounts. In development, Strict Mode can add a setup and cleanup cycle to help expose missing cleanup.

Use a search request whose responses arrive out of order. The engineer should prevent an old response from replacing the current results through cancellation or an explicit stale-result guard. For appropriate non-reactive logic inside effects, useEffectEvent offers another tool, but it is not permission to hide a real dependency. Source: React useEffect

7. When is useRef more appropriate than state?

A ref can retain a mutable value between renders without causing a render when that value changes. DOM references and timer identifiers are common examples. State is appropriate for information whose changes need to appear in the UI.

Ask the candidate to explain a stopwatch. The interval identifier can live in a ref, while elapsed time is state. Then ask about cleanup and what happens when the component leaves the page. A working explanation should cover the lifecycle as well as the storage choice.

8. What do the rules of hooks prevent?

Ordinary hooks need a consistent call order, so they belong at the top level of a component or custom hook rather than inside changing conditions or loops. Ask the candidate to refactor a conditional useEffect without changing its intended behavior.

There are API-specific exceptions: React’s use API can appear in conditions and loops, with its own restrictions. A useful interview tests the underlying model and the hooks in the codebase, rather than using a wording trap to penalize someone who knows the documented exception. Source: React rules of hooks

9. When should state move to a common parent?

Shared state can move to the closest common ancestor of the components that need it. That gives them a single owner and a clear path for updates. It does not mean every piece of local state belongs at the application root.

An accordion where only one panel can open is a simple example. Ask where the active panel belongs, then ask what would justify moving it farther up. The answer should follow the behavior and ownership requirement rather than a preference for global state.

10. How do context and reducers fit together?

Context distributes a value through a subtree. A reducer organizes state transitions. They solve different problems and can be combined, but neither is automatically the right home for all application data.

Situation	Approach to discuss
Theme or locale	Context for broadly consumed configuration
Interdependent form changes	A reducer for explicit transitions
Shared cart	Context and a reducer, or an appropriate state library
Remote data with caching	A data-fetching layer that handles staleness and requests

Ask how context updates affect consumers and how the candidate would limit unnecessary work. The design should remain understandable to the team maintaining it.

11. How does React batch state updates?

React can group state updates instead of immediately rendering after each call. In a handler, three calls to setCount(count + 1) use the same render’s value. Three functional updates, setCount(c => c + 1), apply successive transformations.

Ask the candidate to predict the result before running the code. Then discuss why the updater form matters when an update depends on previous state. Knowing that batching exists is less useful than correctly reasoning about the values the handler can see.

12. How would you handle form submission and pending state?

In React 19 codebases, form actions, useActionState, useFormStatus, and useOptimistic may support submission and feedback. Ask how the candidate represents pending, success, and failure, and how they handle a result that arrives after the user changes the input.

Disabling a button is useful feedback and may prevent accidental repeated clicks. It does not guarantee that a payment or other sensitive operation happens only once. Server-side authorization, validation, and idempotency still matter. An optimistic UI must also account for rejection rather than leave the screen showing a success that never occurred. Source: React 19

Performance

13. How would you investigate a slow interaction?

Ask for the sequence before asking for an optimization. The candidate should reproduce the problem with realistic data and use React profiling and browser tools to distinguish rendering, computation, layout, and network delays.

React 19.2 added Performance Tracks for supported profiling workflows. They are useful context, but familiarity with one tool should not outweigh a sound investigative method. Ask what evidence would identify the bottleneck and how the engineer would confirm that a change improved the interaction. Source: React 19.2

14. When do memo, useMemo, and useCallback help

memo can skip component rendering when props compare equal, useMemo can retain a calculation result, and useCallback can retain a function reference. Their value depends on the work being avoided and the stability of the inputs.

Ask why a memoized child still renders when the parent creates a new object prop. Then ask whether the application uses React Compiler, whose stable 1.0 release introduced an adopted tooling path for automatic memoization. The compiler changes some manual optimization decisions, but it does not eliminate the need to measure or choose a sensible architecture. Source: React Compiler 1.0

15. How would you render a very long list?

Virtualization limits the number of mounted rows, while pagination or incremental loading can also reduce the amount of data sent to and retained by the client. The candidate should choose based on the interaction the product needs.

Ask about variable row heights, keyboard navigation, screen readers, and finding an item that is not mounted. Rendering fewer rows can improve performance, but a list is only useful if people can still navigate it. Claims that a huge dataset costs the same as a tiny one ignore data transfer, memory, and processing outside the visible rows.

16. When would you use a transition?

A transition can mark a state update as non-urgent so urgent interactions remain responsive while React works on the other render. useDeferredValue can be useful when deferring the consumption of a changing value.

Ask the candidate to distinguish those tools from debouncing requests or moving computation to a worker. A transition does not automatically make a slow network faster, and it does not make arbitrary synchronous JavaScript non-blocking. The proposed technique should match the source of the delay.

Testing

17. What should a component test assert?

Prefer observable behavior: what appears, which controls are available, and what happens when someone interacts. React Testing Library’s queries by role and accessible name can support that approach.

Ask which assertions would survive an internal refactor. A test that only checks internal state can miss a broken interface. Queries that exercise accessible names are useful, but they do not constitute a complete accessibility assessment. The candidate should understand both the benefit and the limit.

18. How do you test asynchronous updates?

Wait for the behavior you expect rather than wait an arbitrary number of milliseconds. findBy queries and waitFor can help, with requests controlled at an appropriate boundary.

Ask for tests covering loading, success, failure, and retry. Then ask how the engineer would prevent a test from passing before the assertion actually runs. A suite that depends on timing luck gradually becomes a suite the team distrusts, which reduces its practical value even when the coverage number looks good.

19. How would you test validation in a form?

Exercise the user’s path: enter invalid data, submit, and verify the message and the blocked action. Then correct the input and confirm that the form can recover. Where appropriate, check focus behavior and the relationship between the input and its error message.

Keep browser validation and server validation separate in the discussion. A frontend test can establish UI behavior, but it cannot establish that the backend rejects an invalid or unauthorized request. The important boundary should receive its own tests.

20. What would you test before releasing a critical feature?

Ask the candidate to prioritize rather than list every possible test. A critical flow may warrant coverage for the successful path, failed requests, duplicate actions, permissions, and accessibility, using unit, component, and browser tests where each adds value.

Then ask what they would do with limited time. The answer should identify the highest-risk behavior and explain what remains unverified. That gives you a better view of judgment than an unconditional promise to test everything.

Practical Assessment: Live Coding or Take-Home

A small searchable list with loading, empty, and error states is enough to support an implementation discussion. A flawed existing component is useful for examining diagnosis and code review. Use a bounded task and make the expectations for documentation and tool use clear.

Dimension	What to record
Correctness	Whether the explanation and code match React’s behavior
Reasoning	Why the solution fits and what alternatives were considered
Verification	Whether meaningful failure cases were checked
Communication	Whether another engineer could follow and maintain the approach

How Should Junior and Senior Answers Differ

Junior candidates may need help applying a sound basic model. Senior candidates should carry more of the reasoning independently and anticipate consequences beyond the immediate component. Do not infer a level from one unfamiliar API, and do not let confident delivery compensate for a fundamentally incorrect model.

Red Flags That Predict Delivery Problems

Patterns worth probing include effects used to synchronize redundant state, dependency warnings dismissed without an explanation, optimization without measurement, and tests that only assert implementation details. Ask the candidate to revisit the approach before deciding that a mistake establishes their ability.

How Gun.io Vets React Developers

At Gun.io, the value of a React profile comes from how well it describes the work an engineer can do. Framework fluency is part of that evidence. The more useful hiring decision also accounts for the existing application, the engineer’s production experience, and the responsibility they will carry after the interview is over.

Frequently asked questions

Which React interview questions should I ask?

Select questions on rendering and identity, state ownership, effects, performance, and testing. Weight them according to the application and use follow-ups to establish understanding.

How do you test React skills practically?

Use a small implementation, debugging task, or code review that resembles the role. Evaluate behavior, reasoning, and verification alongside the finished code.

What Is the Difference Between Junior and Senior React Interview Questions?

A senior candidate should explain consequences, identify relevant risks, and make appropriate choices independently. New API recall alone does not establish seniority.

Should JavaScript be tested separately?

Where the interview does not already reveal it, include practical questions about closures, promises, references, and asynchronous behavior. Those fundamentals underpin many React problems.

Do candidates need the newest React features?

They need to understand the codebase they will work in and demonstrate an ability to learn. Discuss current features when relevant, without assuming that every production application uses the latest release or tooling.

What Are Useful Scenario-Based React Interview Questions?

Ask the candidate to investigate a slow list, a stale search response, a lost edit after reordering, or a checkout flow that can be submitted twice. Each scenario lets you examine the React model alongside the application behavior and the verification plan.

Choose React Engineers Who Can Deliver in Production

Use the questions to establish understanding and the practical assessment to see how the engineer applies it. When you speak with Gun.io about a React hire, describe the existing application and the responsibility the person will carry. That makes it possible to discuss a profile in terms of the work rather than framework fluency alone.