An introduction to Concurrent Mode in React

Photo by Abraham Barrera on Unsplash

Recently, react shared a blog stating that it is establishing pre-release channels so that the developers can try the experimental features.

One such feature is Concurrent Mode.

The purpose to develop Concurrent mode is to make the User Interaction better with the website. To shed more light on Concurrent mode, let’s see the two types of rendering.

Blocking Rendering

UI libraries like React and others use Blocking Rendering. That means, if a component is rendering , it cannot be interrupted.

Interrupted Rendering

In this kind of rendering, the render and the updates are interruptible. Concurrent mode uses this type of rendering to make the UI interactions better.

Use cases of Concurrent Mode

  • While moving from screen A to screen B . When there is a small duration data fetch for screen B, we can keep the user on screen A, instead of showing him the big spinner or the empty screen.
  • When the two sub components A and B are loading on the screen, one after another. Even if A is taking much time to render, we can make the component B render first and then continue with the render of component A.

This feature is currently in the experimental release. It seems like a good to have and will solve some good UI concerns. Let’s wait and see when it get pushed to the stable version.

Meanwhile, you can also check the latest feature Hooks in the stable version of React.

Hope you like this post. Please share and comment.

Stay tuned for updates. 🙂

2 thoughts on “An introduction to Concurrent Mode in React”

Leave a Reply

Your email address will not be published. Required fields are marked *