Lazy Loading in React
Lazy loading defers the loading of code until the moment it is needed. In React, this means you ship only the UI required for the first paint, then load heavier components on demand.
Why use it
It keeps the initial bundle smaller, improves time to interactive, and protects the main thread from heavy work before the user asks for it.
Implementation Syntax
const MyComponent = React.lazy(() =>import("./MyComponent"));
Key advantages
Efficiency
Efficient resource usage
Loads code only when needed, which keeps bandwidth and memory in check.
Speed
Faster initial load
Reduces the initial JavaScript bundle size and speeds up first paint.
Content adapted from GeeksforGeeks.