What Causes React Components to Re-render
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,contextor parent changes - Optimization possible with
React.memo,useMemo,useCallbackanduseRef - Avoid passing new objects and functions without necessity
Tip:
Optimize only components that actually create load. Premature optimization is evil.