Interview Q&A / React

1. What is the difference between state and props in React?

   Props are inputs passed into a component by its parent and are read-only inside it. State is data a component owns and can change over time, and changing it makes the component re-render.

   BeginnerIn-depth3 min read
2. 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
3. How do you manage several form fields with a single state object?

   Store the fields in one object and give each input a name attribute. One onChange handler reads e.target.name and e.target.value and updates that key with computed property syntax, copying the rest with spread.

   BeginnerQuick answer1 min read
4. What does lifting state up mean in React?

   When two sibling components need the same data, you move the state to their closest common parent and pass it down as props, along with callbacks to change it. This keeps one source of truth.

   BeginnerQuick answer1 min read
5. 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
6. 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
7. 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
8. 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
9. 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