When Does a Component Re-render in React?

Source: Dev.to

What Triggers a Re-render?

When a component’s state changes using useState, React schedules a re‑render of that component.

const [count, setCount] = useState(0);

const increment = () => setCount(count + 1);

Prop Changes

If a component receives new props (i.e., if the parent re‑renders and passes new values), the child will also re‑render by default. Even a shallowly equal value with a new reference triggers a re‑render.

Context Changes

React Contexts provide a way to share values across the component tree. Any update to a context value will re‑render all consuming components.

Parent Re-renders

Even if a child’s props didn’t change, it can re‑render if its parent re‑renders unless it’s memoised with React.memo.

React Reconciliation: How React Decides to Re-render

React uses referential equality (===) to compare props and state. If something changes—a new object, array, or primitive—it assumes the UI might need to update. This is why immutable patterns are crucial; mutating objects without changing their reference can lead to bugs or skipped renders.

How to Prevent Unnecessary Re-renders

Use React.memo for Pure Functional Components

const MyComponent = React.memo(({ name }) => {
  console.log("Rendered!");
  return {name};
});

Use useCallback and useMemo to Stabilise Functions and Values

Without useCallback, a function is recreated on every render and may cause children to re‑render unnecessarily.

const handleClick = useCallback(() => {
  // Do something
}, []);

Avoid Inline Objects and Arrays in Props

// Causes re-render

// Use useMemo
const data = useMemo(() => ({ a: 1 }), []);

Keep State Local Where Possible

Lifting state up or storing too much in global context can lead to unnecessary tree‑wide re‑renders. Keep state close to where it’s used.

Conclusion

Understanding when React re‑renders a component is vital to building performant and predictable interfaces. State, props, context, and parent updates are the primary causes. By embracing immutable patterns and using tools like React.memo, useCallback, and useMemo, you can significantly reduce unnecessary rendering and boost the responsiveness of your application.