UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【React】Concurrent Modeについて

まだ安定版には入っていないReactのConcurrent Mode についてお話を聞く機会がありそうなので、事前準備として下のドキュメントを読んだまとめ

ja.reactjs.org

Concurrent Modeとは?

React アプリケーションをレスポンシブに保ち、デバイスの能力やネットワークの速度にうまく適応できるようにするための新機能群

この機能がない現状の問題について、バージョンコントロールを例にあげて説明している

バージョンコントロールが存在するより前は、ブランチという概念はありませんでした。
何かのファイルを編集したいと思ったら、作業が終わるまでそのファイルに触れないよう全員に伝える必要がありました。 その人と同時には作業を始めることすらできませんでした。文字通りブロックされていたのです。

現在のReactはバージョンコントロールが存在する前と同じで、新しい DOM ノード作成やコンポーネント内部のコードの実行も含む更新のレンダーを一度始めたら中断することはできない

これを中断できるようにする機能がConcurrent Modeとのこと

ちなみに、レンダーを一度始めたら中断することができないことを“ブロッキングレンダリング (blocking rendering)”と呼ぶ

使い所

中断できることにのよって、例えば以下の2つの問題点を解消する

  1. 商品検索のサジェスト機能 入力フォームに入力した文字列で検索して商品リストをサジェストする場合に、1文字1文字検索しに行っていてはアクセス数が増えてしまうため、ユーザがタイピングを止めた後に初めてリストの更新(デバウンス)や、入力をスロットル (throttle) して更新が一定以上の頻度で起きないようにするがどちらもユーザ体験がよろしくない

  2. 画面遷移 「十分な」コードやデータがまだロードされていないにもかかわらず画面遷移した場合、空のスクリーンや大きなスピナーを表示してユーザーを待たせて不快なユーザ体験になってしまう恐れがある

まとめ

自社サービスにサジェスト機能があり、まさに入力をスロットルして遅延させていてるので、そこのユーザー体験はもろに向上しそう

他にもいろいろ使えそうなので注目したい