Code-splitting creates a better UX and better ROI by reducing bounce rates of your customers. It's also the right thing to do: your users likely do not have unlimited data (particularly on mobile) and definitely do not have unlimited time.
At this stage, we're loading images on the client-side without handling loading states. The only webpack chunks in the network tab of Chrome DevTools are the ones that come by default with create-react-app. The experience is jumpy and slow for the user.
We haven't done anything to lazyload yet...
The user doesn't want to see everything all at once! In this step we implemented buttons that only show one course at a time.
Unfortunately, even though it appears that the components aren't loading until the user clicks the button to get their next course, the same bundles are still loading at the same time!
Now our app is split into multiple smaller chunks based on our desired courses. We don't make the network call for those assets until the user requests it.
Note that this is actually, in many ways, a worse user experience for an app this small. Good thing this is just for practice!
Next steps could include server-side rendering the initial view for faster initial loads or search engine optimization. One could also preload data using React.lazy(). We would also be wise to include error handling in case our (albeit fake) fetch.
The React team has repeatedly stated that, although code-splitting is the only current use case for React.Suspense, they are working on expanding it to handle data fetching and integrating it with libraries like Apollo.
- there are important bug fixes in 16.6.3, so make sure you're on that version of React
- Lazy only works with default imports
- Doesn’t work for server-side rendering yet, use react-loadable for now
- Only use lazy-loading for bigger chunks of code, otherwise it could actually slow down your application
- Regarding Suspense as a whole, it’s only ready for code splitting right now. The cache and whatnot is super fun, but don’t use it yet, or Dan will be sad
- Moving To React Suspense - Jared Palmer - React Conf 2018
- React 16.6 - What's New? Theory + Practice
- Use React.lazy and Suspense to Code-Split Your App by Harry Wolff
- Suspense!
- Concurrent Rendering in React - Andrew Clark and Brian Vaughn - React Conf 2018
- Learn React lazy, memo, useState and useEffect in 7 minutes
- Lazy loading (and preloading) components in React 16.6 by Rodrigo Pombo
- Fast as never before. Code-splitting with React Suspense, lazy + Router + Redux + Webpack 4
- How to retry when React lazy fails by Guilherme Oenning
- Dramatically Speed Up Your React Front-End App Using Lazy Loading by Luke Jones
- How to use React.lazy and Suspense for components lazy loading
- Our very own Sung Kim's Loading React Components Dynamically on Demand Using React.lazy
- Add a touch of Suspense to your web app with React.lazy()
- How to use React suspense and React.lazy
- Rhys Lloyd for the background plate
- photographers for the images (see alt text and source links for details)
- the React core team and all the people who have created educational tools for us to learn these tools
- ReactNYC and you!