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.