Skip to main content

Component re-render

ReactJunior~1 min read
Suggest an edit

1. A state change

Every call to setState() or setCount() (in useState) triggers a re-render of the component.

javascript
function Counter() { const [count, setCount] = useState(0); console.log('Re-render!'); return ( <button onClick={() => setCount(count + 1)}> {count} </button> ); }

Every click calls setCount, count changes, React calls the component again to update the UI.

If you call setCount(count) with the same value, React will not re-render, because the state did not change (React does a shallow comparison).

2. A props change

If the parent component passes new props, React re-renders the child component so it shows the updated data.

javascript
function Child({ value }) { console.log('Re-render Child!'); return <p>{value}</p>; } function Parent() { const [count, setCount] = useState(0); return ( <> <Child value={count} /> <button onClick={() => setCount(count + 1)}>+</button> </> ); }

Every time count changes, <Child />'s value prop changes, and it re-renders.

To avoid unnecessary re-renders, you can use React.memo(Child), so the component re-renders only when props change.

3. A context change

If you use useContext() and the value in Context.Provider changed, every consumer of that context will be re-rendered.

javascript
const ThemeContext = createContext('light'); function App() { const [theme, setTheme] = useState('light'); return ( <ThemeContext.Provider value={theme}> <Toolbar /> <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}> Switch theme </button> </ThemeContext.Provider> ); } function Toolbar() { const theme = useContext(ThemeContext); console.log('Re-render because of context!'); return <div className={theme}>Toolbar</div>; }

When the theme changes (setTheme), the context updates, and every component using useContext(ThemeContext) re-renders.

4. Parent re-render → children re-render

If a parent re-renders, React by default re-renders all of its descendants, even if their props did not change.

To avoid this:

  • wrap the child component in React.memo();
  • or use memoized values and callbacks via useMemo() and useCallback().

5. Calling forceUpdate() (rare)

In class components you can explicitly call this.forceUpdate(), which forces React to perform a re-render, even if state and props did not change.

6. Changes in the parent tree or keys (key)

If a component's key (key) changes, React remounts it (unmount → mount), which effectively redraws it from scratch.

Important to remember:

  • Re-render ≠ DOM update. React may call the component again, but will not touch the DOM, if the JSX result did not change (diff = 0).
  • React optimizes this using the Virtual DOM and Reconciliation.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit