When I saw the term "Concurrent render" or "Concurrent features" in React 18, it confused me. Because I know the browser handle tasks on a single main thread. How react render concurrently on a single thread ?

Does react use event loop and task queue internally ?

CodePudding user response：

Yes, React uses the event loop and task queue internally to handle concurrent rendering. In React, concurrent rendering means rendering multiple components and updates simultaneously, rather than rendering and updating them one at a time in a sequential manner. This allows React to split rendering work into multiple independent tasks and use multiple CPU cores to perform them in parallel, improving the overall performance of the application.

However, it's important to note that concurrent rendering in React is not the same as multithreading, as JavaScript is a single-threaded language and the browser only has one main thread to execute JavaScript code. Instead, React uses techniques such as time slicing, suspense, and the virtual DOM to enable concurrent rendering and improve the performance of the application.

CodePudding user response：

TLDR: Yes.

Let me try to explain it in a different way. Imagine that you are playing with a bunch of toys, and each toy is a part of the React program. With concurrent mode, React can play with many toys at the same time, without getting confused or mixing them up. This makes the program more efficient and helps it to work better. For example, if you were playing with a doll and a puzzle at the same time, concurrent mode would help React keep track of both toys and make sure they are working together properly.

So basically, concurrent mode is like a traffic controller at a busy airport. The traffic controller helps planes take off and land safely, without crashing into each other. In the same way, concurrent mode helps React manage different parts of the program and make sure they are working together without conflicts.

I hope this would make sense.