React Interview Question: What Causes a Component to Re-render?

Short answer: a component re-renders when its own state changes, when its parent re-renders, when a context it reads changes, or when a hook it uses triggers an update.

1. Its state changes

const [count, setCount] = useState(0);
setCount(1);   // re-render
setCount(1);   // same value (Object.is): React bails out

2. Its parent re-renders

By default, when a component renders, all of its children render too, whether or not their props changed. This surprises many people: "props changed" is not the trigger; the parent rendering is.

3. A context it uses changes

const theme = useContext(ThemeContext);   // re-renders whenever the provider value changes

Passing a new object as the provider value every render (value={{ user, setUser }}) re-renders every consumer each time.

4. Hooks

Custom hooks and libraries that hold state (or subscribe with useSyncExternalStore) re-render the component when their state changes.

Reducing unnecessary renders

• Move state down to the component that uses it, so fewer components are affected.
• Pass components as children: children created by a grandparent aren't re-rendered when the parent's state changes.
• Memoise expensive children with React.memo and stable props (or use React Compiler).
• Split contexts by how often they change, and memoise provider values.
• Select slices from stores (Zustand, Redux) instead of the whole state.

Re-rendering is usually cheap. Measure with the React DevTools Profiler before optimising.