React Concurrent: Fast and Responsive Web Apps

Photo by Lautaro Andreani on Unsplash

As we all probably know, React is one of the most popular and widely used front-end frameworks for creating interactive and dynamic user interfaces in the world of web development. However, until the release of React 18, React did not have first-class concurrency support.

But what is concurrency and why should React support it? In this article, we will define this concept, understand how it was previously handled in React, and then dive a bit deeper into how React 18 introduces concurrency that allows performing multiple computations at the same time, resulting in faster, more responsive, and smoother user experiences. We’ll go over the specifics of React concurrent and the new rendering algorithm, as well as how it enables developers to manage asynchronous data fetching and rendering.

What is Concurrency?

Concurrency is a concept that refers to a computer system’s ability to perform multiple computations at the same time, or in parallel. In other words, rather than being executed sequentially, different parts of a program can be executed independently and at the same moment. Concurrency is typically achieved by using multi-core processors or distributed computing architectures, in which multiple processing units can work on different parts of a task or problem.