Hooked.

React 19に存在するすべてのフックを、実際に触って動かせるコンポーネントとともに一つずつ解説していく実験ページです。それぞれの使用例と、そのフックを使うことで得られる具体的なメリットを実感できることを目指しています。

全19フックを公開中です。気になるフックをクリックしてください。

状態

useState
コンポーネントに状態を持たせ、更新のたびに再レンダリングする
```
const [state, setState] = useState(initialState)const [count, setCount] = useState(0);
```

複数の値が絡み合う状態遷移を、一つのreducer関数にまとめる

const [state, dispatch] = useReducer(reducer, initialArg)const [state, dispatch] = useReducer(reducer, { count: 0 });

useOptimistic

サーバーの応答を待たず、先に楽観的なUIを表示する

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn)const [optimisticTodos, addTodo] = useOptimistic(todos, (state, newTodo) => [...state, newTodo]);

副作用

useEffect
レンダー後に副作用を実行し、依存配列の変化に応じて再実行する
```
useEffect(setup, dependencies?)useEffect(() => { document.title = title; }, [title]);
```

useLayoutEffect

ブラウザが描画する前、同期的に副作用を実行する

useLayoutEffect(setup, dependencies?)useLayoutEffect(() => { setWidth(ref.current.offsetWidth); }, []);

useInsertionEffect
レイアウト計算より前にスタイルを挿入するための特殊なフック
```
useInsertionEffect(setup, dependencies?)useInsertionEffect(() => { insertStyleRules(rules); }, [rules]);
```

参照

useRef

再レンダリングを引き起こさずに値を保持する箱

const ref = useRef(initialValue)const inputRef = useRef<HTMLInputElement>(null);

useImperativeHandle

refで公開するインスタンス値をカスタマイズする

useImperativeHandle(ref, createHandle, dependencies?)useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() }));

パフォーマンス

useMemo

依存配列が変わらない限り、計算結果を再利用する

const value = useMemo(calculateValue, dependencies)const sorted = useMemo(() => [...items].sort(), [items]);

useCallback

依存配列が変わらない限り、同じ関数の参照を返す

const cachedFn = useCallback(fn, dependencies)const handleClick = useCallback(() => onSelect(id), [id, onSelect]);

コンテキスト

useContext
propsのバケツリレーをせずに、離れた場所へ値を届ける
```
const value = useContext(SomeContext)const theme = useContext(ThemeContext);
```

リソース

use
Promiseやコンテキストをレンダー中に直接読み取る
```
const value = use(resource)const data = use(fetchDataPromise);
```

フォーム (react-dom)

useActionState

フォームアクションの結果と保留状態をまとめて管理する

const [state, formAction, isPending] = useActionState(action, initialState)const [state, formAction] = useActionState(updateName, { error: null });

useFormStatus

親の<form>が送信中かどうかを、propsを介さず子から参照する

const { pending, data, method, action } = useFormStatus()const { pending } = useFormStatus();

その他

useSyncExternalStore

Reactの外にある状態(store)を、tearingなく安全に購読する

const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)const isOnline = useSyncExternalStore(subscribeToOnline, () => navigator.onLine);