React interview questions and answers for modern component work
React interviews reward a clean mental model more than a list of Hook names. Explain what belongs in render, what synchronises with an external system, what should remain derived data, and how state changes flow through a component tree. These answers follow the React Learn documentation, including its guidance on unnecessary Effects.
How React questions show up in interviews
A React round often starts with a small UI and turns into follow-ups: why did it rerender, why is this list unstable, where should the fetched data live, or why did a form lose its value. Use the same clear narration you would use in a live coding round, then connect trade-offs to tests and maintainability as in a code review interview.
Junior React interview questions
1. What is a React component?
A component is a JavaScript function that returns UI markup. It receives data through props and can hold local state. The useful distinction is that a component describes what the UI should look like for its current inputs; React performs the rendering work.
2. What is the difference between props and state?
Props are inputs supplied by a parent and should not be mutated by the child. State is data the component owns and changes through its setter. If two components need the same changing value, move ownership to their closest common parent.
3. Why do list items need keys?
Keys give React stable identity between renders. Use a stable identifier from the data, not an array index when items can be inserted, removed or reordered. An unstable key can make the wrong row keep focus, local state or an animation.
4. Why should state updates use the setter?
React needs to know that state changed so it can schedule a render. Mutating an object or array in place can leave React with the same reference and make changes difficult to reason about. Create a new value when updating state.
5. What is a controlled input?
A controlled input receives its displayed value from React state and reports changes through an event handler. It makes validation and coordination explicit. An uncontrolled input lets the DOM own the value and is useful when that simpler boundary is intentional.
Mid-level React interview questions
6. What does useEffect do?
An Effect synchronises a component with something outside React, such as a browser API, subscription, timer or network request. It is not the default place to calculate a value from props or state; derived values normally belong in render.
7. Why can an unnecessary Effect be a bug?
Putting derived data into state through an Effect creates an extra render and can temporarily show stale data. Calculate the value while rendering unless there is an external system to synchronise with. This reduces both code and possible state drift.
8. When should you use useMemo?
Use useMemo when profiling or an API contract shows that a computation or reference identity needs stabilising. It is an optimisation, not a semantic guarantee. First make the component correct and simple, then measure the actual bottleneck.
9. What is lifting state up?
Lift state to the nearest common parent when siblings need to coordinate through the same source of truth. Pass values and callbacks down. Do not lift every local detail to the top of the application; ownership should stay as close as possible to the code that needs it.
10. What is a ref for?
A ref holds a value or DOM node across renders without causing a render when it changes. Use it for focus, an imperative API, a timer ID or a value that does not affect visible output. If changing it should update the screen, it belongs in state.
Senior React interview questions
11. How would you fetch data safely in a component?
Represent loading, success and error states; cancel or ignore stale work when inputs change; and make the cache and retry policy explicit. In a framework, prefer its data-fetching conventions when they solve server rendering, caching or routing better than a hand-written Effect.
12. What causes a rerender?
A component rerenders when its own state changes, when its parent renders, or when a context it reads changes. A rerender is not automatically a DOM update or a performance problem. Inspect the work and user impact before adding memoization.
13. How do you avoid stale closures?
Put every reactive value used by an Effect or callback in the appropriate dependency list, or restructure the code so the value is read where the event happens. Suppressing a dependency warning usually hides a lifecycle problem rather than fixing it.
14. How should shared server data differ from local UI state?
Server data has cache, freshness, retry and invalidation concerns. Local UI state covers details such as an open panel or draft text. Keeping them separate makes it easier to reason about which update should be optimistic, cached or reset.
15. How would you test a React component?
Test user-observable behaviour: render with realistic props, interact through accessible controls, and assert the resulting screen or request boundary. Avoid tests that only confirm private implementation details such as a particular hook order.
A clear live-coding narration
Before typing, say where state will live and what changes it. While coding, explain why a key is stable, why an Effect is needed or intentionally absent, and what you will test. This is the same communication pattern in how to explain code during a live coding interview and in our TypeScript interview questions.
Ask the recruiter which tools are permitted before a live assessment. A sound component model is different from any policy about assistance during the interview. Preparing for another front-end framework? See Angular interview questions and answers.
Sources
- React documentation — official documentation
FAQ
What React interview questions are most common?
Expect props versus state, keys, controlled inputs, rendering, Effects, refs, lifting state, memoization, context, data fetching, performance and testing.
How do I explain useEffect clearly?
Say that Effects synchronise React with an external system such as a subscription, timer, browser API or request. Derived values from props and state usually belong in render instead.
Why are array indexes risky as keys?
When a list changes order or items are inserted or removed, an index no longer represents stable identity. React can then preserve state or focus on the wrong item.
When should I use useMemo?
Use it when measurement or a reference-identity contract shows it helps. It is an optimisation; make the component correct and simple before memoizing.
How should I practise React live coding?
Build a small component, narrate state ownership before typing, handle loading and error states, and explain one trade-off. Then practise changing the requirements with a follow-up.