Split a rarely used React route with lazy and Suspense

A large editor that few visitors open can load separately from the initial application code. React's lazy waits until the component is first rendered to request its module. A nearby Suspense boundary can display a useful loading state.

import { lazy, Suspense } from "react";

const AdminEditor = lazy(() => import("./AdminEditor"));

function EditorRoute() {
  return (
    <Suspense fallback={<p role="status">Loading editor...</p>}>
      <AdminEditor />
    </Suspense>
  );
}

Declare the lazy component at module scope. The imported module needs the component as its default export for this form. React's lazy reference documents module loading, while the Suspense reference explains when the fallback appears.

Initial route bundle separate from a deferred editor chunk.

Inspect the built application

A source-code split is only useful if the build preserves it. Inspect the production bundle and the browser's network panel. Open a common public route first and check whether the editor code was requested. Navigate to the editor and observe the additional chunk request.

Use network throttling to make loading visible. Keep the fallback inside the page layout where the editor will appear, so the navigation and page identity remain available. A blank screen gives the user little indication that the route is responding.

Splitting changes when bytes download; it does not automatically reduce the total bytes needed by someone who uses the editor. Shared dependencies may remain in the initial bundle or become separate shared chunks. Measure the actual output before making a performance claim.

Provide a failed-load path

Suspense handles waiting for the lazy module. A rejected import needs an Error Boundary around the relevant area. Test that boundary by blocking the chunk request in a local production preview. Its message should explain that the editor could not load and offer a practical recovery action.

A reload can help after a deployment removes an older hashed chunk that a still-open page expects. It can also discard unsaved work elsewhere on the page, so explain that consequence before using reload as a universal retry button. Browser caching and deployment retention policies affect this failure mode.

Code splitting supplies no authorization. Anyone who receives a frontend bundle can inspect it, and an editor route still needs server-enforced access checks for every protected operation.

This example is a component excerpt reviewed against current React documentation. Route libraries and server frameworks can supply their own loading boundaries and preloading behavior. Use those integration points when they already manage route modules, and verify the resulting bundle before adding another layer of lazy loading.