React18で追加されたhooksとその使い方
2022.07.04
useId
今回は、2022年3月安定版リリースのReact 18で追加された新Hooksの紹介をしていきます！
useIdはhtmlのID生成をサポートするhookです。ハイドレーション時の不整合を防ぎ、サーバーとクライアント間で一意のIDを生成できます。
使い方
useIdを呼び出すコンポーネントごとに一意のIDが提供されます。
必要なIDが1つであればそのまま使用してOKですし、複数のIDが必要な場合は任意の接尾辞をつけます。
【注意】
1. keyに使うものではありません。公式ドキュメントでも注意されてますが、map使用時などのkey等に使うものではありません🙅♀️
2. 自動生成されるIDに任意のプレフィックスを付与可能です。hydrateRoot、ReactDOMServerの設定を追加することで、ID自体に任意のプレフィックスをつけることが可能です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | import { useId } from 'react' const SingleSample = () => { const id = useId() return ( <> <input id={id} type="checkbox" name="confirm" /> <label htmlFor={id}>Are you sure?</label> </> ) } const MultipleSample = () => { const id = useId() return ( <> <div> <input id={id + 'strawberry'} type="radio" name="fruit" /> <label htmlFor={id + 'strawberry'}>strawberry</label> </div> <div> <input id={id + 'banana'} type="radio" name="fruit" /> <label htmlFor={id + 'banana'}>banana</label> </div> <div> <input id={id + 'kiwi'} type="radio" name="fruit" /> <label htmlFor={id + 'kiwi'}>kiwi</label> </div> </> ) } |
生成されたHTML
SingleSampleとしたコンポーネントには:r5:、MultipleSampleとしたコンポーネントには:rb:という文字列が出力されていることが分かります💡
useTransition
更新処理に緊急度を付与できるhookです。
緊急度の低い処理をマークすることで、緊急度の高い処理を優先できるようになります。
使用例
useTransitionは、対象処理の実行状態を表す状態値(boolean)と、トランザクションを開始するための関数(TransitionStartFunction)を返します。
緊急度が低い処理をstartTransition（トランザクションを開始するための関数）内に置きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | import { useEffect, useState, useTransition } from 'react' export const Sample = () => { const [value, setValue] = useState<string>('') const [list, setList] = useState<string[]>([]) const [isPending, startTransition] = useTransition() // リスト更新処理の緊急度を下げる const updateList = (values: string[]) => { startTransition(() => { setList(values) }) } // ... return ( <> <input value={value} onChange={(e) => setValue(e.target.value)} /> {isPending && <p>Pending...</p>} <div> {list.map((item, index) => ( <span key={`item-${index}`}>{item}</span> ))} </div> </> ) } |
useDeferredValue
useTransitionと同じで、緊急度に関わるhookで、緊急度が低い値に使用します。
緊急性の高い更新と、useDeferredValue値の更新が重なった場合、useDeferredValueの値の更新が遅延されます。
デバウンス (debounce) やスロットル (throttle)との違いとしては、指定した固定時間の遅延をするのではなく、緊急性の高い更新が終わるタイミングまで遅延をするということです。
使用例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { useDeferredValue, useEffect, useState } from 'react' export const Sample = () => { const [value, setValue] = useState<string>('') const [list, setList] = useState<string[]>([]) const deferredList = useDeferredValue(list) // ... // list更新処理 // ... return ( <> <input value={value} onChange={(e) => setValue(e.target.value)} /> <p>{deferredList.map((item) => item)}</p> </> ) } |
useSyncExternalStore
これはライブラリ製作者向けのhookです。
React18で並行処理/並行レンダリング機能が追加された結果、従来は更新のレンダーは中断不可で同期的にレンダーされたのに対し、開始、一時停止、再開or破棄が可能になりました。
そういった並行レンダリング機能との互換性を保ちながら、外部データソースから読み出しやデータの購読を行うために推奨されているhookです。
使用例
useSyncExternalStoreは3つの引数を受け取ります。第1はsubscribe（ストア変更時に実行されるコールバック関数）、第2はgetSnapshot（ストアの現在値を返す関数）、第3はgetServerSnapshot（SSR時にスナップショットを返す関数※任意※）です。
また、後方互換性保持と、getSnapshotの自動的なメモ化をサポートするパッケージとして、use-sync-external-storeが公開されています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // source: https://github.com/reactwg/react-18/discussions/86 import { useSyncExternalStore } from 'react'; // 後方互換性のあるhook // import { useSyncExternalStore } from 'use-sync-external-store/shim'; const state = useSyncExternalStore(store.subscribe, store.getSnapshot); // 特定のフィールドをsubscribeすることもできる const selectedField = useSyncExternalStore(store.subscribe, () => store.getSnapshot().selectedField); // getSnapshot の結果のメモ化 import {useSyncExternalStoreWithSelector} from 'use-sync-external-store/with-selector'; const selection = useSyncExternalStoreWithSelector( store.subscribe, store.getSnapshot, getServerSnapshot, selector, isEqual ); |
useInsertionEffect
こちらもライブラリ製作者、特に css-in-js ライブラリの作者向けのhookです。
DOM 更新の前に同期的に呼び出されるため、他のhook(useLayoutEffect含む)が動く前にDOMにスタイルを注入することができます。
css-in-jsライブラリとして有名なemotionでは、React18の安定版がリリースされる前からuseInsertionEffectの適用を準備していたようです👀
useLayoutEffectを使用していた箇所をuseInsertionEffectに置き換えたりしてますね。
使用例
使い方はuseEffect, useLayoutEffectと同様です。
第二引数に依存する値を配列で指定することができ、クリーンアップする関数をリターンすることもできます。
1 2 3 4 5 6 7 8 9 10 11 | import { useInsertionEffect } from 'react' import { insertStyles, cleanup } from '../util' export const useStyle = () => { useInsertionEffect(() => { insertStyles() return () => { // クリーンアップ処理 } }, []) } |
最後に
React18で追加されたhooksの紹介でした！
なかなか使う機会のないhookもあったかとは思いますが、必要な時に思い出せるよう、頭の片隅にでも置いておきましょう💫
書いた人はこんな人
- Webエンジニア。
好きなものはフルーツタルト。
IT技術10月 25, 2023Renovateのおすすめ設定- IT技術4月 10, 2023tRPCを触ってみる
- IT技術1月 10, 2023Webアクセシビリティとエンジニア
- IT技術10月 14, 2022知ってると便利なCSS 8選！
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
