docu_code/react_routing.txt

========================
CODE SNIPPETS
========================
TITLE: Declarative Routing with React Router
DESCRIPTION: Shows how to implement robust client-side routing using the `react-router` library. It defines routes with specific paths and associated components, enabling URL-driven navigation, deep linking, and better application structure. This is the recommended approach for handling routing in React applications.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/02/14/sunsetting-create-react-app.md#_snippet_3

LANGUAGE: js
CODE:
```
import {RouterProvider, createBrowserRouter} from 'react-router';

import Home from './Home';
import Dashboard from './Dashboard';

// ✅ Each route has it's own URL
const router = createBrowserRouter([
  {path: '/', element: <Home />},
  {path: '/dashboard', element: <Dashboard />}
]);

export default function App() {
  return (
    <RouterProvider value={router} />
  )
}
```

----------------------------------------

TITLE: Client-Side Routing with React useState (Anti-Pattern)
DESCRIPTION: Illustrates a basic, but problematic, approach to client-side routing in React using `useState`. While it allows switching between components, it does not update the URL, preventing direct linking or browser history navigation. This method is generally discouraged for production applications due to its limitations.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/02/14/sunsetting-create-react-app.md#_snippet_2

LANGUAGE: js
CODE:
```
import {useState} from 'react';

import Home from './Home';
import Dashboard from './Dashboard';

export default function App() {
  // ❌ Routing in state does not create URLs
  const [route, setRoute] = useState('home');
  return (
    <div>
      {route === 'home' && <Home />}
      {route === 'dashboard' && <Dashboard />}
    </div>
  )
}
```

----------------------------------------

TITLE: React Custom Client-Side Router Implementation
DESCRIPTION: This module implements a basic client-side routing mechanism for a React application using Context and various React hooks. It manages the current URL state, provides functions for programmatic navigation, and integrates with React's useTransition hook to handle pending navigation states, offering a custom routing solution.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_78

LANGUAGE: JavaScript
CODE:
```
import {
  useState,
  createContext,
  use,
  useTransition,
  useLayoutEffect,
  useEffect,
} from "react";

const RouterContext = createContext({ url: "/", params: {} });

export function useRouter() {
  return use(RouterContext);
}

export function useIsNavPending() {
  return use(RouterContext).isPending;
}

export function Router({ children }) {
  const [routerState, setRouterState] = useState({
    pendingNav: () => {},
    url: document.location.pathname,
  });
  const [isPending, startTransition] = useTransition();

  function go(url) {
    setRouterState({
      url,
      pendingNav() {
        window.history.pushState({}, "", url);
      },
    });
  }
  function navigate(url) {
    // Update router state in transition.
    startTransition(() => {
      go(url);
    });
  }

  function navigateBack(url) {
    // Update router state in transition.
    startTransition(() => {
      go(url);
    });
  }

  useEffect(() => {
    function handlePopState() {
      // This should not animate because restoration has to be synchronous.
      // Even though it's a transition.
      startTransition(() => {
        setRouterState({
```

----------------------------------------

TITLE: Optimized Code Splitting with React Router Lazy Loading
DESCRIPTION: This snippet demonstrates how to implement efficient code splitting using React Router's `lazy` option. By configuring routes with `lazy` imports, the router can download code bundles in parallel with data, ensuring that route components are loaded and ready before rendering. This strategy optimizes application load times by only downloading necessary code.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/02/14/sunsetting-create-react-app.md#_snippet_6

LANGUAGE: js
CODE:
```
import Home from './Home';
import Dashboard from './Dashboard';

// ✅ Routes are downloaded before rendering
const router = createBrowserRouter([
  {path: '/', lazy: () => import('./Home')},
  {path: '/dashboard', lazy: () => import('Dashboard')}
]);
```

----------------------------------------

TITLE: Optimized Code Splitting with React Router Lazy Loading
DESCRIPTION: This example demonstrates how to implement optimized code splitting using React Router's `lazy` option. By specifying routes to be lazily loaded, the router can fetch the necessary code in parallel with route navigation, ensuring that code is downloaded before the component renders, which enhances performance and user experience.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/02/14/sunsetting-create-react-app.md#_snippet_8

LANGUAGE: js
CODE:
```
import Home from './Home';
import Dashboard from './Dashboard';

// ✅ Routes are downloaded before rendering
const router = createBrowserRouter([
  {path: '/', lazy: () => import('./Home')},
  {path: '/dashboard', lazy: () => import('Dashboard')}
]);
```

----------------------------------------

TITLE: React Router Context and Navigation Hook
DESCRIPTION: This JavaScript code defines a React component that provides a routing context. It uses `useEffect` to listen for `popstate` events for back/forward navigation and `useLayoutEffect` to handle pending navigation updates. The `RouterContext` makes the current URL, navigation functions, and pending status available to child components.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_79

LANGUAGE: JavaScript
CODE:
```
          url: document.location.pathname + document.location.search,
          pendingNav() {
            // Noop. URL has already updated.
          },
        });
      });
    }
    window.addEventListener("popstate", handlePopState);
    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);
  const pendingNav = routerState.pendingNav;
  useLayoutEffect(() => {
    pendingNav();
  }, [pendingNav]);

  return (
    <RouterContext
      value={{
        url: routerState.url,
        navigate,
        navigateBack,
        isPending,
        params: {},
      }}
    >
      {children}
    </RouterContext>
  );
```

----------------------------------------

TITLE: React Suspense Application with Routing and Data Fetching
DESCRIPTION: This comprehensive example illustrates a React application utilizing Suspense for managing asynchronous operations like data fetching and routing. It demonstrates how to set up a main Suspense boundary, nested Suspense for specific components (e.g., Albums), and a simple client-side router. The `data.js` file simulates network delays and data fetching, while other components (`App.js`, `ArtistPage.js`, `Albums.js`, `Biography.js`) show how to integrate `use` hook with Suspense for a smooth user experience.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/Suspense.md#_snippet_19

LANGUAGE: javascript
CODE:
```
import { Suspense, useState } from 'react';
import IndexPage from './IndexPage.js';
import ArtistPage from './ArtistPage.js';
import Layout from './Layout.js';

export default function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Router />
    </Suspense>
  );
}

function Router() {
  const [page, setPage] = useState('/');

  function navigate(url) {
    setPage(url);
  }

  let content;
  if (page === '/') {
    content = (
      <IndexPage navigate={navigate} />
    );
  } else if (page === '/the-beatles') {
    content = (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  }
  return (
    <Layout>
      {content}
    </Layout>
  );
}

function BigSpinner() {
  return <h2>🌀 Loading...</h2>;
}
```

LANGUAGE: javascript
CODE:
```
export default function Layout({ children }) {
  return (
    <div className="layout">
      <section className="header">
        Music Browser
      </section>
      <main>
        {children}
      </main>
    </div>
  );
}
```

LANGUAGE: javascript
CODE:
```
export default function IndexPage({ navigate }) {
  return (
    <button onClick={() => navigate('/the-beatles')}>
      Open The Beatles artist page
    </button>
  );
}
```

LANGUAGE: javascript
CODE:
```
import { Suspense } from 'react';
import Albums from './Albums.js';
import Biography from './Biography.js';
import Panel from './Panel.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Biography artistId={artist.id} />
      <Suspense fallback={<AlbumsGlimmer />}>
        <Panel>
          <Albums artistId={artist.id} />
        </Panel>
      </Suspense>
    </>
  );
}

function AlbumsGlimmer() {
  return (
    <div className="glimmer-panel">
      <div className="glimmer-line" />
      <div className="glimmer-line" />
      <div className="glimmer-line" />
    </div>
  );
}
```

LANGUAGE: javascript
CODE:
```
import {use} from 'react';
import { fetchData } from './data.js';

export default function Albums({ artistId }) {
  const albums = use(fetchData(`/${artistId}/albums`));
  return (
    <ul>
      {albums.map(album => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}
```

LANGUAGE: javascript
CODE:
```
import {use} from 'react';
import { fetchData } from './data.js';

export default function Biography({ artistId }) {
  const bio = use(fetchData(`/${artistId}/bio`));
  return (
    <section>
      <p className="bio">{bio}</p>
    </section>
  );
}
```

LANGUAGE: javascript
CODE:
```
export default function Panel({ children }) {
  return (
    <section className="panel">
      {children}
    </section>
  );
}
```

LANGUAGE: javascript
CODE:
```
// Note: the way you would do data fetching depends on
// the framework that you use together with Suspense.
// Normally, the caching logic would be inside a framework.

let cache = new Map();

export function fetchData(url) {
  if (!cache.has(url)) {
    cache.set(url, getData(url));
  }
  return cache.get(url);
}

async function getData(url) {
  if (url === '/the-beatles/albums') {
    return await getAlbums();
  } else if (url === '/the-beatles/bio') {
    return await getBio();
  } else {
    throw Error('Not implemented');
  }
}

async function getBio() {
  // Add a fake delay to make waiting noticeable.
  await new Promise(resolve => {
    setTimeout(resolve, 500);
  });

  return `The Beatles were an English rock band, 
    formed in Liverpool in 1960, that comprised 
    John Lennon, Paul McCartney, George Harrison 
    and Ringo Starr.`;
}

async function getAlbums() {
  // Add a fake delay to make waiting noticeable.
  await new Promise(resolve => {
    setTimeout(resolve, 3000);
  });

  return [{
    id: 13,
    title: 'Let It Be',
    year: 1970
  }, {
    id: 12,
    title: 'Abbey Road',
    year: 1969
  }, {
    id: 11,
    title: 'Yellow Submarine',
    year: 1969
  }, {
    id: 10,
    title: 'The Beatles',
    year: 1968
  }, {
    id: 9,
    title: 'Magical Mystery Tour',
    year: 1967
  }, {
    id: 8,
    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
    year: 1967
  }, {
    id: 7,
    title: 'Revolver',
    year: 1966
  }, {
    id: 6,
    title: 'Rubber Soul',
    year: 1965
  }, {
    id: 5,
    title: 'Help!',
    year: 1965
  }, {
    id: 4,
    title: 'Beatles For Sale',
    year: 1964
  }, {
    id: 3,
    title: 'A Hard Day\'s Night',
    year: 1964
  }, {
    id: 2,
    title: 'With The Beatles',
    year: 1963
  }, {
    id: 1,
    title: 'Please Please Me',
    year: 1963
  }];
}
```

LANGUAGE: css
CODE:
```
main {
  min-height: 200px;
  padding: 10px;
}

.layout {
}
```

----------------------------------------

TITLE: Server-Side Rendering React App with renderToString
DESCRIPTION: Demonstrates how to integrate `renderToString` into a server-side route handler (e.g., Express) to generate and send the initial non-interactive HTML for a React application. This HTML requires client-side hydration with `hydrateRoot`.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/server/renderToString.md#_snippet_2

LANGUAGE: js
CODE:
```
import { renderToString } from 'react-dom/server';

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const html = renderToString(<App />);
  response.send(html);
});
```

----------------------------------------

TITLE: Initialize React Router Framework Project
DESCRIPTION: This command creates a new project based on the React Router framework, which is designed to be paired with Vite for building full-stack React applications. It sets up the routing library and initial project structure, emphasizing standard Web APIs.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/creating-a-react-app.md#_snippet_1

LANGUAGE: Shell
CODE:
```
npx create-react-router@latest
```

----------------------------------------

TITLE: React Router Context and Navigation Hook
DESCRIPTION: Implements a custom React Router using `createContext`, `useState`, and `useTransition`. The `Router` component manages the application's URL state and provides a `navigate` function that leverages `startTransition` for smooth, non-blocking UI updates during navigation. This setup allows for a custom routing solution within a React application.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_127

LANGUAGE: javascript
CODE:
```
import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";

export function Router({ children }) {
  const [isPending, startTransition] = useTransition();
  const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
  function navigate(url) {
    startTransition(() => {
```

----------------------------------------

TITLE: React Router Navigation and State Management
DESCRIPTION: This JavaScript snippet implements client-side routing logic for a React application. It uses `startTransition` for non-blocking state updates, `useState` to manage router state (URL and pending navigation), `useLayoutEffect` to execute pending navigation synchronously, and `RouterContext` to provide navigation functions and current URL to child components. It also handles browser `popstate` events for back/forward navigation.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_53

LANGUAGE: javascript
CODE:
```
function handlePopState() {
      // This should not animate because restoration has to be synchronous.
      // Even though it's a transition.
      startTransition(() => {
        setRouterState({
          url: document.location.pathname + document.location.search,
          pendingNav() {
            // Noop. URL has already updated.
          },
        });
      });
    }
    window.addEventListener("popstate", handlePopState);
    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);
  const pendingNav = routerState.pendingNav;
  useLayoutEffect(() => {
    pendingNav();
  }, [pendingNav]);

  return (
    <RouterContext
      value={{
        url: routerState.url,
        navigate,
        navigateBack,
        isPending,
        params: {},
      }}
    >
      {children}
    </RouterContext>
  );
}
```

----------------------------------------

TITLE: React Router Context and Navigation Hook
DESCRIPTION: Implements a custom React Router using `createContext`, `useState`, and `useTransition`. The `Router` component manages the application's URL state and provides a `navigate` function that leverages `startTransition` for smooth, non-blocking UI updates during navigation. This setup allows for a custom routing solution within a React application.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_152

LANGUAGE: javascript
CODE:
```
import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";

export function Router({ children }) {
  const [isPending, startTransition] = useTransition();
  const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
  function navigate(url) {
    startTransition(() => {
```

----------------------------------------

TITLE: Optimized Data Fetching with Router Loaders in React
DESCRIPTION: This code illustrates an optimized approach to data fetching by utilizing a router's loader pattern. The `loader` function prefetches data in parallel with code downloading, allowing the router to fetch data immediately before the route is rendered. This significantly reduces the time users wait to see content, improving user experience.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/02/14/sunsetting-create-react-app.md#_snippet_5

LANGUAGE: js
CODE:
```
export async function loader() {
  const response = await fetch(`/api/data`);
  const data = await response.json();
  return data;
}

// ✅ Fetching data in parallel while the code is downloading
export default function Dashboard({loaderData}) {
  return (
    <div>
      {loaderData.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}
```

----------------------------------------

TITLE: Basic React App Structure Without View Transitions
DESCRIPTION: An example of a simple React application's main component (`App.js`) demonstrating basic routing logic. This version serves as a baseline, showing an application structure before any View Transition animations are implemented.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_3

LANGUAGE: javascript
CODE:
```
import TalkDetails from './Details'; import Home from './Home'; import {useRouter} from './router';

export default function App() {
  const {url} = useRouter();

  // 🚩This version doesn't include any animations yet
  return url === '/' ? <Home /> : <TalkDetails />;
}
```

----------------------------------------

TITLE: Server-Side Rendering with `renderToStaticMarkup`
DESCRIPTION: Example of integrating `renderToStaticMarkup` into a server-side application (e.g., using Express-like syntax) to send non-interactive HTML responses for a given route. This illustrates how to use the function within a typical backend framework.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/server/renderToStaticMarkup.md#_snippet_2

LANGUAGE: javascript
CODE:
```
import { renderToStaticMarkup } from 'react-dom/server';

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});
```

----------------------------------------

TITLE: Simulated API for Planet and Place Data
DESCRIPTION: A set of JavaScript functions that simulate asynchronous API calls for fetching lists of planets and places. It includes `fetchData` for routing requests, `fetchPlanets` for a list of planets, and `fetchPlaces` for places on a specific planet, complete with error handling for invalid inputs.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/lifecycle-of-reactive-effects.md#_snippet_49

LANGUAGE: javascript
CODE:
```
export function fetchData(url) {
  if (url === '/planets') {
    return fetchPlanets();
  } else if (url.startsWith('/planets/')) {
    const match = url.match(/^\/planets\/([\w-]+)\/places(\/)?$/);
    if (!match || !match[1] || !match[1].length) {
      throw Error('Expected URL like "/planets/earth/places". Received: "' + url + '".');
    }
    return fetchPlaces(match[1]);
  } else throw Error('Expected URL like "/planets" or "/planets/earth/places". Received: "' + url + '".');
}

async function fetchPlanets() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{
        id: 'earth',
        name: 'Earth'
      }, {
        id: 'venus',
        name: 'Venus'
      }, {
        id: 'mars',
        name: 'Mars'        
      }]);
    }, 1000);
  });
}

async function fetchPlaces(planetId) {
  if (typeof planetId !== 'string') {
    throw Error(
      'fetchPlaces(planetId) expects a string argument. ' +
      'Instead received: ' + planetId + '.'
    );
  }
  return new Promise(resolve => {
    setTimeout(() => {
      if (planetId === 'earth') {
        resolve([{
          id: 'laos',
          name: 'Laos'
        }, {
          id: 'spain',
          name: 'Spain'
        }, {
          id: 'vietnam',
          name: 'Vietnam'        
        }]);
      } else if (planetId === 'venus') {
        resolve([{
          id: 'aurelia',
          name: 'Aurelia'
        }, {
          id: 'diana-chasma',
          name: 'Diana Chasma'
        }, {
          id: 'kumsong-vallis',
          name: 'Kŭmsŏng Vallis'        
        }]);
      } else if (planetId === 'mars') {
        resolve([{
          id: 'aluminum-city',
          name: 'Aluminum City'
        }, {
          id: 'new-new-york',
          name: 'New New York'
        }, {
          id: 'vishniac',
          name: 'Vishniac'
        }]);
      } else throw Error('Unknown planet ID: ' + planetId);
    }, 1000);
  });
}
```

----------------------------------------

TITLE: Custom React Router Implementation
DESCRIPTION: This JavaScript code defines a custom React Router component and related hooks. It uses React's `useState`, `useTransition`, `useEffect`, and `useLayoutEffect` to manage routing state, handle navigation (forward/backward), and integrate with browser history. The `Router` component provides a context for `useRouter` and `useIsNavPending` hooks, allowing child components to access URL, navigation functions, and pending navigation status.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_222

LANGUAGE: javascript
CODE:
```
import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";

export function Router({ children }) {
  const [isPending, startTransition] = useTransition();
  const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
  function navigate(url) {
    startTransition(() => {
      // Transition type for the cause "nav forward"
      addTransitionType('nav-forward');
      go(url);
    });
  }
  function navigateBack(url) {
    startTransition(() => {
      // Transition type for the cause "nav backward"
      addTransitionType('nav-back');
      go(url);
    });
  }

  function go(url) {
    setRouterState({
      url,
      pendingNav() {
        window.history.pushState({}, "", url);
      },
    });
  }
  
  useEffect(() => {
    function handlePopState() {
      // This should not animate because restoration has to be synchronous.
      // Even though it's a transition.
      startTransition(() => {
        setRouterState({
          url: document.location.pathname + document.location.search,
          pendingNav() {
            // Noop. URL has already updated.
          },
        });
      });
    }
    window.addEventListener("popstate", handlePopState);
    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);
  const pendingNav = routerState.pendingNav;
  useLayoutEffect(() => {
    pendingNav();
  }, [pendingNav]);

  return (
    <RouterContext
      value={{
        url: routerState.url,
        navigate,
        navigateBack,
        isPending,
        params: {},
      }}
    >
      {children}
    </RouterContext>
  );
}

const RouterContext = createContext({ url: "/", params: {} });

export function useRouter() {
  return use(RouterContext);
}

export function useIsNavPending() {
  return use(RouterContext).isPending;
}
```

----------------------------------------

TITLE: Custom React Router Implementation
DESCRIPTION: This JavaScript code defines a custom React Router component and related hooks. It uses React's `useState`, `useTransition`, `useEffect`, and `useLayoutEffect` to manage routing state, handle navigation (forward/backward), and integrate with browser history. The `Router` component provides a context for `useRouter` and `useIsNavPending` hooks, allowing child components to access URL, navigation functions, and pending navigation status.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_247

LANGUAGE: javascript
CODE:
```
import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";

export function Router({ children }) {
  const [isPending, startTransition] = useTransition();
  const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
  function navigate(url) {
    startTransition(() => {
      // Transition type for the cause "nav forward"
      addTransitionType('nav-forward');
      go(url);
    });
  }
  function navigateBack(url) {
    startTransition(() => {
      // Transition type for the cause "nav backward"
      addTransitionType('nav-back');
      go(url);
    });
  }

  function go(url) {
    setRouterState({
      url,
      pendingNav() {
        window.history.pushState({}, "", url);
      },
    });
  }
  
  useEffect(() => {
    function handlePopState() {
      // This should not animate because restoration has to be synchronous.
      // Even though it's a transition.
      startTransition(() => {
        setRouterState({
          url: document.location.pathname + document.location.search,
          pendingNav() {
            // Noop. URL has already updated.
          },
        });
      });
    }
    window.addEventListener("popstate", handlePopState);
    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, []);
  const pendingNav = routerState.pendingNav;
  useLayoutEffect(() => {
    pendingNav();
  }, [pendingNav]);

  return (
    <RouterContext
      value={{
        url: routerState.url,
        navigate,
        navigateBack,
        isPending,
        params: {},
      }}
    >
      {children}
    </RouterContext>
  );
}

const RouterContext = createContext({ url: "/", params: {} });

export function useRouter() {
  return use(RouterContext);
}

export function useIsNavPending() {
  return use(RouterContext).isPending;
}
```

----------------------------------------

TITLE: React Router Component with Transition Management
DESCRIPTION: This snippet defines a basic `Router` component for a React application, demonstrating how to integrate `useTransition` for managing navigation state. The `navigate` function wraps route changes in `startTransition`, ensuring that UI updates related to navigation are treated as non-urgent, which helps maintain responsiveness during complex transitions.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_197

LANGUAGE: React
CODE:
```
import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";

export function Router({ children }) {
  const [isPending, startTransition] = useTransition();
  function navigate(url) {
    startTransition(() => {
      // Transition type for the cause "nav forward"

```

----------------------------------------

TITLE: Render React tree to static HTML stream with prerenderToNodeStream in Node.js
DESCRIPTION: Illustrates the practical application of `prerenderToNodeStream` within a Node.js backend environment, such as an Express.js route handler. This example demonstrates how to import the API, invoke it with a root React component and an array of client-side bootstrap scripts, and then pipe the resulting static HTML stream directly to the HTTP response.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/static/prerenderToNodeStream.md#_snippet_4

LANGUAGE: JavaScript
CODE:
```
import { prerenderToNodeStream } from 'react-dom/static';

// The route handler syntax depends on your backend framework
app.use('/', async (request, response) => {
  const { prelude } = await prerenderToNodeStream(<App />, {
    bootstrapScripts: ['/main.js'],
  });

  response.setHeader('Content-Type', 'text/plain');
  prelude.pipe(response);
});
```

----------------------------------------

TITLE: React `useTransition` for Visual Feedback During Navigation
DESCRIPTION: This comprehensive example demonstrates how to implement a visual indicator for ongoing React transitions using the `useTransition` hook. It includes multiple interconnected JavaScript files that simulate a simple routing mechanism, data fetching with Suspense, and a layout component that adjusts its styling based on the `isPending` state provided by `useTransition` during page navigation.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/Suspense.md#_snippet_26

LANGUAGE: javascript
CODE:
```
import { Suspense, useState, useTransition } from 'react';
import IndexPage from './IndexPage.js';
import ArtistPage from './ArtistPage.js';
import Layout from './Layout.js';

export default function App() {
  return (
    <Suspense fallback={<BigSpinner />}>
      <Router />
    </Suspense>
  );
}

function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }

  let content;
  if (page === '/') {
    content = (
      <IndexPage navigate={navigate} />
    );
  } else if (page === '/the-beatles') {
    content = (
      <ArtistPage
        artist={{
          id: 'the-beatles',
          name: 'The Beatles',
        }}
      />
    );
  }
  return (
    <Layout isPending={isPending}>
      {content}
    </Layout>
  );
}

function BigSpinner() {
  return <h2>🌀 Loading...</h2>;
}
```

LANGUAGE: javascript
CODE:
```
export default function Layout({ children, isPending }) {
  return (
    <div className="layout">
      <section className="header" style={{
        opacity: isPending ? 0.7 : 1
      }}>
        Music Browser
      </section>
      <main>
        {children}
      </main>
    </div>
  );
}
```

LANGUAGE: javascript
CODE:
```
export default function IndexPage({ navigate }) {
  return (
    <button onClick={() => navigate('/the-beatles')}>
      Open The Beatles artist page
    </button>
  );
}
```

LANGUAGE: javascript
CODE:
```
import { Suspense } from 'react';
import Albums from './Albums.js';
import Biography from './Biography.js';
import Panel from './Panel.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Biography artistId={artist.id} />
      <Suspense fallback={<AlbumsGlimmer />}>
        <Panel>
          <Albums artistId={artist.id} />
        </Panel>
      </Suspense>
    </>
  );
}

function AlbumsGlimmer() {
  return (
    <div className="glimmer-panel">
      <div className="glimmer-line" />
      <div className="glimmer-line" />
      <div className="glimmer-line" />
    </div>
  );
}
```

LANGUAGE: javascript
CODE:
```
import {use} from 'react';
import { fetchData } from './data.js';

export default function Albums({ artistId }) {
  const albums = use(fetchData(`/${artistId}/albums`));
  return (
    <ul>
      {albums.map(album => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}
```

LANGUAGE: javascript
CODE:
```
import {use} from 'react';
import { fetchData } from './data.js';

export default function Biography({ artistId }) {
  const bio = use(fetchData(`/${artistId}/bio`));
  return (
    <section>
      <p className="bio">{bio}</p>
    </section>
  );
}
```

LANGUAGE: javascript
CODE:
```
export default function Panel({ children }) {
  return (
    <section className="panel">
      {children}
    </section>
  );
}
```

LANGUAGE: javascript
CODE:
```
// Note: the way you would do data fetching depends on
// the framework that you use together with Suspense.
// Normally, the caching logic would be inside a framework.

let cache = new Map();

export function fetchData(url) {
  if (!cache.has(url)) {
    cache.set(url, getData(url));
  }
  return cache.get(url);
}

async function getData(url) {
  if (url === '/the-beatles/albums') {
    return await getAlbums();
  } else if (url === '/the-beatles/bio') {
    return await getBio();
  } else {
    throw Error('Not implemented');
  }
}

async function getBio() {
  // Add a fake delay to make waiting noticeable.
  await new Promise(resolve => {
    setTimeout(resolve, 500);
  });

  return `The Beatles were an English rock band, 
    formed in Liverpool in 1960, that comprised 
    John Lennon, Paul McCartney, George Harrison 
    and Ringo Starr.`;
}

async function getAlbums() {
  // Add a fake delay to make waiting noticeable.
  await new Promise(resolve => {
    setTimeout(resolve, 3000);
  });

  return [{
    id: 13,
    title: 'Let It Be',
    year: 1970
  }, {
    id: 12,
    title: 'Abbey Road',
    year: 1969
  }, {
    id: 11,
    title: 'Yellow Submarine',
    year: 1969
  }, {
    id: 10,
    title: 'The Beatles',
    year: 1968
  }, {
    id: 9,
    title: 'Magical Mystery Tour',
    year: 1967
  }, {
    id: 8,
    title: 'Sgt. Pepper\'s Lonely Hearts Club Band',
    year: 1967
  }, {
    id: 7,
    title: 'Revolver',
    year: 1966
  }, {
    id: 6,
    title: 'Rubber Soul',
    year: 1965
  }, {
```

----------------------------------------

TITLE: React App with ViewTransition and Router
DESCRIPTION: Initializes the main React application, integrating `unstable_ViewTransition` for default animations and a custom router to switch between Home and Details views based on the URL. This setup provides a foundational structure for applying view transitions across different routes.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_142

LANGUAGE: javascript
CODE:
```
import { unstable_ViewTransition as ViewTransition } from "react";
import Details from "./Details";
import Home from "./Home";
import { useRouter } from "./router";

export default function App() {
  const { url } = useRouter();

  // Default slow-fade animation.
  return (
    <ViewTransition default="slow-fade">
      {url === "/" ? <Home /> : <Details />}
    </ViewTransition>
  );
}
```

----------------------------------------

TITLE: React Application Entry Point and Router Setup
DESCRIPTION: This JavaScript file serves as the main entry point for a React application. It uses `createRoot` from `react-dom/client` to render the `App` component wrapped within a `StrictMode` and a custom `Router` component, ensuring strict development checks and client-side routing.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_207

LANGUAGE: javascript
CODE:
```
import React, {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import './styles.css';
import './animations.css';

import App from './App';
import {Router} from './router';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <Router>
      <App />
    </Router>
  </StrictMode>
);
```

----------------------------------------

TITLE: Server-Side Rendering with Dynamic Asset Paths (Initial)
DESCRIPTION: Illustrates a basic Node.js server setup using Express to render a React `App` component. It demonstrates how to pass a pre-defined `assetMap` to the `prerenderToNodeStream` function, enabling the server to render HTML with the correct dynamic asset URLs.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/static/prerenderToNodeStream.md#_snippet_9

LANGUAGE: js
CODE:
```
// You'd need to get this JSON from your build tooling, e.g. read it from the build output.
const assetMap = {
  'styles.css': '/styles.123456.css',
  'main.js': '/main.123456.js'
};

app.use('/', async (request, response) => {
  const { prelude } = await prerenderToNodeStream(<App />, {
    bootstrapScripts: [assetMap['/main.js']]
  });

  response.setHeader('Content-Type', 'text/html');
  prelude.pipe(response);
});
```

----------------------------------------

TITLE: React Application Entry Point
DESCRIPTION: Initializes the React application by creating a root element using `createRoot` from `react-dom/client` and rendering the main `App` component wrapped in `StrictMode` and a `Router`. This sets up the client-side rendering for the React.dev website, enabling modern React features and routing.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_116

LANGUAGE: javascript
CODE:
```
import React, {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import './styles.css';
import './animations.css';

import App from './App';
import {Router} from './router';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <Router>
      <App />
    </Router>
  </StrictMode>
);
```

----------------------------------------

TITLE: React component for rendering flattened hierarchical data
DESCRIPTION: This React component, `TravelPlan`, demonstrates how to render a hierarchical data structure that has been flattened. It utilizes `useState` to manage the travel plan and recursively renders `PlaceTree` components. The `PlaceTree` component takes an ID and a map of all places (`placesById`) to display the current place's title and its children based on `childIds`.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/choosing-the-state-structure.md#_snippet_17

LANGUAGE: javascript
CODE:
```
import { useState } from 'react';
import { initialTravelPlan } from './places.js';

function PlaceTree({ id, placesById }) {
  const place = placesById[id];
  const childIds = place.childIds;
  return (
    <li>
      {place.title}
      {childIds.length > 0 && (
        <ol>
          {childIds.map(childId => (
            <PlaceTree
              key={childId}
              id={childId}
              placesById={placesById}
            />
          ))}
        </ol>
      )}
    </li>
  );
}

export default function TravelPlan() {
  const [plan, setPlan] = useState(initialTravelPlan);
  const root = plan[0];
  const planetIds = root.childIds;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planetIds.map(id => (
          <PlaceTree
            key={id}
            id={id}
            placesById={plan}
          />
        ))}
      </ol>
    </>
  );
}
```

----------------------------------------

TITLE: Root Application with ViewTransition Component
DESCRIPTION: This JavaScript snippet shows the main application component (`App.js`) integrating the `ViewTransition` component. It demonstrates how to wrap the main application content with `<ViewTransition>` and apply a default animation class, ensuring view transitions are active across different routes.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md#_snippet_95

LANGUAGE: javascript
CODE:
```
import { unstable_ViewTransition as ViewTransition } from "react";
import Details from "./Details";
import Home from "./Home";
import { useRouter } from "./router";

export default function App() {
  const { url } = useRouter();

  // Keeping our default slow-fade.
  return (
    <ViewTransition default="slow-fade">
      {url === "/" ? <Home /> : <Details />}
    </ViewTransition>
  );
}
```

----------------------------------------

TITLE: Node.js Express API Endpoints for Notes and Authors
DESCRIPTION: These JavaScript code snippets define simple Express.js API routes for fetching note and author data from a database. These endpoints serve as the backend for the client-side `fetch` calls demonstrated in traditional React applications.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/rsc/server-components.md#_snippet_3

LANGUAGE: javascript
CODE:
```
// api
import db from './database';

app.get(`/api/notes/:id`, async (req, res) => {
  const note = await db.notes.get(id);
  res.send({note});
});

app.get(`/api/authors/:id`, async (req, res) => {
  const author = await db.authors.get(id);
  res.send({author});
});
```

----------------------------------------

TITLE: React: Batched State Updates with Mixed Values and Updaters
DESCRIPTION: Demonstrates how React processes multiple `setNumber` calls within a single event handler. It shows the interaction between direct value updates and updater functions when batched.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/queueing-a-series-of-state-updates.md#_snippet_6

LANGUAGE: js
CODE:
```
<button onClick={() => {
  setNumber(number + 5);
  setNumber(n => n + 1);
  setNumber(42);
}}>
```

----------------------------------------

TITLE: Implement basic router navigation with useTransition
DESCRIPTION: This snippet demonstrates a basic React router component that uses the `useTransition` hook to wrap state updates for page navigation. Wrapping `setPage` with `startTransition` ensures that the navigation is non-blocking and interruptible, improving user experience by allowing the UI to remain responsive during data fetching or heavy renders.

SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react/useTransition.md#_snippet_27

LANGUAGE: javascript
CODE:
```
function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }
  // ...
```

========================
QUESTIONS AND ANSWERS
========================
TOPIC: 
Q: How can React be used to implement an entire subroute of an existing website?
A: To implement an entire subroute with React, it's recommended to build the React part using a React-based framework. The framework's configuration should specify the subroute as the base path, and the server or proxy must be configured to handle requests for that subroute with the React application.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/add-react-to-an-existing-project.md#_qa_2

----------------------------------------

TOPIC: Build a React app from Scratch
Q: What common application functionalities are not typically included by default when starting a React app with a build tool like Vite, Parcel, or Rsbuild?
A: When starting a React app with build tools like Vite, Parcel, or Rsbuild, common functionalities such as routing, data fetching, and styling solutions are not included by default. These tools primarily provide a client-only, single-page application (SPA) setup, requiring developers to integrate additional libraries or tools from the React ecosystem for these patterns.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/build-a-react-app-from-scratch.md#_qa_5

----------------------------------------

TOPIC: Build a React app from Scratch
Q: What are the main tradeoffs or disadvantages of building a React application from scratch?
A: Building a React application from scratch often means creating an ad-hoc framework, requiring developers to implement features like server-side rendering, static site generation, or React Server Components themselves. This approach can also lead to performance issues, make it harder to get support due to unique implementations of features like routing and data-fetching, and may not benefit from future React features that require framework-level integration.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/build-a-react-app-from-scratch.md#_qa_1

----------------------------------------

TOPIC: Creating a React App
Q: What is Next.js's App Router in the context of React development and how can it be deployed?
A: Next.js's App Router is a React framework that fully leverages React's architecture to enable full-stack React applications. It can be deployed to any hosting provider supporting Node.js or Docker containers, or to a user's own server, and also supports static export without a server.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/creating-a-react-app.md#_qa_2

----------------------------------------

TOPIC: 
Q: What is the purpose of the provided list of locations for ReactJS and React Native?
A: The provided list serves as a directory to help individuals locate and join various ReactJS and React Native community meetups across different cities and countries.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/community/meetups.md#_qa_3

----------------------------------------

TOPIC: 
Q: What are the main categories of `react-dom/server` APIs based on their environment support?
A: The `react-dom/server` APIs are categorized into those supporting Node.js Streams, those supporting Web Streams (like in browsers, Deno, and modern edge runtimes), and legacy APIs for non-streaming environments.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/server/index.md#_qa_3

----------------------------------------

TOPIC: 
Q: How can interested individuals learn more about React Server Components and provide feedback?
A: Individuals can learn more about React Server Components by watching the introductory talk and demo, or by cloning the demo to experiment with them. Feedback can be provided by reading the RFC document or by replying to the @reactjs Twitter handle.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md#_qa_2

----------------------------------------

TOPIC: Render and Commit
Q: What is the overall process React follows to display components on screen?
A: React's process for displaying UI involves three distinct steps: triggering a render, rendering the component, and finally committing the changes to the Document Object Model (DOM). This sequence ensures that components are prepared and then made visible to the user.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/render-and-commit.md#_qa_0

----------------------------------------

TOPIC: How declarative UI compares to imperative
Q: What analogy helps explain the imperative UI programming paradigm?
A: The imperative UI programming paradigm is illustrated by the analogy of a passenger giving turn-by-turn directions to a car driver. The driver (representing the computer) simply follows these precise commands without knowing the overall destination, requiring detailed instructions for every UI change.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/learn/reacting-to-input-with-state.md#_qa_1

----------------------------------------

TOPIC: 
Q: What is a key limitation of the legacy `react-dom/server` APIs compared to their streaming counterparts?
A: The legacy `react-dom/server` APIs, such as `renderToString` and `renderToStaticMarkup`, offer limited functionality. They are less capable than the modern streaming APIs like `renderToPipeableStream` and `renderToReadableStream`.


SOURCE: https://github.com/reactjs/react.dev/blob/main/src/content/reference/react-dom/server/index.md#_qa_4