Single Page Application concept in React - Performance & Optimization

Performance: Single Page Application concept

MEDIUM IMPACT

This concept affects initial page load speed and interaction responsiveness by loading content dynamically without full page reloads.

Loading new content on user navigation

React

import { useNavigate } from 'react-router-dom';
function LoadPage() {
  const navigate = useNavigate();
  navigate('/about');
}

// Or inside a component:
// const navigate = useNavigate();
// navigate('/about');

Uses client-side routing to update URL and content without full reload, preserving state.

📈 Performance GainSingle reflow, faster interaction (under 100ms), no full page reload.

Loading new content on user navigation

React

function loadPage() {
  window.location.href = '/about';
}

Triggers full page reload causing slow load and loss of app state.

📉 Performance CostBlocks rendering for 500-1000ms depending on network; triggers full reflow and repaint.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page reload on navigation	High (reloads entire DOM)	Multiple (full reflow)	High (full repaint)	[X] Bad
Client-side routing with React Router	Low (updates part of DOM)	Single or none	Low (partial repaint)	[OK] Good
Loading entire app bundle upfront	N/A	N/A	Blocks rendering during JS parse	[X] Bad
Code splitting with lazy loading	N/A	N/A	Non-blocking JS load	[OK] Good

Rendering Pipeline

SPAs load a shell HTML and JS bundle first, then dynamically update the DOM via JavaScript without full reloads.

→Script Parsing

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckScript Parsing and Execution

Core Web Vital Affected

LCP, INP

This concept affects initial page load speed and interaction responsiveness by loading content dynamically without full page reloads.

Optimization Tips

1Avoid full page reloads by using client-side routing.

2Use code splitting to reduce initial JavaScript bundle size.

3Monitor scripting time in DevTools to catch performance bottlenecks.

Performance Quiz - 3 Questions

What is a main performance benefit of using client-side routing in a SPA?

A It eliminates the need for CSS styles.

B It reduces the total JavaScript bundle size automatically.

C It avoids full page reloads, improving interaction speed.

D It guarantees zero layout shifts on navigation.

DevTools: Performance

How to check: Record a session while navigating SPA routes; look for long scripting tasks and layout shifts.

What to look for: Check for long scripting times blocking main thread and absence of full page reloads.