React Hooksとは：すべてのフックをライブ例で解説

React Hooksは名前が use で始まる関数で、関数コンポーネントがReactの機能を使えるようにします。値を覚えておく useState、レンダリングの後にコードを実行する useEffect、DOMノードを持っておく useRef、共有データを読む useContext などです。コンポーネントの先頭で呼ぶと、Reactはレンダリングの間でその値を保ちます。

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

ここでは4つのフックが一緒に動いています。useState がテキストを保存し、useRef が入力欄を指してボタンがフォーカスできるようにし、useMemo が検索語が変わるまでフィルター済みのリストを保ち、useEffect が検索語が変わったレンダリングの後にログを出します。an と入力してコンソールを見てください。リストが更新された後、キーを押すごとに1行ずつ出ます。

フックが存在する理由

React 16.8より前は、stateやライフサイクルのコードが必要なコンポーネントはクラスでなければなりませんでした。1つの機能のロジックが componentDidMount、componentDidUpdate、componentWillUnmount に分かれ、それをコンポーネント間で共有するには、ミックスイン（クラス構文では一度も動きませんでした）、高階コンポーネント、レンダープロップを使う必要があり、どれもツリーを余分な層で包むものでした。

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

フックなら同じ機能が1か所にまとまります。エフェクトがタイマーを始め、そのクリーンアップが止めます。

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

時計を隠すと、コンソールに timer stopped と出ます。Clock が画面から消えたときにReactがクリーンアップを実行したのです。もう一度表示すると、新しいタイマーが始まります。クラスコンポーネントはReact 19でも動きますが、新しいコードではフックを使います。

すべての組み込みフック

React 19.2のフックは、コンポーネントに何を与えるかでグループ分けできます。最初の2つのグループは毎日使い、それ以外は特定の問題が起きたときに使います。

use、useActionState、useOptimistic、useFormStatus はReact 19で登場し、useEffectEvent は19.2で安定版になりました。一覧のそれ以外のフックはすべてReact 18でも動きます。

stateはレンダリングを起こし、refは起こさない

すべてのフックがレンダリングを起こすわけではありません。useState と useReducer は起こします。値を変えると、Reactはコンポーネントをもう一度描画します。useRef は current フィールドを自由に変えられるオブジェクトを渡し、Reactはそれが原因で再レンダリングすることはありません。そのため、タイマーのID、前回の値、画面に表示しないカウントを置くのに適しています。

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer がカートを、useState がメモを持っています。どちらも変わるとレンダリングを起こし、エフェクトはレンダリングごとに1行ログを出します。エフェクトは commits.current も変えますが、その変更が自分でレンダリングを起こすことはないので、ログはループしません。カウントをコンポーネント本体ではなくエフェクトで更新しているのは、本体はレンダリング中に何も変えるべきではないからです。

フックのルール

すべてのフックは2つのルールに従います。

1. フックはコンポーネントのトップレベルで呼び、条件分岐、ループ、ネストした関数の中では決して呼ばない。
2. フックは関数コンポーネントか、自作のカスタムフックからだけ呼ぶ。

Reactはフックを名前で区別していません。呼び出しの順番で区別し、その順番がすべてのレンダリングで同じであることを期待しています。if の中のフックは、その後のすべてのフックをずらしてしまいます。何が壊れ、どう直すかはフックのルールのページで紹介しています。use は唯一の例外で、条件分岐の中で呼べます。

最初のカスタムフック

2つのコンポーネントが同じstateを持つロジックを必要とするなら、それを名前が use で始まる関数に移します。その関数はほかのどんなフックでも呼べます。それを呼ぶ各コンポーネントは、自分のstateを持ちます。

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

どちらのカウンターも同じフックを実行していますが、一方をクリックしてももう一方は変わりません。カスタムフックが共有するのはロジックであって、stateではないのです。useCounter に decrement 関数と、それを呼ぶボタンを追加すると、両方のカウンターに一度に反映されます。ほかのパターン（useToggle、useDebounce、useLocalStorage）はカスタムフックのページにあります。

どのフックを使うか

• 値が変わったら画面も変わるべき：useState、多くのイベントが同じstateを更新するなら useReducer。
• Reactの外にあるもの（タイマー、購読、リクエスト）とやり取りする：useEffect。
• DOMノードや、画面に表示しない値が必要：useRef。
• ツリーの深いところにある多くのコンポーネントが同じ値を必要とする：useContext。
• 1つの計算や、メモ化された子の再レンダリングのせいでレンダリングが遅い：useMemo と useCallback。React Compilerがこのメモ化を代わりに追加してくれますが、手で書く方法も今も動き、よく使われています。
• 裏の更新が重くて入力がもたつく：useTransition か useDeferredValue。