React Interview Questions Explained: Core Concepts with Clear Answers

Interviewers asking about React are usually checking whether you understand *why* it behaves the way it does. Memorised definitions fall apart at the first follow-up question. Below are ten topics with explanations you can adapt, followed by ways to practise. Each answer is a starting point, so put it in your own words.

1. What happens when state changes?

React calls your component function again to produce a new description of the UI (a tree of elements). It compares that with the previous description and updates only the parts of the real DOM that differ. That comparison step is called reconciliation. Your code describes what the UI should look like, and React works out how to update it.

2. Why do lists need keys?

Keys tell React which list item is which between renders. With stable keys, React can move, add and remove items correctly and keep each item's state attached to the right one. Using the array index as a key is risky when items can be reordered or removed, because the identity of an item then changes with its position. Use a stable unique id from your data instead.

3. What is the difference between props and state?

Props are inputs passed down by a parent and are read-only to the receiver. State is data a component owns and can change. Both cause re-renders when they change. See React props vs state for a longer treatment.

4. Why must you not mutate state directly?

React decides whether to re-render by checking whether the state value changed by reference. If you push into an array and pass the same array back, nothing appears different. Create a new array or object instead: setItems([...items, item]).

5. Controlled versus uncontrolled inputs

A controlled input takes its value from React state and updates that state on every change, so React is the single source of truth. An uncontrolled input keeps its value in the DOM and you read it when needed, for example through a ref. Controlled inputs make validation and conditional UI easier; uncontrolled inputs are simpler for basic forms.

6. What does the dependency array in useEffect do?

An effect runs after render. The dependency array lists the values the effect reads. React re-runs the effect when one of them changed since the last render, after first running the cleanup function from the previous run. An empty array means the effect runs once after the first render, and no array means after every render. Missing a dependency causes stale values; the hooks mental model explains why.

7. When should you use useMemo, useCallback and React.memo?

They are performance tools, not correctness tools. Use useMemo for an expensive calculation that would otherwise repeat on every render, useCallback to keep a function's identity stable when passing it to a memoised child, and React.memo to skip re-rendering a component whose props did not change. Measure first: adding them everywhere adds cost and complexity.

8. What is lifting state up?

When two components need the same changing data, you move the state to their closest common parent and pass it down as props, with callbacks to update it. That keeps one source of truth instead of two copies that can disagree.

9. Context versus prop drilling

Passing props through many layers that do not use them is called prop drilling. Context lets a provider make a value available to any descendant that reads it. It works well for values like a theme or the current user, but every consumer re-renders when the value changes, so it is not a replacement for all state management.

10. Why does my effect run twice in development?

In Strict Mode during development, React deliberately mounts, unmounts and remounts components to reveal effects that are missing cleanup. It is a development-only check. The right fix is a proper cleanup function, for example clearing a timer or unsubscribing.

How to practise these answers

1. Say each answer aloud in under a minute, with a tiny code example.
2. Take the React Core Concepts quiz and the React Hooks quiz, reading every explanation.
3. Try the interactive React Hooks Lab to spot bugs in real snippets.
4. Build a small project such as a to-do list with filtering, and be ready to explain each state decision.

If your JavaScript basics are shaky, review them first with the JavaScript quiz preparation guide.

Key takeaways

• Explain React in terms of state changes, re-rendering and reconciliation.
• Know keys, immutability, controlled inputs and the effect dependency array well.
• Treat memoisation as an optimisation you measure, not a default.
• Practise answering aloud with small examples.