React Router overview - Performance & Optimization

Performance: React Router overview

MEDIUM IMPACT

React Router affects page load speed and interaction responsiveness by managing client-side navigation without full page reloads.

Navigating between pages in a React app

React

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import About from './About';
import Contact from './Contact';

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>
  );
}
export default App;

Client-side routing avoids full reloads, keeps React state, and updates only necessary components.

📈 Performance GainNon-blocking navigation, reduces load time by 200-500ms, improves INP

Navigating between pages in a React app

React

import React from 'react';
function App() {
  return (
    <div>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </div>
  );
}
export default App;

Using plain anchor tags causes full page reloads, blocking rendering and losing React state.

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

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Anchor tags for navigation	Full DOM reload	Multiple reflows (full page)	High paint cost (full repaint)	[X] Bad
React Router with Link and Routes	Minimal DOM updates	Single reflow per route change	Low paint cost (partial repaint)	[OK] Good

Rendering Pipeline

React Router intercepts navigation events and updates the React component tree without triggering a full browser reload, affecting the rendering pipeline by reducing layout and paint costs.

→JavaScript Execution

→Virtual DOM Diffing

→Layout

→Paint

⚠️ BottleneckJavaScript Execution during route changes if many components re-render

Core Web Vital Affected

INP

React Router affects page load speed and interaction responsiveness by managing client-side navigation without full page reloads.

Optimization Tips

1Avoid full page reloads by using React Router's Link for navigation.

2Lazy load route components to reduce initial bundle size and speed up route changes.

3Use React.memo or similar techniques to prevent unnecessary re-renders on route changes.

Performance Quiz - 3 Questions

What is the main performance benefit of using React Router's Link component over a plain anchor tag?

A It reduces the bundle size of the app

B It prevents full page reloads, improving interaction speed

C It automatically caches all pages for offline use

D It disables JavaScript to speed up loading

DevTools: Performance

How to check: Record a navigation event in the Performance panel, then analyze the Main thread for scripting and rendering time.

What to look for: Look for long scripting tasks or full page reloads indicating bad navigation patterns; fast route changes show small scripting and paint times.