Single Page Application concept in React - Step-by-Step Execution

Concept Flow - Single Page Application concept

User opens app URL

↓

Load single HTML page

↓

React renders initial UI

↓

User clicks navigation link

↓

React intercepts click

↓

Update UI by changing components

↓

No full page reload

↓

User sees new content instantly

This flow shows how a Single Page Application loads once and updates the UI dynamically without reloading the whole page.

Execution Sample

React

import React, { useState } from 'react';

function App() {
  const [page, setPage] = useState('home');
  return (
    <div>
      <nav>
        <button onClick={() => setPage('home')}>Home</button>
        <button onClick={() => setPage('about')}>About</button>
      </nav>
      {page === 'home' && <h1>Home Page</h1>}
      {page === 'about' && <h1>About Page</h1>}
    </div>
  );
}

export default App;

This React code shows a simple SPA with two pages toggled by buttons without reloading the page.

Execution Table

Step	User Action	State Before	Action Taken	State After	UI Rendered
1	Open app URL	page = 'home' (default)	Render initial UI	page = 'home'	Home Page shown
2	Click 'About' button	page = 'home'	setPage('about') called	page = 'about'	About Page shown
3	Click 'Home' button	page = 'about'	setPage('home') called	page = 'home'	Home Page shown
4	No further clicks	page = 'home'	No action	page = 'home'	Home Page shown

💡 User stops interacting; SPA remains on last rendered page without reload.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
page	'home' (default)	'home'	'about'	'home'	'home'

Key Moments - 2 Insights

Why doesn't the whole page reload when clicking navigation buttons?

Because React intercepts the click and updates only the component state (see execution_table steps 2 and 3), so the browser does not reload the page.

How does React know which content to show after clicking a button?

React uses the 'page' state variable to decide which component to render (see variable_tracker and execution_table), showing 'Home Page' or 'About Page' accordingly.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'page' after step 2?

A 'about'

B 'home'

C undefined

D 'contact'

💡 Hint

Check the 'State After' column in row for step 2.

At which step does the UI show the 'Home Page' after user interaction?

A Step 4 only

B Step 1 and Step 3

C Step 2 only

D Step 2 and Step 4

💡 Hint

Look at the 'UI Rendered' column for steps 1 and 3.

If the user never clicks any button, what will the UI show?

A Blank page

B About Page

C Home Page

D Error message

💡 Hint

Check the initial state and UI rendered at step 1.

Concept Snapshot

Single Page Application (SPA) loads one HTML page.
React manages UI updates by changing components.
Navigation changes state, not full page reload.
User sees instant content changes.
SPA improves speed and user experience.

Full Transcript

A Single Page Application (SPA) loads a single HTML page initially. React renders the UI based on a state variable called 'page'. When the user clicks navigation buttons, React updates the 'page' state without reloading the whole page. This triggers React to re-render only the parts of the UI that change, showing different content instantly. The execution table shows how the 'page' state changes from 'home' to 'about' and back, and how the UI updates accordingly. This approach makes the app feel faster and smoother because the browser does not reload the entire page on navigation.

Practice

1. What is the main advantage of a Single Page Application (SPA) compared to traditional multi-page websites?

easy

A. It uses only server-side rendering without JavaScript.

B. It loads the page once and updates content dynamically without full reloads.

C. It requires a new page load for every user action.

D. It does not support navigation between different views.

Solution

1. Step 1: Understand SPA behavior

   SPAs load a single HTML page and dynamically update content without reloading the entire page.

2. Step 2: Compare with traditional websites

   Traditional sites reload the whole page on navigation, causing slower user experience.

3. Final Answer:

   It loads the page once and updates content dynamically without full reloads. -> Option B

4. Quick Check:

   SPA = dynamic content update without reload [OK]

Hint: SPAs avoid full page reloads for faster user experience [OK]

Common Mistakes:

• Thinking SPAs reload pages on every action
• Confusing SPAs with server-only rendering
• Believing SPAs don't support navigation

2. Which React library is commonly used to manage navigation and URL paths in a Single Page Application?

easy

A. Styled Components

B. Redux

C. Axios

D. React Router

Solution

1. Step 1: Identify navigation management in React

   React Router is designed to handle routing and URL paths in SPAs.

2. Step 2: Differentiate other libraries

   Redux manages state, Axios handles HTTP requests, Styled Components manage styling.

3. Final Answer:

   React Router -> Option D

4. Quick Check:

   Routing in React SPA = React Router [OK]

Hint: React Router controls SPA navigation and URLs [OK]

Common Mistakes:

• Confusing Redux with routing
• Thinking Axios manages navigation
• Assuming styling libraries handle routing

3. Given this React SPA code snippet using React Router:

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

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

What happens when the user navigates to /about URL?

medium

A. Nothing happens because routes are not defined correctly.

B. The browser reloads the entire page and shows About component.

C. The About component renders without a full page reload.

D. The Home component renders instead of About.

Solution

1. Step 1: Analyze React Router setup

   The Route with path '/about' renders the About component inside BrowserRouter.

2. Step 2: Understand SPA navigation

   React Router updates the view without reloading the whole page when navigating to '/about'.

3. Final Answer:

   The About component renders without a full page reload. -> Option C

4. Quick Check:

   React Router navigation = no full reload [OK]

Hint: React Router changes views without reloading page [OK]

Common Mistakes:

• Assuming full page reload on route change
• Thinking routes are not matched correctly
• Confusing Home and About components

4. Identify the error in this React SPA routing code:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' component={Home} />
        <Route path='/profile' element=<Profile /> />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. The first Route uses 'component' prop instead of 'element'.

B. The BrowserRouter is missing a closing tag.

C. Routes should be replaced with Switch.

D. Profile component is not imported.

Solution

1. Step 1: Check Route props

   React Router v6 uses 'element' prop with JSX, not 'component'.

2. Step 2: Verify other code parts

   BrowserRouter is properly closed, Routes is correct in v6, and Profile import is not shown but not necessarily an error here.

3. Final Answer:

   The first Route uses 'component' prop instead of 'element'. -> Option A

4. Quick Check:

   React Router v6 Route uses element prop [OK]

Hint: Use 'element' prop with JSX in React Router v6 [OK]

Common Mistakes:

• Using 'component' prop from older React Router versions
• Confusing Routes with Switch in v6
• Assuming missing closing tags without checking

5. You want to build a React SPA that shows a loading spinner while fetching user data on route change. Which approach best fits SPA principles?

hard

A. Use React Router for routes and show a spinner component while fetching data asynchronously in the route component.

B. Reload the entire page on each route change to fetch fresh data.

C. Fetch all user data once on app load and never update it.

D. Use multiple HTML pages and link between them for each user view.

Solution

1. Step 1: Understand SPA data fetching

   SPAs fetch data asynchronously and update views without full reloads.

2. Step 2: Implement loading state in route components

   Showing a spinner while fetching data fits SPA dynamic update and user feedback.

3. Step 3: Eliminate non-SPA approaches

   Reloading pages or using multiple HTML pages breaks SPA flow; fetching once without updates is inflexible.

4. Final Answer:

   Use React Router for routes and show a spinner component while fetching data asynchronously in the route component. -> Option A

5. Quick Check:

   SPA + async data + spinner = Use React Router for routes and show a spinner component while fetching data asynchronously in the route component. [OK]

Hint: Show spinner during async fetch inside SPA route components [OK]

Common Mistakes:

• Reloading pages instead of dynamic updates
• Not showing loading feedback during fetch
• Ignoring SPA dynamic data needs