UIのブロッキングを止めよう:Reactにおける中断可能なレンダリング

Reactのレンダリングによって、ユーザーインターフェースがフリーズしてしまうことがあります。

重い計算処理がメインスレッドをブロックすると、ユーザーの画面が固まってしまいます。これはユーザー体験を損なう原因となります。

中断可能なレンダリング(Interruptible rendering)は、この問題を解決します。これにより、Reactはユーザーの入力を処理するために、作業を一時停止できるようになります。

仕組み:

これを管理するには、トランジション(transitions)を使用します。useTransition を使って、緊急性の低い更新をマークしてください。これにより、ReactはUIの応答性を維持できるようになります。

重いデータ処理によって、アプリのパフォーマンスを低下させるのはもうやめましょう。

Source: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb