React Suspense & Concurrent Mode: Async Rendering
Tags: events, javascript, react
Published: 2020-01-24 10:55:30

---
title: React Suspense & Concurrent Mode: Async Rendering
published: true
tags: Events, Javascript, React
canonical_url: https://apiumhub.com/tech-blog-barcelona/react-suspense-concurrent-mode-async-rendering/
---

Last 12 of June, some of [Apiumhub’s frontend developers](https://apiumhub.com) 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](https://twitter.com/liadyosef)’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](https://twitter.com/dan_abramov)’s demo he did during [JSConf Iceland 2018](https://www.youtube.com/watch?v=nLF0n9SACd4), 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](https://apiumhub.com/tech-blog-barcelona/react-next-react-hooks/).

The post [React Suspense & Concurrent Mode: Async Rendering](https://apiumhub.com/tech-blog-barcelona/react-suspense-concurrent-mode-async-rendering/) appeared first on [Apiumhub](https://apiumhub.com).