Skip to content

a code- and side-splitting demo of React Suspense and lazy for ReactNYC

Notifications You must be signed in to change notification settings

veekas/thanksgiving-dinner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Thanksgiving Dinner

A React Suspense and lazy() demo

Why bother

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.

Walkthrough

1. initial commit

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.

step 1 chunks

2. add some loading spinners

We haven't done anything to lazyload yet...

3. break this up into "courses" for the user

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!

step 3 chunks

4. implement React Suspense and React.lazy 👏🏾

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.

step 4 chunks

Note that this is actually, in many ways, a worse user experience for an app this small. Good thing this is just for practice!

5. Next steps for this app

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.

6. Next steps for Suspense

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.

Tips

  • 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

More resources

Official stuff

Tools

Videos

Articles

Thanks

  • 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!

About

a code- and side-splitting demo of React Suspense and lazy for ReactNYC

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published