Client-side routing concept in React - Performance & Optimization

Performance: Client-side routing concept

MEDIUM IMPACT

Client-side routing affects page load speed by reducing full page reloads and improves interaction responsiveness by updating only parts of the page.

Navigating between pages in a React app

React

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to='/about'>About</Link>
        <Link to='/contact'>Contact</Link>
      </nav>
      <Routes>
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Updates URL and content without full reload, preserving app state and improving responsiveness.

📈 Performance GainSingle-page update triggers 1 reflow and paint, no full reload

Navigating between pages in a React app

React

function App() {
  return (
    <div>
      <button onClick={() => window.location.href = '/about'}>About</button>
      <button onClick={() => window.location.href = '/contact'}>Contact</button>
    </div>
  );
}

Triggers full page reloads on navigation, causing slower load times and losing app state.

📉 Performance CostBlocks rendering for 500-1000ms per navigation, triggers full page reload

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page reload navigation	High (reloads entire DOM)	Multiple (full page)	High (full repaint)	[X] Bad
Client-side routing with react-router	Low (updates partial DOM)	Single or few	Low (partial repaint)	[OK] Good

Rendering Pipeline

Client-side routing intercepts navigation events, updates the URL and React component tree, triggering style recalculation, layout, and paint only for changed parts.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages when updating visible components

Core Web Vital Affected

INP

Client-side routing affects page load speed by reducing full page reloads and improves interaction responsiveness by updating only parts of the page.

Optimization Tips

1Use client-side routing to avoid full page reloads and improve interaction speed.

2Split code by route to reduce initial bundle size and speed up first load.

3Minimize re-rendered components on route change to reduce layout and paint cost.

Performance Quiz - 3 Questions

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

A Eliminates all reflows and repaints

B Reduces initial JavaScript bundle size

C Avoids full page reloads, improving interaction speed

D Automatically caches all pages on first load

DevTools: Performance

How to check: Record a navigation event, then inspect the flame chart for scripting, layout, and paint times. Compare full reload vs client-side route change.

What to look for: Look for long scripting and layout times on full reload; client-side routing shows shorter, partial updates.