all-or-nothing

A synchronous render is an “all-or-nothing” operation, where it’s guaranteed that a component that starts rendering will always finish. Depending on the complexity of the components, the render phase could take a while to complete. The main thread is blocked during this time, meaning that users trying to interact with the application experience an unresponsive UI until React has completed the render and committed the result to the DOM.

---

同期レンダリングは「オール・オア・ナッシング」操作で、レンダリングを開始したコンポーネントは必ず終了することが保証されている。コンポーネントの複雑さによっては、レンダリングフェーズの完了に時間がかかることがある。この間、メインスレッドはブロックされるため、Reactがレンダリングを完了し、結果をDOMにコミットするまで、アプリケーションを操作しようとするユーザーは無反応のUIを体験することになる。

https://scrapbox.io/files/64d197879094f3001b667665.png

Additionally, the concurrent renderer is able to “concurrently” render multiple versions of the component tree in the background without immediately committing the result.

Whereas a synchronous render is an all-or-nothing computation, the concurrent renderer allows React to pause and resume the rendering of one or multiple component trees to achieve the most optimal user experience.

---

さらに、コンカレント・レンダラーは、結果をすぐにコミットすることなく、バックグラウンドで複数のバージョンのコンポーネント・ツリーを「コンカレント」にレンダリングすることができる。

同期レンダリングがオール・オア・ナッシングの計算であるのに対し、同時実行レンダラーでは、Reactが1つまたは複数のコンポーネントツリーのレンダリングを一時停止したり再開したりして、最適なユーザー体験を実現できる。