React Concurrent Rendering

言葉の整理

Concurrent = 並行

別々のタスクを細切れにしてまとめて処理していくこと

Parallel = 並列

別々のタスクを同時進行で処理すること

https://scrapbox.io/files/60d55f790d5cef001cfca6b8.webp

Concurrent Rendering ではレンダリングタスクを細切れにしてちょっとずつ実行する事が出来る。

途中で別のタスクを割り込ませることも出来る

code:jsx

<Container>

<Header>

</Header>

<Main>

</Main>

<Footer>

</Footer>

</Container>

上のような JSX があったときに

今までは Container -> Header -> Main -> Footer と全部一気に同期的にレンダリングしていた。(Blocking Rendering と呼ぶ)

小さい規模ではそこまで問題にならないが、コンポーネントの数が多く(1,000 ~ 10,000単位に) なるとレンダリングで画面がカタつくようになる

Concurrent Rendering になると、個々のコンポーネントのレンダリングを別タスクに分けて、非同期的に実行出来るようになる。

大量のコンポーネントがあっても画面がカタつかず、ユーザーにストレスを与えない UI が作れる

Concurrent Rendering のデモ

同期 / デバウンス / 並行

Concurrent Rendering はいつから使える?

=> React 18

最近 React 18 の Alpha 版がリリースされた

Automatic Batching

複数のステート更新による再レンダリングを勝手にまとめてくれる

今までも unstable_batchedUpdates という隠し API で出来たがそれが自動的に出来るようなった

(使う側で特に変わる事はない)

startTransition

優先度の低いステート更新を startTransition(() => { ... }) の中で行うことで、優先度の高いレンダリングを優先してくれる

(デフォルトの setState は優先度高になる)

TODO: useTransition

Adopting Concurrent Mode

Concurrent Mode を今すぐ試す方法

npm install react@experimental react-dom@experimental

@experimental をつけると Concurrent mode が入った React がインストールされる

Facebook 社内のプロダクトではすでこのバージョンを本番で使っている (ただし、全てのプロダクトではない)

Glossary

Blocking Rendering

今の React のレンダリング方法

Interruptible Rendering = Concurrent Rendering

中断可能なレンダリング、Concurrent Mode のレンダリング、レンダリングを途中で止める事ができる

Suspense

Suspense for Data Fetching

Time Slicing

TODO: useEffect が StrictMode で多重化される話をもう少し調べる

TODO: suspense for data fetching

TODO:

TODO: 次は AST

TODO: その次は WebAssembly

---

Notes

Suspense の進捗状況

リリースが近い

もうすぐ Alpha バージョンとして出てくる予定 (18.0.0-alpha?)

https://gyazo.com/2b08ca064dff10608cbaa802eea24891

Introducing Concurrent Mode

1度レンダリングが始まるとレンダリングを止める方法がない (Blocking Rendering)

Concurrent Rendering に移行するとレンダリングを途中で止める事ができる (Interruptible Rendering)

レンダリングを止めて、より重要度が高い処理をまず実行することで、画面が固まるのを防ぐ事が出来る

React の基本的な使い方は今までと同じ、props / state が更新されると view が更新される。

更新のステップが自動的に非同期的 (Concurrent) になって滑らかになる。