Why React JS is Called a Single Page Application: Core Architecture Explained

React JS enables single page applications by maintaining UI state entirely in the browser and updating the view through a Virtual DOM diffing algorithm, eliminating full-page reloads during navigation or state changes.

React JS has become synonymous with single page applications (SPAs) due to its browser-centric rendering architecture. The facebook/react repository implements a reconciliation engine that keeps applications responsive by performing all UI updates client-side after the initial page load. This design allows developers to build complex, interactive interfaces that behave like native applications while running entirely within a single HTML document.

What Makes React JS a Single Page Application?

Virtual DOM and Incremental Updates

At the heart of React's SPA capability lies the Virtual DOM, a lightweight, in-memory representation of the real DOM maintained in packages/react-reconciler/src/ReactFiberReconciler.js. When application state changes, React constructs a new virtual tree, compares it against the previous version through a process called reconciliation, and calculates the minimal set of changes required. This diffing algorithm applies only the necessary mutations to the real DOM, making updates fast enough to occur on every user interaction without requiring a page refresh.

Client-Side Rendering Entry Points

React applications boot as SPAs through specific client-side entry points defined in packages/react-dom/src/client/ReactDOMClient.js. The createRoot() function establishes a root container where React manages the entire component tree. Once the initial HTML loads, root.render(<App />) takes over, rendering the complete UI hierarchy in the browser. This architecture ensures that subsequent navigation and state changes happen entirely within the JavaScript runtime, never triggering traditional server round-trips for new HTML documents.

Core Architectural Features Supporting SPAs

The Reconciliation Engine

The reconciliation engine implemented in packages/react-reconciler/src/ReactFiberReconciler.js provides the fiber-based architecture that enables concurrent updates. This system breaks rendering work into units that can be paused, aborted, or resumed based on priority. For SPAs, this means the application remains responsive during heavy computations or transitions, maintaining the illusion of a continuously running single page even when processing complex state changes.

Hydration for Seamless Startup

React supports hydration through hydrateRoot() in packages/react-dom/src/client/ReactDOMClient.js, allowing SPAs to start with server-rendered HTML for SEO and performance benefits. During hydration, React attaches event listeners to existing DOM nodes without recreating them, then assumes control of all subsequent updates. This hybrid approach lets applications begin as static HTML but immediately transition to dynamic SPA behavior after the initial load.

Concurrent Rendering and Scheduling

The scheduler in packages/scheduler/src/Scheduler.js coordinates when React performs work, enabling Concurrent Mode features that keep SPAs fluid. By prioritizing user interactions over background updates and implementing time-slicing, the scheduler ensures that navigation feels instantaneous even when the application is processing data. This architectural layer is essential for maintaining the single-page experience across complex, data-intensive applications.

Client-Side Navigation Without Page Reloads

Declarative Component Model

React's component model, defined in packages/react/src/React.js, uses a declarative paradigm where developers describe what the UI should look like for any given state rather than how to manipulate the DOM. In an SPA context, this means navigation is expressed by conditionally rendering different component hierarchies based on the current application state or URL. The framework handles all DOM mutations efficiently, ensuring the transition appears seamless to users without browser navigation events.

React Router Integration

While React Router exists as a separate package within the ecosystem, it leverages React's core architecture to enable SPA navigation. The router maps URL paths to specific components, using the browser's History API (pushState, replaceState) to update the address bar without triggering a server request. When the URL changes, React Router swaps the rendered component tree, and React's reconciler applies the minimal DOM changes necessary—maintaining the single-page experience while providing traditional navigation semantics.

Code Examples

Minimal SPA Entry Point

The following example demonstrates a complete React SPA using createRoot and React Router:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home page</h2>;
}

function About() {
  return <h2>About page</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

createRoot(document.getElementById('root')).render(<App />);

This implementation uses createRoot from packages/react-dom/src/client/ReactDOMClient.js to bootstrap the application. The BrowserRouter component intercepts navigation events and updates the component tree without page reloads, while React's reconciler handles the DOM updates efficiently.

Server-Side Rendering with Hydration

This example shows how React supports SPA behavior even when starting with server-rendered HTML:

// server.js (Node.js)
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './src/App';

const app = express();
app.use(express.static('public'));

app.get('*', (req, res) => {
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );
  res.send(`
    <!doctype html>
    <html>
      <head><title>My SPA</title></head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000);

// client.js (browser)
import { hydrateRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './src/App';

hydrateRoot(document.getElementById('root'), (
  <BrowserRouter>
    <App />
  </BrowserRouter>
));

The server uses renderToString to generate initial HTML for SEO purposes. The client then calls hydrateRoot from packages/react-dom/src/client/ReactDOMClient.js to attach the React tree to existing DOM nodes. After hydration, the application behaves as a standard SPA, with all navigation handled client-side.

Key Source Files in the React Repository

The following files in the facebook/react repository implement the architectural features that enable single page application behavior:

• packages/react-reconciler/src/ReactFiberReconciler.js – Implements the fiber-based reconciliation algorithm that diffs virtual DOM trees and applies minimal updates to the real DOM without page reloads.

• packages/react-dom/src/client/ReactDOMClient.js – Contains createRoot() and hydrateRoot() entry points that bootstrap React applications in the browser, establishing the client-side rendering context essential for SPAs.

• packages/react-dom/src/server/ReactDOMServer.node.js – Provides server-side rendering utilities like renderToString() that support hydration patterns, allowing SPAs to start with static HTML before taking over client-side.

• packages/react/src/React.js – Defines the core component APIs and element creation functions that enable the declarative programming model, where UI updates are expressed as state-driven component trees rather than imperative DOM manipulation.

• packages/scheduler/src/Scheduler.js – Implements the priority-based scheduling system that enables Concurrent Mode, ensuring that navigation and interactions remain smooth even during heavy computational work.

• packages/react-router – While a separate package within the ecosystem, this directory contains the routing logic that maps URLs to components using the History API, enabling navigation without server round-trips.

Summary

• React JS functions as a single page application framework by maintaining a Virtual DOM in memory and applying only minimal, calculated changes to the real DOM, eliminating the need for full-page reloads during navigation or state updates.

• The reconciliation engine in ReactFiberReconciler.js diffs component trees efficiently, enabling rapid UI updates that feel instantaneous to users.

• Client-side entry points createRoot() and hydrateRoot() in ReactDOMClient.js bootstrap the application in the browser, ensuring all subsequent rendering happens client-side after the initial HTML load.

• The scheduler in Scheduler.js prioritizes user interactions over background work, maintaining responsive navigation even in complex applications.

• When combined with React Router, these architectural features enable URL-driven navigation without server requests, fulfilling the defining characteristic of single page applications.

Frequently Asked Questions

What is the difference between React JS and a traditional multi-page application?

Traditional multi-page applications send a new HTML document from the server every time the user navigates to a different URL, causing full browser reloads. React JS single page applications load a single HTML document initially, then use JavaScript to dynamically update the DOM and handle navigation client-side, providing a seamless user experience without page refreshes.

Does React JS always require server-side rendering to function as an SPA?

No, React JS single page applications can function entirely with client-side rendering using createRoot().render() without any server-side rendering. However, React also supports hydration via hydrateRoot() for applications that start with server-rendered HTML for SEO or performance benefits, transitioning to client-side SPA behavior after the initial load.

How does React Router enable single page application navigation?

React Router intercepts browser navigation events using the History API (pushState and replaceState) to update the URL without triggering a server request. It maps URL paths to specific React components, and when the URL changes, React's reconciler in ReactFiberReconciler.js efficiently updates the DOM to display the new component tree while maintaining application state.

What role does the Virtual DOM play in React's SPA architecture?

The Virtual DOM is a lightweight JavaScript representation of the actual DOM that React maintains in memory. When state changes occur in a React JS single page application, React constructs a new Virtual DOM tree, compares it with the previous version using the reconciliation algorithm in ReactFiberReconciler.js, and applies only the minimal necessary changes to the real DOM, enabling fast updates without page reloads.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}