フックAPIリファレンスを読む
基本のフック
useState - ステートフック。カウントとか
const [state, setState] = useState(initialState);
useEffect - 副作用フック。毎回のレンダー時に呼ばれるもの
useEffect(didUpdate);
useContext - コンテクストオブジェクトを受け取り、そのコンテクストの現在地を返す
const value = useContext(MyContext);
追加のフック
useReducer
useStateの代替品
useCallback
メモ化されたコールバックを返す
code:js
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
);
useMemo
メモ化された値を返す
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useRef
.current プロパティが渡された引数に初期化されている ref オブジェクトを返す
const refContainer = useRef(initialValue);
書き換え可能な値を .current プロパティ内に保持することができる箱
DOMにアクセスする手段以外にも便利に使える
useImperativeHandle
ref が使われたときに親コンポーネントに渡されるインスタンスをカスタマイズするのに使う
fowardRef と組み合わせて使う
useImperativeHandle(ref, createHandle, [deps])
code:js
const FancyInput = (props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
useLayoutEffect
useEffect と同じだがDOMの変更があったあとで同期的に呼び出される
useDebugValue - React DevTools でカスタムフックのラベルを表示できる
useDebugValue(value)
useDebugValue(isOnline ? 'Online' : 'Offline');
useDeferredValue
値を受け取りその値のコピーを返す
const deferredValue = useDeferredValue(value);
useTransition
トランジションの実行中状態を表す状態値と、トランジションを開始するための関数を返す
const [isPending, startTransition] = useTransition();
useId
ハイドレーション時の不整合を防ぎつつサーバとクライアント間で安定な一意 ID を作成する
const id = useId();
ライブラリ製作者用フック
useSyncExternalStore
useInsertionEffect