Back to React HubPractice ReactInterview React

Nearby lessons

43 of 44
React - Redux ToolkitReact - React.memoReact - Suspense & Lazy LoadingReact - Deployment

⚡ ReactJS – Lazy Loading

📌 What is Lazy Loading?

What is Lazy Loading in React?

Lazy loading is a design pattern used to optimize web and mobile apps. The idea is simple: load critical components first and delay the loading of non-essential components until they are actually needed.

This saves bandwidth and computing resources, making your app faster and more efficient.

📌 Why Lazy Loading?

  • Improves performance by reducing initial load time
  • Saves bandwidth by loading resources only when needed
  • Makes large applications faster and more efficient
  • Optimizes user experience on slower networks (e.g., 3G)

⚙️ How to Use Lazy Loading in React?

React provides two main features for implementing code-splitting and lazy loading:

  • React.lazy() – lets you render a dynamic import as a normal component.
  • React.Suspense – displays fallback UI while a lazy component is loading.

🧮 Example – Lazy Loading Components

React Playground
import React, { lazy, Suspense } from 'react'
// import Component1 from './components/Component1'
// import Component2 from './components/Component2'

const Component1 = lazy(() => import('./components/Component1'))
const Component2 = lazy(() => import('./components/Component2'))

const App = () => {
  return (
    <div>
      <h1>Lazy Loading Demo</h1>
      <Suspense fallback={<h1>Loading... comp-1</h1>}>
        <Component1/>
      </Suspense>
      <Suspense fallback={<h1>Loading... comp-2</h1>}>
        <Component2/>
      </Suspense>
    </div>
  )
}

export default App
Open on CodeSandboxOpen Sandbox

🔍 Test Lazy Loading

To see lazy loading in action:

  1. Right click → Inspect → Network tab
  2. Set throttling to 3G
  3. Refresh the page and observe that components load only when required

🧠 Test Your Knowledge

4 Questions

Progress: 0 / 4
Keep Going!React - Deployment