Creating first React app - Performance Optimization Steps

Performance: Creating first React app

MEDIUM IMPACT

This affects the initial page load speed and time to interactive by controlling how React and its dependencies load and render the app.

Setting up the first React app with optimal loading

React

import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  return <h1>Hello, React!</h1>;
}

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

Using createRoot from 'react-dom/client' enables concurrent features and better startup performance; also supports future optimizations.

📈 Performance GainReduces blocking time by 20-50ms; enables smoother initial rendering.

Setting up the first React app with optimal loading

React

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

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

Using ReactDOM.render from 'react-dom' blocks rendering until React and ReactDOM fully load, increasing initial load time.

📉 Performance CostBlocks rendering for 200-400ms on slow networks; large initial bundle (~100kb) without code splitting.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
ReactDOM.render (legacy)	Single root node	1 reflow	Low paint cost	[!] OK
createRoot.render (modern)	Single root node	1 reflow	Low paint cost	[OK] Good

Rendering Pipeline

The React app loading flows through parsing JS, executing React code, building virtual DOM, then updating the real DOM. Initial bundle size and script loading affect how fast this pipeline starts.

→Script Parsing

→JS Execution

→Virtual DOM Creation

→DOM Update

⚠️ BottleneckJS Execution and DOM Update are most expensive due to large bundle and synchronous rendering calls.

Core Web Vital Affected

LCP

This affects the initial page load speed and time to interactive by controlling how React and its dependencies load and render the app.

Optimization Tips

1Use createRoot from react-dom/client instead of ReactDOM.render for better startup performance.

2Keep initial JavaScript bundle small to reduce blocking time and improve LCP.

3Use code splitting and lazy loading to defer non-critical code and speed up first paint.

Performance Quiz - 3 Questions

Which React API improves initial rendering performance in a new React app?

A createRoot from react-dom/client

B ReactDOM.render from react-dom

C React.createElement

D React.useState

DevTools: Performance

How to check: Open DevTools > Performance tab, record page load, and look for long scripting or blocking times related to React scripts.

What to look for: Look for long tasks during JS execution and delayed first contentful paint indicating slow React app startup.