Lazy loading and Suspense in React—Interview guide

What is Lazy Loading?

Lazy loading loads components only when needed, not all at once, improving initial load time.

The Problem It Solves:

1. Without lazy loading, your entire app loads at once = SLOW initial page load With lazy loading,

2. With lazy loading, only what's needed = FAST initial page load

Without Lazy Loading:

1. User opens website

2. Browser downloads: Home + About + Dashboard + Analytics (5MB)

3. Wait... wait... wait...

4. Finally see Home page

// ALL components load immediately when app starts
import Home from './Home';      // Loads NOW
import About from './About';    // Loads NOW
import Dashboard from './Dashboard'; // Loads NOW (even if user never visits)
import Analytics from './Analytics'; // Loads NOW (heavy component - 2MB)

// Bundle size = 5MB (everything loads at start)
// User waits for ENTIRE 5MB before seeing anything

With Lazy loading:

1. User opens website

2. Browser downloads: Just Home (1MB)

3. Quickly see Home page!

✅ 4. User clicks "About"

5. NOW About component downloads (0.5MB)

6. User never clicks Analytics = never downloads (saved 2MB!)

// Components load ONLY when route is visited
const Home = lazy(() => import('./Home'));      // Loads when "/" is visited
const About = lazy(() => import('./About'));    // Loads when "/about" is clicked
const Dashboard = lazy(() => import('./Dashboard')); // Loads when "/dashboard" is clicked
const Analytics = lazy(() => import('./Analytics')); // Never loads if user doesn't visit

// Initial bundle = 1MB (just core app)
// User sees app quickly!

The Key Point:

Interview Answer: "Lazy loading in React Router means each route's component is downloaded only when that route is visited for the first time (See one big bundle.js (5MB)), not when the application initially loads. This creates separate JavaScript bundles that load on-demand (See multiple chunks: home.chunk.js, about.chunk.js loading separately when needed)."

Quick Test to Verify:

Open browser DevTools → Network tab:

• Without lazy: See one big bundle.js (5MB)

• With lazy: See multiple chunks: home.chunk.js, about.chunk.js loading separately when needed

What is Suspense?

Suspense is a React component that shows fallback UI while waiting for something to load.

The Problem:

// Without Suspense - what shows while component is loading? NOTHING! Blank screen!
const About = lazy(() => import('./About'));

function App() {
  return <About />; // ❌ Error! React doesn't know what to show while loading
}

How Suspense Works:

<Suspense fallback={<LoadingSpinner />}>
  {/* Everything inside here can be "suspended" */}
  <LazyComponent />
</Suspense>

// Think of it like try-catch for loading:
// TRY to render LazyComponent
// CATCH the loading state
// SHOW fallback until ready

Real-World Example - Different Loading States:

const Header = lazy(() => import('./Header'));
const MainContent = lazy(() => import('./MainContent'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      {/* Header loads with simple text */}
      <Suspense fallback={<div>Loading header...</div>}>
        <Header />
      </Suspense>

      <div className="layout">
        {/* Sidebar with skeleton */}
        <Suspense fallback={<SidebarSkeleton />}>
          <Sidebar />
        </Suspense>

        {/* Main content with spinner */}
        <Suspense fallback={<Spinner />}>
          <MainContent />
        </Suspense>
      </div>
    </div>
  );
}

Suspense shows fallback when:

1. First time lazy component loads

2. Component is "suspended" (loading)

3. Child components are fetching data (future React)

Suspense does NOT show fallback when:

1. Component already loaded (cached)

2. Regular components (non-lazy)

3. State updates

Interview Q&A:

Q: "What is Suspense?" A: "A React component that displays fallback UI while its children are loading"

Q: "Is Suspense only for lazy loading?" A: "Currently mainly for lazy loading, but React is expanding it for data fetching"

Q: "Can you have multiple Suspense?" A: "Yes, you can nest Suspense components for different loading states"

Q: "What happens without fallback?" A: "React will throw an error - fallback prop is required"

Thank you!

Note: This note is for personal use and the writing and materials are taken from GPT or Online courses.