What is React - Performance Impact

Performance: What is React

MEDIUM IMPACT

React affects how quickly a web page can show interactive content by efficiently updating the parts of the page that change.

Updating UI efficiently when data changes

React

import React, { useState } from 'react';
function App() {
  const [data, setData] = useState('');
  return <div>{data}</div>;
}
export default App;

React updates only changed parts using virtual DOM diffing, minimizing real DOM changes.

📈 Performance Gainreduces reflows to only changed nodes, improving interaction responsiveness

Updating UI efficiently when data changes

React

const element = document.getElementById('app');
element.innerHTML = '<div>' + newData + '</div>';

Replaces entire content causing full re-render and layout recalculation.

📉 Performance Costtriggers 1 full reflow and repaint per update

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct DOM manipulation replacing full content	High (full subtree replaced)	1 full reflow per update	High paint cost	[X] Bad
React virtual DOM with selective updates	Low (only changed nodes)	Minimal reflows	Lower paint cost	[OK] Good

Rendering Pipeline

React creates a virtual copy of the UI, compares it with the previous version, and updates only the changed parts in the real DOM.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages when many DOM nodes change

Core Web Vital Affected

INP

React affects how quickly a web page can show interactive content by efficiently updating the parts of the page that change.

Optimization Tips

1React uses a virtual DOM to minimize real DOM updates.

2Updating only changed parts reduces layout and paint costs.

3Avoid unnecessary re-renders to keep interactions fast.

Performance Quiz - 3 Questions

How does React improve page interaction speed compared to direct DOM updates?

A By using inline styles instead of CSS

B By reloading the entire page faster

C By updating only changed parts of the DOM using a virtual DOM

D By blocking user input during updates

DevTools: Performance

How to check: Record a session while interacting with the React app, then look for long scripting or layout tasks.

What to look for: Look for reduced layout and paint times during updates, indicating efficient React rendering.