Get Ready For Concurrent Rendering In React

React has seen a lot of changes lately and with evolving terminology and certain buzzwords, there can be a lot of confusion with what’s to come. In this write-up, I hope to clarify some of the understanding around Concurrent Rendering, and also give you some tips on how to get ready for the upcoming changes to React.

What is Concurrent Rendering?

“Concurrent Mode lets React apps be more responsive by rendering component trees without blocking the main thread.” — Dan Abramov

Basically, Concurrent Rendering is an umbrella term for the rewrite to the React architecture that allows React to run in a more performant way without blocking the main UI thread. By enabling Concurrent Mode in our apps, React starts using the new architecture so we can gain access to user experience and performance benefits right away.

If you’re looking to take Concurrent Rendering even further, the API is slowly being released, which allows us to have even more control over the new architecture. This will give our applications a smoother user experience and give us more control over the priorities that the browser is working on. The image below illustrates some of the proposed API:

Async Mode VS Concurrent Mode

“You might have previously heard Concurrent Mode being referred to as “Async Mode”. We’ve changed the name to Concurrent Mode to highlight React’s ability to perform work on different priority levels. This sets it apart from other approaches to Async Rendering.” — React team

Initially, when the React team started demoing and talking about these future additions, they used the term Async Mode. This caused a bit of confusion in the community and was misleading. I was also confused.

They’re the same thing.

After the React Team realized the term Async Mode was causing a lot of confusion, they started gravitating towards using the name Concurrent Mode, since Async Mode didn’t quite fit.

How do we try it?

Concurrent Mode is available for testing on 16.7.0-alpha.0. It’s a limited API, that will be evolving over time. This alpha is just for testing purposes, and it’s not recommended to replace your current codebase just yet.

We can enable Concurrent Mode by using .createRoot instead of .render in our applications initialization. This will automatically opt us into Concurrent Mode.

Alternatively, we can wrap our application with the <ConcurrentMode> wrapper.

When should we have our apps ready for it?

The React team recently released the following roadmap. This gives us an idea of when we should expect Concurrent Mode but these timelines could change.

Version Release Schedule:

• React 16.6 with Suspense for Code Splitting (already shipped)
• A minor 16.x release with React Hooks (~Q1 2019)
• A minor 16.x release with Concurrent Mode (~Q2 2019)
• A minor 16.x release with Suspense for Data Fetching (~ mid-2019)

** Update Nov 2020 : Although React didn’t hit their release schedule with concurrent mode, they released React 17 which will get us further ready for concurrent mode in the near future.

How do we get ready?

Use StrictMode

StrictMode was enabled in React 16.3. It is enabled when you wrap your component with <StrictMode></StrictMode> and is a tool for highlighting potential problems in our applications. When enabled, React compiles a list of all class components using the unsafe lifecycles, and logs a warning message with information about these components. This makes it easy to address the identified issues, which will make it easier to take advantage of Concurrent Rendering in the future. You can read more about the advantages of StrictMode here.

Upgrade old lifecycle methods

The following lifecycle methods will be deprecated in future versions of React and can be problematic with Concurrent Rendering.

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

Most of the use cases for the old lifecycle methods can be rewritten with the two new lifecycle methods:

• getSnapshotBeforeUpdate
• getDerivedStateFromProps

For more information on how to upgrade old lifecycle methods, click here.

The following is a chart from the React blog that gives a great visual of how the new React lifecycle methods fit in.

Conclusion

As a recap, enabling StrictMode and updating old lifecycle methods is a way to make it easier for us to take advantage of Concurrent Rendering in the near future. React plans to implement these changes into a release tentatively before the summer of this year. Concurrent Rendering will allow our applications to be more performant by unblocking the main UI thread of the browser, equating to smoother user experiences. In the future, we will also have access to the individual APIs of Concurrent Mode that will allow us to fine-tune our experience with things like prioritizing events, different roots for loading our app, ability to cache and warm data, and the ability to lazy load content that is off the screen with the hidden prop.

This is a summary of my presentation from the December 2018 Halifax ReactJS Meetup. The information laid out in this post is based on my knowledge and research at the time of the presentation. If you read something you don’t agree with or have something you want to add, be sure to let me know in the comments below. I’d love to hear from you. Technology and React change fast so your input helps us all stay up-to-date.