Re-rendering behavior in React - Performance & Optimization

Performance: Re-rendering behavior

MEDIUM IMPACT

This affects how often React updates the UI, impacting interaction responsiveness and CPU usage.

Updating a component state causing all child components to re-render unnecessarily

React

const Child = React.memo(function Child() {
  console.log('Child rendered');
  return <div>Child component</div>;
});

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child />
    </div>
  );
}

React.memo prevents Child from re-rendering unless its props change, reducing unnecessary renders.

📈 Performance GainReduces re-renders of Child from every state update to zero unless props change.

Updating a component state causing all child components to re-render unnecessarily

React

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child />
    </div>
  );
}

function Child() {
  console.log('Child rendered');
  return <div>Child component</div>;
}

Child component re-renders every time Parent updates state, even if Child does not depend on that state.

📉 Performance CostTriggers 1 re-render per state update, increasing CPU usage and slowing interaction.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Parent state update triggers all children re-render	Many virtual DOM diffs	Multiple reflows if DOM changes	Higher paint cost due to updates	[X] Bad
Using React.memo to prevent unnecessary child re-renders	Minimal virtual DOM diffs	Single or no reflows if no DOM changes	Lower paint cost	[OK] Good
Passing new inline functions as props causing re-renders	Virtual DOM diffs triggered by prop changes	Reflows triggered if DOM updates	Increased paint cost	[X] Bad
Memoizing functions with useCallback to stabilize props	Reduced virtual DOM diffs	Fewer reflows	Reduced paint cost	[OK] Good

Rendering Pipeline

React re-rendering triggers virtual DOM diffing, which leads to real DOM updates if changes are detected. Excessive re-renders increase CPU work and can delay painting.

→JavaScript Execution

→Virtual DOM Diffing

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Virtual DOM Diffing

Core Web Vital Affected

INP

This affects how often React updates the UI, impacting interaction responsiveness and CPU usage.

Optimization Tips

1Wrap pure components with React.memo to avoid re-rendering when props don’t change.

2Use useCallback to memoize functions passed as props to prevent new references each render.

3Avoid creating new objects or arrays inline in JSX props to reduce re-renders.

Performance Quiz - 3 Questions

What causes a React component wrapped in React.memo to still re-render unnecessarily?

A Not using keys in lists

B Using useState inside the component

C Passing new inline functions or objects as props each render

D Having too many child components

DevTools: React Developer Tools Profiler

How to check: Open React DevTools, go to Profiler tab, record interactions, and observe which components re-render and how long they take.

What to look for: Look for components that re-render frequently without prop or state changes, indicating unnecessary re-renders.