Concurrent Mode in React

Concurrency means executing multiple tasks at the same time but not necessarily simultaneously. In the context of React.js, concurrency refers to having more than one task in progress at once without blocking the main thread, and concurrent tasks can overlap depending on which is more urgent. This is a stark contrast to the traditional, synchronous rendering model where React would block the main thread until it finished rendering the component tree.

For example, while you’re writing, you’re also preparing vegetables to eat. When the time comes to add ingredients to the vegetables, that will be more urgent, so you’ll pause writing and attend to that and come back to continue writing when you’re done. At different points throughout the writing and cooking processes, your focus will be on what is more urgent.

React could only handle one task at a time in the past, and a task could not be interrupted once it had started. This approach is referred to as Blocking Rendering. To fix this problem, Concurrent Mode was introduced which makes rendering interruptible.

It is a game changer. Concurrent rendering is all about creating a fluid user experience. It allows React to interrupt an ongoing rendering process to handle more urgent tasks. This way, even if your app is in middle of a large rendering task, it can still respond immediately to user interactions. So, it’s a new way of rendering that helps your app stay responsive under heavy load and gives you more control over how updates get scheduled.

Concurrent Features in React :

1. Automatic batching

   Batching is when React groups multiple state updates into a single re-render for better performance. In React 17 and prior, were batched update only the state updates defined inside React event handlers. But updates inside of promises, setTimeout, native events handlers, or any other event were not batched in React by default.

2. Server Sider Rendering

   Server-side rendering is a technique that allows us to generate HTML from React components on the server and then send a fully rendered HTML page to client. After the HTML is rendered in the browser, the React and JavaScript code for the entire app starts loading. When it is done, It adds interactivity to static HTML generated on the server—a process known as hydration. In the previous versions of React, hydration could only begin after the entire data had been fetched from the server and rendered to HTML. Additionally, couldn’t interact with the page until hydration was complete for the whole page.

   To solve this problem, the only supported use case was lazy-loading code on the client. How the <Suspense> component works with the lazy loading components is when using the Suspense component, you must provide a fallback option. It accepts any React components or even a string to render while the lazy component is loading. Suspense is no longer limited to lazy components, React 18 added support for Suspense on the server. React 18 offers two major features for SSR unlocked by Suspense:

   1. Streaming Server Rendering : React 18 introduces new server rendering APIs that allow you to stream HTML from the server to the client. This means Streaming HTML is just sending lightweight static HTML. It’s replaced by heavier components that depend, without waiting for the entire response.

   2. Selective hydration : Selective hydration mechanisms decide which components need to be loaded first. React detects events started by the user’s interaction with the component and hydrate certain components first. If you have multiple Suspense, React will attempt to hydrate all of them but it will start with Suspense found earlier in the tree first.

This blog is very brief overview over the Concurrent behaviour of React, only to get an idea of the Topic. To know in more detail please go to the referenced Concurrent Mode in React: A Detailed Explanation blog from Vivasoft.