Lazy Loading in React
Lazy loading means that when our website or application opens, at that point instead of loading every page and component that is in that website to load right then and there, only the main content or the things that will show first after loading starts their loading process so that the user is not shown the loading skeleton for a long time waiting for the whole website to load.
In this we load the main UI first, and as the user clicks on different links or buttons, those pages or components start their loading then instead of at the start. If everything starts loading at the same time in the start, there is also a risk of the application crashing, which is not a risk worth taking as a developer.
This increases the performance of our application and overall provides better usage for the user.
Get Maheen’s stories in your inbox
Join Medium for free to get updates from this writer.
Syntax:
React gives us a method called lazy that we store in a variable before the component is called in the root file. This lazy takes only one parameter called load which is a callback function that returns a promise.
Before using lazy, we have to decide which component we have to apply lazy loading to because this load function will work only when you want to render that component. Like this:
const AboutPage = lazy(() => import(‘./About.jsx’));
In the import, you give the path of that lazy component, and then where that component is called to be rendered, you call the name of the variable where lazy is stored. While the lazy code is loading, use `<Suspense>` to show a loader.
Wrap the lazy component’s calling part in your code with Suspense, and in it call the loader component in which you have put any type of loader skeleton you want, which are easily available in different libraries.
