What is Lazy Loading in React?

Q: What is lazy loading in React?

Lazy loading in React is the practice of deferring the loading of components until they are needed, improving performance by reducing initial bundle size.

Q: How is lazy loading implemented in React?

It is implemented using React.lazy() for dynamic imports and Suspense for fallback rendering while the component is loading.

💡 Concept Name

Lazy Loading in React – A technique to defer loading of non-critical components until they're needed to improve initial load time.

📘 Quick Intro

Lazy loading is implemented in React using React.lazy() and <Suspense>. Instead of loading all components during the initial render, React loads them on-demand, reducing the app's bundle size and speeding up performance.

🧠 Analogy / Short Story

Think of a restaurant buffet with many dishes. Instead of preparing every dish before guests arrive (which takes time), the chef prepares only the dishes requested. This saves effort and reduces waste.

Similarly, lazy loading means React doesn’t prepare (load) every component up front. It loads them only when requested (navigated to or used), speeding up the initial app render and making it more efficient.

🔧 Technical Explanation

🧱 React uses React.lazy(() => import('./Component')) to defer loading a component.
⏳ <Suspense fallback={...}> is used to show a loading UI while the lazy-loaded component is fetched.
📦 It reduces initial bundle size and improves load performance.
🔌 Works well with code splitting and dynamic imports.
⚠️ Only works for default exports, not named exports.

💻 Real Code Example


// LazyComponent.js
import React from 'react';
export default function LazyComponent() {
  return <div>I'm loaded lazily!</div>;
}

// App.js
import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

❓ Interview Q&A

Q1: What is lazy loading in React?
A: It defers the loading of components until they are required, reducing initial bundle size.

Q2: How is lazy loading implemented in React?
A: Using React.lazy() for dynamic import and <Suspense> for fallback UI.

Q3: Why is lazy loading beneficial?
A: It improves page load time and app performance.

Q4: What must a lazily loaded component export?
A: A default export.

Q5: Can you use multiple Suspense boundaries?
A: Yes, to isolate loading states for different parts of the UI.

Q6: What happens without a fallback in Suspense?
A: Nothing renders; it’s required to provide loading feedback.

Q7: Does lazy loading work with server-side rendering (SSR)?
A: Not natively. You’ll need tools like Loadable Components.

Q8: Can you combine lazy loading with routing?
A: Yes, often used with route-based code splitting.

Q9: Is lazy loading limited to components?
A: Primarily used for components, but similar concepts apply to assets.

Q10: What are limitations of lazy loading?
A: It only works with default exports and may introduce slight delays in component rendering.

📝 MCQs

Q1. Which method is used to implement lazy loading in React?

React.defer()
React.lazy()
React.wait()
React.suspend()

Q2. What component must wrap a lazy-loaded component?

StrictMode
Provider
Suspense
Fragment

Q3. What is shown while a component is being lazy-loaded?

Nothing
Error message
Loading UI
Fallback UI

Q4. What kind of export must a lazy-loaded component use?

Named export
Both
Default export
Dynamic export

Q5. Which of these improves initial load performance?

Inline styles
Eager loading
Lazy loading
All components in one file

Q6. Can lazy loading be combined with React Router?

No
Only with Redux
Yes
Only in functional components

Q7. What happens if you don’t wrap lazy component with Suspense?

It works fine
Only logs warning
App may crash or not render properly
Automatically fallback to div

Q8. Which import syntax is used with lazy loading?

require()
import * as
Static import
Dynamic import()

Q9. What tag provides a loading placeholder?

loader
fallback
spinner
placeholder

Q10. Does React.lazy support named exports?

Yes
No
Only with HOC
Only if memoized

💡 Bonus Insight

You can optimize performance further by combining lazy loading with route-based code splitting. Tools like Vite and Webpack help bundle code efficiently to take full advantage of React's lazy loading.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon