ReactDOM render process - Performance & Optimization

Performance: ReactDOM render process

HIGH IMPACT

This affects how fast React updates the UI and how smoothly the page responds to user actions.

Updating UI efficiently when state changes

React

function App() {
  const [count, setCount] = React.useState(0);
  return <Counter count={count} onClick={() => setCount(c => c + 1)} />;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// React updates only changed components efficiently

React updates only the changed parts of the UI, batching DOM changes to minimize reflows and repaints.

📈 Performance GainSingle reflow and repaint per update, improving responsiveness and reducing blocking time.

Updating UI efficiently when state changes

React

ReactDOM.render(<App />, document.getElementById('root'));

// Re-render entire app on every small state change outside React's control

Re-rendering the whole app causes many DOM updates and layout recalculations, slowing down interaction.

📉 Performance CostTriggers multiple reflows and repaints per update, blocking rendering for tens of milliseconds on complex apps.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full ReactDOM.render on every change	Many nodes updated	Multiple reflows per update	High paint cost	[X] Bad
React root with selective updates	Minimal nodes updated	Single reflow per update	Low paint cost	[OK] Good

Rendering Pipeline

ReactDOM render process starts by reconciling the virtual DOM tree, then calculates the minimal changes needed. It updates the real DOM accordingly, triggering style recalculation, layout, paint, and composite steps in the browser.

→Reconciliation

→DOM Update

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive due to DOM changes triggered by ReactDOM updates.

Core Web Vital Affected

INP

This affects how fast React updates the UI and how smoothly the page responds to user actions.

Optimization Tips

1Avoid calling ReactDOM.render repeatedly for the whole app; use React root rendering.

2Use React's built-in diffing to minimize DOM updates and reflows.

3Memoize components and state to prevent unnecessary ReactDOM updates.

Performance Quiz - 3 Questions

What is the main performance benefit of React's reconciliation during ReactDOM render?

A It updates only changed parts of the DOM to reduce reflows and repaints.

B It reloads the entire page to ensure fresh content.

C It delays all updates until the user stops interacting.

D It disables browser painting to speed up rendering.

DevTools: Performance

How to check: Record a performance profile while interacting with the React app. Look for long tasks and frequent layout recalculations.

What to look for: Check for multiple layout and paint events after ReactDOM updates. Fewer and shorter layout events indicate better performance.