Interview Q&A / React

1. When should you use useEffect, and when should you avoid it?

   Use useEffect to sync your component with something outside React, such as a network request, a subscription or a browser API. Avoid it for work you can do during rendering or inside an event handler.

   IntermediateIn-depth2 min read
2. What is state colocation, and how can it make a slow component fast without memo?

   Keep state in the lowest component that needs it. If only a small input uses a value, move that state into the input's own component, so typing no longer re-renders the heavy sibling components in the parent.

   IntermediateQuick answer1 min read
3. When does calling a state setter cause a re-render?

   React re-renders when the new state is different from the current one, compared with Object.is. Setting the same primitive value, or the very same object reference, usually skips the render. A new object with equal contents counts as different.

   IntermediateQuick answer1 min read
4. When would you choose useReducer over useState?

   Choose useReducer when state has several related fields, or the next state depends on complex rules and actions. It centralises update logic in one pure function, which is easier to test and reason about than many scattered setters.

   IntermediateQuick answer1 min read
5. Why does the state variable show the old value right after calling setState?

   State is a snapshot for the current render. Calling the setter only schedules the next render; the variable in the running function does not change. React also batches several updates in one event into a single render.

   IntermediateQuick answer1 min read
6. Why is copying a prop into state usually a bug?

   The initial value is read once, on the first render. Later prop changes are ignored, so the component shows stale data. Use the prop directly, derive the value during render, or reset state with a key.

   IntermediateQuick answer1 min read