はじめに
ReactのCanaryチャンネルやExperimentalチャンネルではUIの楽観的更新を行うuseOptimisticが提供されています。
この記事ではuseOptimisticがどのように利用できるかについて解説します。
楽観的更新とは
楽観的更新とはUIのパフォーマンス向上のための試作の一つです。
あるイベントが起きてからUIに反映するまでに、ネットワーク通信などが挟まると反映までの時間が長くユーザーのストレスになります。楽観的更新ではあるイベントが起きたら、ネットワーク通信などの時間がかかる処理をバックグラウンドで実行させて、UIにイベントが成功したとして直ちに反映させます。
例えば、楽観的更新を行うと、ユーザーが「いいね」ボタンをクリックしたとき、アプリケーションはサーバーにリクエストを送信し、そのレスポンスを待つ代わりに、直ちにユーザーインターフェースを更新して「いいね」の数を増やします。
このアプローチを行う場合は、更新後にネットワーク通信などで失敗したときのハンドリングが重要となることに注意してください(ロールバックしたり...)。
useOptimistic
useOptimisticはReactの状態を楽観的に更新させるために利用されるhooksです。
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
楽観的更新を行う状態を第1引数に、更新を行う術を記述する関数を第2引数に渡します。返り値は配列です。１つ目は楽観的な更新が行われた状態、2つ目は楽観的な更新を行うための関数です。
第2引数の関数は第1引数に更新時の状態、第2引数に楽観的更新のための材料が渡されます。関数の中にはどのように更新するかを記述します。
そして、addOptimisticは第2引数を元に、楽観的更新の引き金を引きます。
実際にuseOptimisticを使って上記のように更新できます。
Userというオブジェクトのnameを大文字にしたり小文字にしたりしますが、それぞれ変更に１秒かかります。useOptimisticを利用することで、１秒待つ前に、大文字になるとして楽観的に更新されたUserオブジェクトを扱えるようになりました。