Implementing Lazy Loading with React 18+

Have you heard of Lazy Loading? Starting from React 16, you can easily implement it in all of your projects. Let’s see how.

Understanding Lazy Loading. Why?

You may have heard of Lazy Loading before in reference to images. This technique ensures that images are only downloaded when they need to be shown to the user.

This concept can also be applied to components in React 16+ without requiring any extra modules or libraries. Lazily loading a component means that data regarding that piece of the app will not be downloaded until it’s time to mount it onto the UI.

This is especially useful for larger React apps with multiple pages, routing, and bigger scopes, such as an admin portal that doesn’t need to be downloaded if the user isn’t an admin.

This will improve loading times and, consequently, user experience.

Using React.Suspense and React.lazy

The React component Suspense ensures that a placeholder is displayed until ALL the children have finished loading. It can be thought of as the async/await of components.

For more information, refer to the official documentation.