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.

Practice

1. What is the main purpose of React Router in a React application?

easy

A. To style React components with CSS

B. To create multiple pages without reloading the browser

C. To manage state across components

D. To fetch data from APIs

Solution

1. Step 1: Understand React Router's role

   React Router helps build apps with multiple pages by changing views without full page reloads.

2. Step 2: Compare with other options

   Styling, state management, and data fetching are handled by other tools, not React Router.

3. Final Answer:

   To create multiple pages without reloading the browser -> Option B

4. Quick Check:

   React Router = multi-page navigation without reload [OK]

Hint: React Router = multi-page navigation without full reload [OK]

Common Mistakes:

• Confusing React Router with CSS or styling tools
• Thinking React Router manages data fetching
• Assuming React Router handles state management

2. Which of the following is the correct way to wrap your app with React Router for browser-based routing?

easy

A. <BrowserRouter>...</BrowserRouter>

B. <Link>...</Link>

C. <Route>...</Route>

D. <Router>...</Router>

Solution

1. Step 1: Identify the main router component

   For browser history routing, React Router uses BrowserRouter to wrap the app.

2. Step 2: Understand other components

   Route defines pages, Link creates navigation links, and Router alone is not a valid component.

3. Final Answer:

   <BrowserRouter>...</BrowserRouter> -> Option A

4. Quick Check:

   BrowserRouter wraps app for browser routing [OK]

Hint: Wrap app with <BrowserRouter> for browser routing [OK]

Common Mistakes:

• Using <Router> instead of <BrowserRouter>
• Confusing <Route> with the router wrapper
• Wrapping app with <Link> which is for navigation

3. Given this React Router setup, what will be rendered when the URL path is /about?

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element=<Home /> />
        <Route path='/about' element=<About /> />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. The component

B. Nothing renders because of missing default route

C. Both and components

D. The component

Solution

1. Step 1: Match URL path with Route path

   The URL /about matches the route with path='/about', so <About /> renders.

2. Step 2: Understand route exclusivity

   Only the matching route's element renders; <Home /> renders only at /.

3. Final Answer:

   The <About /> component -> Option D

4. Quick Check:

   URL '/about' renders About component [OK]

Hint: URL path matches Route path exactly to render component [OK]

Common Mistakes:

• Thinking both components render simultaneously
• Assuming missing default route breaks rendering
• Confusing '/' path with '/about'

4. Identify the error in this React Router code snippet:

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

function App() {
  return (
    <BrowserRouter>
      <Route path='/' element=<Home /> />
      <Routes>
        <Route path='/about' element=<About /> />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. <Route> must be inside <Routes>

B. Missing closing tag for <BrowserRouter>

C. The <Route> for '/' should not have an element prop

D. Cannot use <Route> and <Routes> together

Solution

1. Step 1: Check component nesting rules

   In React Router, all <Route> components must be children of <Routes>.

2. Step 2: Identify incorrect placement

   The <Route path='/' ... /> is outside <Routes>, which is invalid.

3. Final Answer:

   <Route> must be inside <Routes> -> Option A

4. Quick Check:

   Routes wrap Route components [OK]

Hint: Always put <Route> inside <Routes> component [OK]

Common Mistakes:

• Placing <Route> outside <Routes>
• Thinking <Route> can be used alone
• Confusing element prop usage

5. You want to create a navigation menu that changes the URL without reloading the page. Which React Router component should you use, and why? Choose the best option.

hard

A. Use <Route> because it defines the navigation links

B. Use <a> tags because they are standard HTML links

C. Use <Link> because it updates the URL and renders the new page without reload

D. Use <BrowserRouter> because it creates the navigation menu

Solution

1. Step 1: Identify component for navigation links

   <Link> is designed to change the URL and render new pages without reloading.

2. Step 2: Compare with other options

   <a> causes full page reload, <Route> defines pages, and <BrowserRouter> wraps the app but does not create links.

3. Final Answer:

   Use <Link> because it updates the URL and renders the new page without reload -> Option C

4. Quick Check:

   Use Link for smooth navigation without reload [OK]

Hint: Use <Link> for navigation to avoid full page reload [OK]

Common Mistakes:

• Using <a> tags causing full reload
• Confusing <Route> with navigation links
• Thinking <BrowserRouter> creates menus