React Suspense & Concurrent Mode: Async Rendering

Last 12 of June, some of Apiumhub’s frontend developers had the chance to attend React Next 2019 in Tel Aviv, Israel. It was an incredible experience, with lots of interesting talks that encouraged us to keep investigating different concepts. There was one talk in particular that especially caught my attention: Liad Yosef’s ‘Modern React – The Essentials’. Liad went through all the big React novelties, like hooks, portals and async rendering. We already had a first look at this last concept in Dan Abramov’s demo he did during JSConf Iceland 2018, where he used two practical examples of Suspense & Concurrent Mode (in the video, Time Slicing).

The goal of both features is to provide a better user experience to anyone using apps built with React. It’s important to understand that the majority of problems that end users suffer can be grouped into two categories: connection speed (or server response) and computational power.

React Suspense

(available from React 16.6.0 onwards)

Oriented towards solving the problems related to the first group, Suspense allows us to stop a component’s rendering and show another one in its place as a fallback, like the Loading component, a placeholder or any other component that we might need.

This means stopping the rendering while the data or dependency loading is happening asynchronously. You’ll probably have some Loading flag saved with Redux. Suspense will allow you to replace it.

To use this functionality we’ll need two things: React.lazy() y <React.Suspense>.

React.lazy allows a dynamic import to render as a normal component. It receives a function that dynamically calls an import. This returns a Promise that, once resolved, will become a React component.

 const LazyComponent = React.lazy(() => import("./some-component"));

In our example, to be able to show something while LazyComponent is loading we must wrap it inside Suspense, like this:

 const LazyComponent = React.lazy(() => import("./some-component"));
 function ParentComponent() {
    return (
        <React.Suspense fallback={<div>Loading...</div>}>
            <div>
                <LazyComponent />
            </div>
        </React.Suspense>
    );
}

This allows us to have a fallback. The fallback property receives any React component.

With Suspense, React can pause the state update at any time until all necessary data petitions in a children component are fulfilled. During this wait, React can manage other updates with bigger priorities. This helps improve the user experience, since the UI doesn’t “freeze”.

React Concurrent Mode

(not available yet, but according to the roadmap it’ll be introduced sometime during 2019)

Devised to improve the user experience in those situations when the render is too intense and takes a toll on the user’s device, Concurrent Mode allows React to stop a component’s (or tree of components) render if it’s too slow or heavy, process other, more relevant events, and then return to render the problematic part. In other words, it allows the rendering of the tree of components without blocking the main thread.

Even though this is something we’d like to have available, we’ll have to wait until we can use it in our projects. The fact that its reflected on the API that as of today this is unstable is very telling:

<React.unstable_ConcurrentMode>
    <SomeComponent />
</React.unstable_ConcurrentMode>

Mientras estamos a la espera de poder probar más a fondo esta feature, no se dWhile we wait until we can finally explore this feature, let’s not forget the other recently introduced big React novelty, the Hooks, about which we’ve already talked about in a recent article.