1. HOME
  2. ブログ
  3. IT技術
  4. React18で追加されたhooksとその使い方
React18で追加されたhooksとその使い方

React18で追加されたhooksとその使い方

useId

今回は、2022年3月安定版リリースのReact 18で追加された新Hooksの紹介をしていきます!

useIdはhtmlのID生成をサポートするhookです。ハイドレーション時の不整合を防ぎ、サーバーとクライアント間で一意のIDを生成できます。

使い方

useIdを呼び出すコンポーネントごとに一意のIDが提供されます。
必要なIDが1つであればそのまま使用してOKですし、複数のIDが必要な場合は任意の接尾辞をつけます。

【注意】
1. keyに使うものではありません。公式ドキュメントでも注意されてますが、map使用時などのkey等に使うものではありません🙅‍♀️
2. 自動生成されるIDに任意のプレフィックスを付与可能です。hydrateRootReactDOMServerの設定を追加することで、ID自体に任意のプレフィックスをつけることが可能です。

生成されたHTML

SingleSampleとしたコンポーネントには:r5:、MultipleSampleとしたコンポーネントには:rb:という文字列が出力されていることが分かります💡

useTransition

更新処理に緊急度を付与できるhookです。
緊急度の低い処理をマークすることで、緊急度の高い処理を優先できるようになります。

使用例

useTransitionは、対象処理の実行状態を表す状態値(boolean)と、トランザクションを開始するための関数(TransitionStartFunction)を返します。
緊急度が低い処理をstartTransition(トランザクションを開始するための関数)内に置きます。

useDeferredValue

useTransitionと同じで、緊急度に関わるhookで、緊急度が低い値に使用します。
緊急性の高い更新と、useDeferredValue値の更新が重なった場合、useDeferredValueの値の更新が遅延されます。
デバウンス (debounce) やスロットル (throttle)との違いとしては、指定した固定時間の遅延をするのではなく、緊急性の高い更新が終わるタイミングまで遅延をするということです。

使用例

useSyncExternalStore

これはライブラリ製作者向けのhookです。
React18で並行処理/並行レンダリング機能が追加された結果、従来は更新のレンダーは中断不可同期的にレンダーされたのに対し、開始一時停止再開or破棄が可能になりました。
そういった並行レンダリング機能との互換性を保ちながら、外部データソースから読み出しやデータの購読を行うために推奨されているhookです。

使用例

useSyncExternalStoreは3つの引数を受け取ります。第1はsubscribe(ストア変更時に実行されるコールバック関数)、第2はgetSnapshot(ストアの現在値を返す関数)、第3はgetServerSnapshot(SSR時にスナップショットを返す関数※任意※)です。
また、後方互換性保持と、getSnapshotの自動的なメモ化をサポートするパッケージとして、use-sync-external-storeが公開されています。

useInsertionEffect

こちらもライブラリ製作者、特に css-in-js ライブラリの作者向けのhookです。
DOM 更新の前に同期的に呼び出されるため、他のhook(useLayoutEffect含む)が動く前にDOMにスタイルを注入することができます。

css-in-jsライブラリとして有名なemotionでは、React18の安定版がリリースされる前からuseInsertionEffectの適用を準備していたようです👀
useLayoutEffectを使用していた箇所をuseInsertionEffectに置き換えたりしてますね。

使用例

使い方はuseEffect, useLayoutEffectと同様です。
第二引数に依存する値を配列で指定することができ、クリーンアップする関数をリターンすることもできます。

最後に

React18で追加されたhooksの紹介でした!
なかなか使う機会のないhookもあったかとは思いますが、必要な時に思い出せるよう、頭の片隅にでも置いておきましょう💫

書いた人はこんな人

岡坂(エンジニア)
岡坂(エンジニア)
Webエンジニア。
好きなものはフルーツタルト。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア