---
# System prepended metadata

title: Concurrent Mode

---

# Concurrent Mode

Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.
-- React https://reactjs.org/docs/concurrent-mode-intro.html

This is an experimental flag on React, but Facebook admits to running them in production. The concurrent mode allows us to wait for asynchronous data. Since our code is not ready for Concurrent Mode, we’ve decided to opt in to use Blocking Mode, which is the first migration step from Legacy React, enabling us to have a subset of Concurrent Mode features, including Suspense with Data Fetching.


# Suspense

Suspense for Data Fetching is a new feature that lets you also use <Suspense> to declaratively “wait” for anything else, including data. This page focuses on the data fetching use case, but it can also wait for images, scripts, or other asynchronous work.
-- React https://reactjs.org/docs/concurrent-mode-suspense.html

Suspense is a data fetching mechanism that lets your components “wait” for something before they can render. This changes React’s semantics from “render then fetch” to “render while fetching”

Suspense is added to the top level of our Application ( `_app`.) The way that it works is it requires a fallback component (a spinner or skeleton) where it can default if the data is still being fetched. This pattern is mainly for components that need to fetch data on the client (no SSR/SSG.)

GraphQL/Apollo is our data layer ( https://github.com/lfades/next-with-apollo - rajington fork )

In our case, we are fetching data from (contentful) on the server, allowing us to query it via key/value pairs.

This way we don’t have to …  


#Error Boundary

React v16 introduced the concept of “error boundaries”. This component provides a simple and reusable wrapper that you can use to wrap around your components. Any rendering errors in your components hierarchy can then be gracefully handled.
-- Github, https://github.com/bvaughn/react-error-boundary 

React-error-boundary takes in a fallback component, in our case, it’s the ErrorPage. By placing it in our top-level component `_app`, we are guaranteeing that all unhandled errors in components will be caught by this boundary.
