Reasons for Component Re-rendering in React

In React re-render is a process where component is called again so React can build new virtual tree and compare it with previous one.

It's important for developer to understand what exactly can cause re-render to optimize performance and avoid unnecessary updates.

Main Re-render Reasons

State change

When calling setState (e.g., setCount) component always re-renders.

const [count, setCount] = useState(0);
setCount(count + 1); // triggers re-render

Props change

If component receives new prop values, it will also re-render.

<Child value={someValue} /> // if someValue changed → re-render

Parent component re-rendered

If parent updated, all its child components are also called again, unless they're optimized (React.memo, shouldComponentUpdate).

Context change

If you use useContext and context value changes — all components using it will re-render.

Forced re-render

For example, through useReducer, useSyncExternalStore or external stores — can manually initiate component update.

How to Avoid Unnecessary Re-renders

Method	What it does
`React.memo(Component)`	Caches component, doesn't update without props changes
`useMemo(fn, deps)`	Caches calculations between renders
`useCallback(fn, deps)`	Caches functions passed down the tree
`useRef()`	Stores data without component re-render
`key`	Controls component identity in lists

Unnecessary Render Example

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

  return (
    <>
      <Child />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

function Child() {
  console.log("Child re-renders");
  return <div>I don't change anything</div>;
}

Even if Child doesn't use count, it still re-renders because parent updated.

Solution

const Child = React.memo(() => {
  console.log("Child re-renders");
  return <div>I don't change anything</div>;
});

Trap: new value by reference

const obj = { a: 1 };
<Component data={obj} />

New reference created each time, even if data is same → re-render. Use useMemo or useCallback to keep reference.

Summary

Components in React re-render on state, props, context or parent changes
Optimization possible with React.memo, useMemo, useCallback and useRef
Avoid passing new objects and functions without necessity

Tip:

Optimize only components that actually create load. Premature optimization is evil.

Back

Forward

Content

Main Re-render Reasons How to Avoid Unnecessary Re-renders Unnecessary Render Example Solution Trap: new value by reference Summary