UIのブロッキングを止めよう:Reactにおける中断可能なレンダリング
Reactのレンダリングによって、ユーザーインターフェースがフリーズしてしまうことがあります。
重い計算処理がメインスレッドをブロックすると、ユーザーの画面が固まってしまいます。これはユーザー体験を損なう原因となります。
中断可能なレンダリング(Interruptible rendering)は、この問題を解決します。これにより、Reactはユーザーの入力を処理するために、作業を一時停止できるようになります。
仕組み:
- Reactは作業を小さなチャンクに分割します。
- クリックやタイピングなどの優先度の高いタスクがないかを確認します。
- ユーザーが操作を行った場合、Reactはバックグラウンドタスクを一時停止します。
- Reactはまず入力を処理します。
- その後、Reactはバックグラウンドタスクを再開します。
これを管理するには、トランジション(transitions)を使用します。useTransition を使って、緊急性の低い更新をマークしてください。これにより、ReactはUIの応答性を維持できるようになります。
重いデータ処理によって、アプリのパフォーマンスを低下させるのはもうやめましょう。
Source: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb