Ever noticed a web page that seems to take forever to load, especially on a slower connection?
That sluggishness often comes from loading all the code for every component right when the app starts.
But what if you could load only what you need, when you need it? That’s where React lazy loading comes in!
Lazy loading is a powerful technique to significantly improve your application’s initial load time and overall performance.
It essentially lets you split your application’s code into smaller bundles, only loading them on demand.
The Problem: Large Bundles
React apps, especially large ones, can result in a massive single JavaScript bundle. When a user first visits your site, their browser has to download, parse, and execute this entire bundle before they see anything, leading to a poor Time to Interactive score.
The Solution: React.lazy and Suspense
React provides two built-in tools for easy code-splitting and lazy loading:
React.lazy(): This function makes it easy to render a dynamic import as a regular component. It takes a function that must call a dynamicimport()to load the component.const MyLazyComponent = React.lazy(() => import('./MyComponent'));<Suspense>: Since the lazy component might take a moment to load, you need a way to show the user that something is happening. The<Suspense>component is what handles this suspense! It wraps your lazy components and allows you to display a fallback UI—like a spinner or a loading message—while the component’s code is being loaded.import React, { lazy, Suspense } from 'react'; // ... define MyLazyComponent as above function App() { return ( <div> <h1>Welcome!</h1> <Suspense fallback={<div>Loading...</div>}> <MyLazyComponent /> </Suspense> </div> ); }
Practical Applications
So, where should you use lazy loading? It’s typically most effective for:
- Routes/Pages: This is the most common use case. If a user is on the homepage, they don’t need the code for the admin dashboard or the checkout page yet. Using lazy loading on your routes (often with a router like React Router) is the best way to leverage performance gains.
- Large, Infrequently Used Components: Think of a complex modal, a huge chart, or an editor that’s only accessed by a small number of users or only after a button click.
By intelligently splitting your bundles, you deliver a much snappier, more enjoyable experience to your users. Go ahead, give your app a performance boost with lazy loading! ✨
Useful links below:
Let me & my team build you a money making website/blog for your business https://bit.ly/tnrwebsite_service
Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2
Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff
Buy me a coffee 
https://buymeacoffee.com/tyronneratcliff
