Skip to content
Using React Suspense
JavaScript TypeScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
.prettierrc
README.md
package.json
tsconfig.json
yarn.lock

README.md

react-suspense

What it means to you as a product developer.


Disclaimer: This is not production ready.

React Concurrent is currently experimental (you need to install react@experimental to enable it), and the API may changes.

The goal of this talk is to give you sneek peek to the next big release of React.


Key Takeaways for Product Developer

  • new convention for data fetching
  • potential UI improvements
  • it is faster

Prerequisite: ErrorBoundary and Suspense component

  • ErrorBoundary is a class that extends React.Component that implements componentDidCatch method. It is used to catch any error in the rendering of the subtree.

  • Suspense is to allow you to create a boundary for loading of your components that are loaded with dynamic import wrapped with React.lazy.


New Convention for Data Fetching

current approach: fetch "on mount"

  • fetch data when componentDidMount or useEffect
  • use state to track if data is loaded successfully

suspense approach: create a resource and read it

  • a resource is a cache that returns a data when it is ready, else it will tell React when it is not ready.
  • when writing component that use the data, we don't need to worry about whether the data is ready. Just treat is as ready.
  • Suspense will be used to handle the loading state while ErrorBoundary will be used to handle error state.

Potential UI Improvement

  • React Concurrent mode allows us to have the following interaction when you click a link/ button to reveal new content:

    1. the button/link will respond according to your click, e.g. a little loading indicator. In the meantime, the data fetching will be started.
    2. the new page/section will only be revealed only when the data fetching completed. So your user no longer needs to see the empty big loading spinner again.
    3. In the case where the data fetching is ready slow, we will show the empty big loading spinner after some delay.

    In short, we have 3 states: responsive, busy, final.

  • In addition, another UI improvements that React Concurrent allows is to make sure dynamic data always load in a certain order. This avoid the content jump while more data is coming in, a common problem in many sites today.

  • However, achieving those improvements need additional works as developer. You may not want to spend the effort on those, just know that React allows you to do them when you want to.


Blazing Faster 🔥🔥🔥

  • It will be faster (for whatever reason).
  • In addition of React.memo, React.useMemo, now we have React.useDeferredValue.

Recap

  • new convention for data fetching
  • potential UI improvements
  • it is faster
You can’t perform that action at this time.