Defining routes in React - Performance & Optimization

Performance: Defining routes

MEDIUM IMPACT

This affects the initial page load speed and interaction responsiveness by controlling which components render based on the URL.

Setting up routes in a React app

React

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

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Uses React.lazy and Suspense to load route components only when needed, reducing initial bundle size and speeding up LCP.

📈 Performance GainSaves initial bundle size by lazy loading routes, improving LCP and reducing blocking time.

Setting up routes in a React app

React

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

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
}

Using Switch and component props causes all route components to be bundled and potentially loaded even if not needed immediately.

📉 Performance CostIncreases bundle size and delays LCP due to loading all route components upfront.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager route loading with Switch and component props	More nodes due to all components loaded	Multiple reflows if components mount unnecessarily	Higher paint cost due to larger initial render	[X] Bad
Lazy loaded routes with React.lazy and Suspense	Only necessary nodes rendered	Single reflow for active route	Lower paint cost with smaller initial render	[OK] Good

Rendering Pipeline

Route definitions determine which components the browser renders based on the URL. Efficient routing delays loading non-visible components, reducing style calculations and layout work.

→JavaScript Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Parsing and Execution due to large bundles with all routes loaded upfront

Core Web Vital Affected

LCP

This affects the initial page load speed and interaction responsiveness by controlling which components render based on the URL.

Optimization Tips

1Use React.lazy and Suspense to load route components only when needed.

2Replace Switch with Routes for modern React Router performance benefits.

3Avoid importing all route components upfront to keep initial bundle size small.

Performance Quiz - 3 Questions

What is the main performance benefit of lazy loading route components in React?

A Reduces initial JavaScript bundle size and speeds up page load

B Improves CSS selector matching speed

C Prevents layout shifts caused by images

D Increases the number of DOM nodes rendered

DevTools: Performance

How to check: Record a page load and look at the Main thread activity to see JavaScript parsing and scripting time. Check the Flame Chart for large blocking tasks.

What to look for: Look for long scripting tasks caused by large bundles and delayed LCP timings indicating slow route loading.

Practice

1. Which component is used to wrap your entire React app to enable routing?

easy

A. Link

B. Route

C. BrowserRouter

D. Routes

Solution

1. Step 1: Understand routing setup

   React Router requires a top-level component to manage routing context.

2. Step 2: Identify the wrapper component

   BrowserRouter wraps the app to enable routing features.

3. Final Answer:

   <BrowserRouter> -> Option C

4. Quick Check:

   Routing wrapper = BrowserRouter [OK]

Hint: Remember: BrowserRouter wraps the whole app for routing [OK]

Common Mistakes:

• Using <Routes> as the top wrapper
• Confusing <Link> with the router wrapper
• Using <Route> to wrap the app

2. Which of the following is the correct syntax to define a route for path '/home' rendering component?

easy

A. } />

B.

C. } />

D. } />

Solution

1. Step 1: Recall Route syntax in React Router v6+

   Routes use path for URL and element for component to render.

2. Step 2: Match correct syntax

   <Route path='/home' element={<Home />} /> uses path='/home' and element={<Home />}, which is correct.

3. Final Answer:

   <Route path='/home' element={<Home />} /> -> Option A

4. Quick Check:

   Route syntax = path + element [OK]

Hint: Use path for URL and element for component in Route [OK]

Common Mistakes:

• Using component instead of element
• Using to instead of path
• Passing component as JSX instead of element prop

3. Given this code snippet, 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 Us
} />
        <Route path='/contact' element={
Contact
} />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. Home

B. Nothing renders

C. Contact

D. About Us

Solution

1. Step 1: Match URL path to Route path

   The URL '/about' matches the Route with path='/about'.

2. Step 2: Identify rendered element

   The matched Route renders <h1>About Us</h1>.

3. Final Answer:

   <h1>About Us</h1> -> Option D

4. Quick Check:

   URL '/about' renders About Us [OK]

Hint: Match URL path exactly to Route path to find output [OK]

Common Mistakes:

• Confusing '/' with '/about'
• Assuming default route renders for all paths
• Ignoring exact path matching

4. What is wrong with this route definition?

<Route path='/profile' component={} />

medium

A. The path should be '/profiles' instead of '/profile'

B. The prop 'component' should be 'element' with JSX

C. The component should be passed as a string, not JSX

D. Route cannot have a path prop

Solution

1. Step 1: Recall correct Route props in React Router v6+

   Routes use element prop to pass JSX, not component.

2. Step 2: Identify the error

   Using component causes the route not to render correctly.

3. Final Answer:

   The prop 'component' should be 'element' with JSX -> Option B

4. Quick Check:

   Use element, not component, for Route JSX [OK]

Hint: Use element prop with JSX in Route, not component [OK]

Common Mistakes:

• Using component prop from older React Router versions
• Passing component as string
• Omitting element or component prop

5. You want to create nested routes where '/dashboard' shows a component and '/dashboard/settings' shows inside it. Which is the correct way to define these routes?

hard

A.
}>
} />

B.
} />
} />

C.
}>
} />

D.
}>
} />

Solution

1. Step 1: Understand nested route path rules

   Nested routes use relative paths inside parent Route; child path 'settings' appends to '/dashboard'.

2. Step 2: Check each option for correct nesting

   <Routes> <Route path='/dashboard' element={<Dashboard />}> <Route path='settings' element={<Settings />} /> </Route> </Routes> correctly nests settings as child path without repeating parent path.

3. Final Answer:

   <Routes> <Route path='/dashboard' element={<Dashboard />}> <Route path='settings' element={<Settings />} /> </Route> </Routes> -> Option A

4. Quick Check:

   Nested child paths are relative, no leading slash [OK]

Hint: Nested routes use relative paths without leading slash [OK]

Common Mistakes:

• Using absolute paths in nested routes
• Defining nested routes as siblings
• Repeating parent path in child route