Code Splitting & Lazy Loading

Q: What is code splitting in React and why is it useful?

Code splitting means breaking your app's JavaScript into smaller separate files instead of one huge file. The browser only downloads the small piece it needs for the current page, making the first page load much faster, especially for large apps with many different sections.

Q: How do React.lazy and Suspense work together to load a component only when it is needed?

React.lazy takes a function that dynamically imports a component, and returns a special component that only actually loads that code the first time it is rendered. Suspense wraps around it and shows a fallback, like a loading spinner, while the code is still being downloaded in the background.

Q: How would you code split routes in a React app using React Router?

Each page in a router setup can be wrapped in React.lazy, so that visiting the home page does not force the browser to also download the code for the about page or the contact page. This is one of the most common and effective places to add code splitting in a real app.

Q: How would you preload a lazy loaded component before the user actually navigates to it?

You can call the same dynamic import function used inside React.lazy ahead of time, such as when the user hovers over a link, so the code is already downloaded and ready by the time they click. This makes navigation feel instant instead of showing a loading spinner.

Q: What happens if a lazy loaded component is not wrapped inside a Suspense component?

React needs a Suspense boundary somewhere above a lazy loaded component to know what to show while that component's code is still downloading. If there is no Suspense wrapper anywhere in the parent tree, React will throw an error when it tries to render the lazy component.

5 questions found

What is code splitting in React and why is it useful?

Beginner

Code splitting means breaking your app's JavaScript into smaller separate files instead of one huge file. The browser only downloads the small piece it needs for the current page, making the first page load much faster, especially for large apps with many different sections.

// Instead of importing everything upfront
import Dashboard from './Dashboard';

// Split it into its own file, loaded only when needed
const Dashboard = React.lazy(() => import('./Dashboard'));

Real-world example A large e commerce site splits its checkout page into its own chunk, so a visitor just browsing products never has to download the checkout code until they actually decide to buy something.

Common follow-ups: How much smaller does an app's initial load usually get after adding code splitting?;What tool shows you how big each split chunk actually is?

Build Tools & Bundlers (Vite Webpack & CRA);Suspense & Concurrent Rendering

How do React.lazy and Suspense work together to load a component only when it is needed?

Intermediate

React.lazy takes a function that dynamically imports a component, and returns a special component that only actually loads that code the first time it is rendered. Suspense wraps around it and shows a fallback, like a loading spinner, while the code is still being downloaded in the background.

const Settings = React.lazy(() => import('./Settings'));

function App() {
  return (
    <Suspense fallback={<div>Loading settings</div>}>
      <Settings />
    </Suspense>
  );
}

Real-world example A dashboard shows a small loading spinner for less than a second while the rarely used reports section loads in the background the first time a user clicks on it.

Common follow-ups: What happens if the lazy loaded component fails to download because of a network problem?;Can you use React.lazy for something other than a whole page component?

Suspense & Concurrent Rendering;Error Boundaries

How would you code split routes in a React app using React Router?

Intermediate

Each page in a router setup can be wrapped in React.lazy, so that visiting the home page does not force the browser to also download the code for the about page or the contact page. This is one of the most common and effective places to add code splitting in a real app.

const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

function AppRoutes() {
  return (
    <Suspense fallback={<p>Loading page</p>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

Real-world example A company website with ten different pages splits each page into its own file, so a first time visitor loading the home page only downloads the code for that one page, not all ten.

Common follow-ups: Should every single route always be code split, even very small pages?;How does this affect how fast a user can navigate between two already visited pages?

Routing;Suspense & Concurrent Rendering

How would you preload a lazy loaded component before the user actually navigates to it?

Advanced

You can call the same dynamic import function used inside React.lazy ahead of time, such as when the user hovers over a link, so the code is already downloaded and ready by the time they click. This makes navigation feel instant instead of showing a loading spinner.

const loadDashboard = () => import('./Dashboard');
const Dashboard = React.lazy(loadDashboard);

function NavLink() {
  return (
    <a href="/dashboard" onMouseEnter={loadDashboard}>
      Dashboard
    </a>
  );
}

Real-world example A news website preloads the code for an article page as soon as a reader hovers their mouse over the headline, so clicking the link feels instant instead of showing a brief loading delay.

Common follow-ups: What is the tradeoff of preloading too many pages ahead of time?;How would you preload a page based on the user's likely next action rather than just hovering?

Performance (memo/useMemo);Suspense & Concurrent Rendering

What happens if a lazy loaded component is not wrapped inside a Suspense component?

Beginner

React needs a Suspense boundary somewhere above a lazy loaded component to know what to show while that component's code is still downloading. If there is no Suspense wrapper anywhere in the parent tree, React will throw an error when it tries to render the lazy component.

// This will cause an error because there is no Suspense boundary
const Profile = React.lazy(() => import('./Profile'));

function App() {
  return <Profile />; // missing Suspense wrapper
}

Real-world example A developer forgets to add a Suspense wrapper around a newly lazy loaded settings page, and the app crashes with a clear error message reminding them exactly what is missing.

Common follow-ups: Can one Suspense component wrap multiple lazy loaded components at once?;What fallback content usually works best for a real production app?

Suspense & Concurrent Rendering;Error Boundaries