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.

Practice

1. What is the main purpose of ReactDOM.createRoot in React?

easy

A. To define a new React component

B. To update the state of a component

C. To create a root container to render React components into the DOM

D. To fetch data from an API

Solution

1. Step 1: Understand ReactDOM.createRoot role

   This function creates a root container that connects React with a specific DOM element.

2. Step 2: Connect React components to the DOM

   Using this root, React can render components inside the chosen HTML element.

3. Final Answer:

   To create a root container to render React components into the DOM -> Option C

4. Quick Check:

   ReactDOM.createRoot creates root container [OK]

Hint: ReactDOM.createRoot sets where React shows content [OK]

Common Mistakes:

• Confusing createRoot with component creation
• Thinking it updates state
• Assuming it fetches data

2. Which of the following is the correct syntax to render a React component App inside a DOM element with id root using React 18+?

easy

A. const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

B. ReactDOM.render(, document.getElementById('root'));

C. ReactDOM.createRoot().render(document.getElementById('root'));

D. const root = ReactDOM.render(document.getElementById('root')); root.createRoot();

Solution

1. Step 1: Identify React 18+ render syntax

   React 18+ uses ReactDOM.createRoot with root.render to mount components.

2. Step 2: Match correct method calls and parameters

   const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); correctly calls createRoot with the DOM element, then calls render with the component.

3. Final Answer:

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

4. Quick Check:

   ReactDOM.createRoot + root.render = correct syntax [OK]

Hint: Use createRoot on element, then call render with component [OK]

Common Mistakes:

• Using old ReactDOM.render syntax in React 18+
• Swapping parameters in createRoot or render
• Calling methods in wrong order

3. Given the code below, what will be displayed on the web page?

const root = ReactDOM.createRoot(document.getElementById('root'));
function Greeting() {
  return <h1>Hello, React!</h1>;
}
root.render(<Greeting />);

medium

A. Hello, React! inside an h1 heading

B. An empty page

C. Error: Greeting is not defined

D. The text 'Greeting' displayed

Solution

1. Step 1: Understand component definition and rendering

   The Greeting function returns an h1 element with text 'Hello, React!'.

2. Step 2: ReactDOM renders Greeting component inside 'root'

   Calling root.render with <Greeting /> displays the returned h1 content in the page.

3. Final Answer:

   Hello, React! inside an h1 heading -> Option A

4. Quick Check:

   Component returns h1 with text, so page shows it [OK]

Hint: Component returns h1 with text, so that text appears [OK]

Common Mistakes:

• Thinking component name shows as text
• Expecting error without import
• Assuming empty page without render

4. What is wrong with the following ReactDOM render code?

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

medium

A. createRoot cannot be assigned to a variable

B. root.render should be called before createRoot

C. App component must be a class component

D. The argument to createRoot should be a DOM element, not a string

Solution

1. Step 1: Check createRoot argument type

   createRoot expects a DOM element, but 'root' is a string, not an element.

2. Step 2: Correct usage requires document.getElementById('root')

   We must pass document.getElementById('root') to get the actual DOM node.

3. Final Answer:

   The argument to createRoot should be a DOM element, not a string -> Option D

4. Quick Check:

   createRoot needs DOM element, not string [OK]

Hint: Pass DOM element, not string, to createRoot [OK]

Common Mistakes:

• Passing string id instead of element
• Calling render before createRoot
• Thinking component type matters here

5. You want to render a React component Dashboard inside a div with id app-root. You also want to ensure the component updates correctly when state changes. Which code snippet correctly sets up the ReactDOM render process for this scenario?

hard

A. const root = ReactDOM.createRoot('app-root'); root.render(Dashboard);

B. const root = ReactDOM.createRoot(document.getElementById('app-root')); root.render();

C. ReactDOM.render(, document.getElementById('app-root'));

D. const root = ReactDOM.createRoot(document.querySelector('#app-root')); root.render(Dashboard());

Solution

1. Step 1: Select the correct DOM element

   Use document.getElementById('app-root') to get the div element for rendering.

2. Step 2: Use ReactDOM.createRoot and root.render properly

   Call createRoot with the element, then render the component as JSX (<Dashboard />) to enable React updates.

3. Step 3: Avoid passing string or calling component as function

   Passing string or calling Dashboard() directly breaks React's rendering and update process.

4. Final Answer:

   const root = ReactDOM.createRoot(document.getElementById('app-root')); root.render(<Dashboard />); -> Option B

5. Quick Check:

   createRoot + render with JSX component = correct [OK]

Hint: Use createRoot on element, render JSX component for updates [OK]

Common Mistakes:

• Passing string instead of element to createRoot
• Using old ReactDOM.render in React 18+
• Calling component as function instead of JSX