Question 1

How do props differ from state in React?

Accepted Answer

A component receives props from its parent, and for that component they are read only. State is the component's own data, which it manages itself with useState or useReducer. A change of state or new props causes a re-render. If data can be computed from props, it does not need separate state.

Question 2

Why do you need a key when rendering lists?

Accepted Answer

A key helps React match list items between renders and understand what was added, removed or reordered. The key must be stable and unique among siblings, ideally an id from the data. Using the array index as a key breaks item state and animations when the list is sorted, filtered or items are inserted at the start. Without a key React shows a warning in the console.

Question 3

How does useEffect work, and what does the dependency array mean?

Accepted Answer

useEffect runs a side effect after render: a request, a subscription, a timer. With no dependency array the effect runs after every render, with an empty array only after mount, and with values whenever one of them changes. The function returned by the effect is the cleanup: React calls it before the next run of the effect and on unmount. Cleanup is where you unsubscribe, clear timers and cancel requests.

Question 4

What are controlled and uncontrolled form inputs?

Accepted Answer

In a controlled input the value lives in state and is passed through value, while changes come through onChange. React is then the single source of truth, which makes validation or formatting while typing easy. In an uncontrolled input the value lives in the DOM, you read it through a ref or on submit, and set the initial value with defaultValue. Uncontrolled inputs are simpler and re-render less, but suit complex logic less well.

Question 5

How do you share data between two sibling components?

Accepted Answer

Shared state is lifted to the closest common parent and passed down through props together with functions that change it. If the data is needed deep in the tree and passing props becomes awkward, you use Context. Context fits data that changes rarely, like the theme or the current user. For complex global state you pick a dedicated library such as Zustand or Redux.

Question 6

What makes a component re-render?

Accepted Answer

A component renders again when its state changes, when its parent renders, or when a Context it reads changes. By default a parent render re-renders all its children, even if their props did not change. React.memo skips the render if the props are shallowly equal. A render does not mean a DOM change: React updates the DOM only where the output differs.

Question 7

What are useMemo and useCallback for? When should you not use them?

Accepted Answer

useMemo remembers the result of a computation, and useCallback remembers the function itself, until the dependencies change. They help with expensive computations and with stable references passed to React.memo components or to useEffect dependencies. Memoization has its own cost: memory and comparing dependencies. Wrapping everything makes no sense, first find a real problem in the profiler.

Question 8

What is reconciliation, and how does React decide what to update in the DOM?

Accepted Answer

Reconciliation is the process of comparing the new element tree with the previous one. React compares the trees heuristically: if the element type at the same position changed, the subtree is destroyed and recreated together with its state. If the type is the same, React updates only the changed attributes and recurses into the children. For lists it matches items by key, and then applies the minimal set of changes to the DOM.

React interview questions and answers

Junior questions

1. How do props differ from state in React?

2. Why do you need a `key` when rendering lists?

3. How does `useEffect` work, and what does the dependency array mean?

4. What are controlled and uncontrolled form inputs?

5. How do you share data between two sibling components?

Middle questions

1. What makes a component re-render?

2. What are `useMemo` and `useCallback` for? When should you not use them?

3. What is reconciliation, and how does React decide what to update in the DOM?

Train these questions

Answer out loud and get graded

Other topics

Explore the platform