React18の並行レンダリングとは何か理解する
Yug (やぐ)まずこれ
Yug (やぐ)へぇ、それは知らなかった
Reactはバージョン16のリリース以来ここ数年大きな機能追加を行いませんでした。一つ前のメジャーバージョンである17では「新機能なし」とされています。
Yug (やぐ)へぇ
これまでのReactにおいて、一度始まったレンダリングは必ず最後まで行われてから次のレンダリングに移行していました。一度始まったレンダリングを中断することはできず、またそのレンダリングが完了するまで別のレンダリングを始めることはできません。
React 18ではレンダリングの実行中に別のレンダリングを始めたり、レンダリングを途中で停止して破棄することができるようになりました。
でもそれって並行かどうかという話ではなく、単に処理を中断できるかどうかという話では？
Yug (やぐ)ただし、最終的なレンダリング結果が状態(state)に正しく対応していることは保証されています。
これはソースコード読んでて確かに見つけた。ここだと思う。
雑に言うと「並行レンダリングが既にされておらず終了している場合はfinishする」という処理が書かれている
Yug (やぐ)ん、さっきの疑問に関してだけど、公式もこう言ってるなぁ...
A key property of Concurrent React is that rendering is interruptible.
React の並行処理機能の重要な特性は、処理を中断可能であるということです。
うーん、並行関係あるか？中断の話って
Yug (やぐ)ほー、この<Offscreen>ってやつ面白そうだな
もう 1 つの例は、state の再利用です。React の並行処理機能により、画面から UI の一部分をいったん削除し、前回の state を再利用しながら後で戻す、ということが可能です。例えば、ユーザがタブを切り替えて画面から離れて戻ってきた場合、React は以前の画面を以前と同様の state で復帰させる必要があります。将来のマイナーリリースにおいて、このパターンを実装した <Offscreen> というコンポーネントを新たに加える予定です。同様に、<Offscreen> を使ってバックグラウンドで新しい UI を用意し、ユーザが表示させようとする前に準備完了にしておく、ということもできるようになるでしょう。