Using React Suspense
What it means to you as a product developer.
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.
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
.
Suspense
will be used to handle the loading state while ErrorBoundary
will be used to handle error state.React Concurrent mode allows us to have the following interaction when you click a link/ button to reveal new content:
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.
React.memo
, React.useMemo
, now we have React.useDeferredValue
.