⚡ ReactJS – 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.

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.

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