React.lazy

Improve the performance of your React app with React.lazy and Suspense.

In this post I will go over a real world example from my work at Wix where I was able to trim my bundle size by about 80% using Webpack Analyzer and React Lazy/Suspense.

What is lazy loading, and why should you do it?

As your React app grows, so does your bundle size. Splitting your bundle can help you lazy-load only the things the user absolutely needs. This can reduce the code needed for an initial load, delaying other loading of components or modules until the user asks for it.

In a previous post, I wrote briefly about how the IntersectionObserver API could be used for things such as analytics and dynamic module loading but I didn’t fully provide any concrete examples. In this post, I would like to practically show how one can achieve the above with this rather new API.

Let’s understand what this means and also get introduced to some of the new features coming to React, some of which have been released as part of the latest stable release and some of them are still in unstable mode and it’s quite possible that the implementation of the api might change over time.

Let’s take a look at how you can leverage this feature in your application in order to improve performance and build a better experience for users.

React 16.6 has been released and it's now easier than ever to do code split within our React applications by using lazy and Suspense. After a few days monitoring a production application that is using lazy, I noticed a couple of client-side errors when downloading asynchronous modules. Learn how to mitigate this.

React 16.6 brought code-splitting to a new level. You can now load your components when it’s really needed without installing additional libraries.

In this video we'll look at the smallest Suspense example I can think of :D It is part 1 of a 4 part series I'm doing on Suspense.

In this video we'll show how to use Suspense along with @reach/router and React.lazy to code-split and lazy-load each route/page of our application, showing a fallback component while it's loading.

This was something I bumped into yesterday and thought I'd share how I test it.

Modern React with Every React Update Since v16 Demystified (includes advanced hooks)