Reactのカスタムフック：自作フックの作り方と例

カスタムフックは、名前が use で始まり、ほかのフックを呼ぶ関数です。2つのコンポーネントが同じstateを持つロジックを必要とするときに書きます。useState や useEffect の呼び出しを関数に移し、コンポーネントが必要とするものを返し、各コンポーネントからそれを呼びます。

import { useState } from 'react';

function useToggle(initial = false) {
    const [on, setOn] = useState(initial);
    const toggle = () => setOn((v) => !v);
    return [on, toggle];
}

function Spoiler({ title, children }) {
    const [open, toggle] = useToggle();
    return (
        <div style={{ marginBottom: 8 }}>
            <button onClick={toggle}>{open ? 'Hide' : 'Show'} {title}</button>
            {open && <p>{children}</p>}
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Spoiler title="ending">The butler did it.</Spoiler>
            <Spoiler title="sequel">The butler did it again.</Spoiler>
        </div>
    );
}

どちらのネタバレも useToggle を呼んでいますが、一方を開いてももう一方は閉じたままです。呼び出しごとに自分の useState が実行されるので、各コンポーネントは自分の値を持ちます。カスタムフックが共有するのはロジックであって、stateではありません。

書くときのルール

• 名前は use と大文字で始める：useToggle、useOnlineStatus。フックのlintルールは、この接頭辞でフックの呼び出しを見つけて確認します。
• 少なくとも1つのフックを呼ぶ。フックを呼ばない補助関数は普通の関数です。条件分岐の中を含めどこからでも呼べるように、useFormatDate ではなく formatDate と名付けてください。
• フックのルールに従う：中ではトップレベルでフックを呼び、それ自体はコンポーネントかほかのカスタムフックからだけ呼びます。
• 役に立つものを何でも返す。配列（[on, toggle]）は呼び出す側が値の名前を変えるときに便利で、オブジェクト（{ data, loading, error }）は3つ以上のときに読みやすくなります。

useLocalStorage：再読み込みしても残るstate

useState は再読み込みするとすべてを忘れます。このフックは初期値を localStorage から読み、変更のたびに書き戻します。

import { useState, useEffect } from 'react';

function readStored(key, fallback) {
    try {
        const raw = window.localStorage.getItem(key);
        return raw === null ? fallback : JSON.parse(raw);
    } catch {
        console.warn('localStorage is not available, keeping the value in memory');
        return fallback;
    }
}

function useLocalStorage(key, initial) {
    const [value, setValue] = useState(() => readStored(key, initial));

    useEffect(() => {
        try {
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch {
            // Storage blocked or full: the value still works for this visit
        }
    }, [key, value]);

    return [value, setValue];
}

export default function App() {
    const [name, setName] = useLocalStorage('demo-name', '');
    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
            <p>Hello, {name || 'stranger'}.</p>
        </div>
    );
}

プレビューはブラウザが localStorage をブロックするサンドボックスのフレームで動いているので、ここではコンソールに警告が表示され、フックは普通のstateにフォールバックします。普通のページなら、名前は再読み込みしても残ります。try/catch はこのプレビューのためだけではありません。プライベートブラウジング、ブロックされたCookie、容量の上限によって、実際のアプリでもストレージは例外を投げます。useState に関数を渡しているので、ストレージを読むのは最初のレンダリングの1回だけです。

useDebounce：ユーザーが入力し終わるまで待つ

検索欄は、キーを押すたびにリクエストを送るべきではありません。useDebounce は、値が決まった時間変わらなくなってから更新される、その値のコピーを返します。

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
    const [debounced, setDebounced] = useState(value);

    useEffect(() => {
        const id = setTimeout(() => setDebounced(value), delay);
        return () => clearTimeout(id);
    }, [value, delay]);

    return debounced;
}

export default function App() {
    const [text, setText] = useState('');
    const query = useDebounce(text, 500);

    useEffect(() => {
        if (query) console.log('search for:', query);
    }, [query]);

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Search" />
            <p>Typed: {text}</p>
            <p>Debounced: {query}</p>
        </div>
    );
}

単語をすばやく入力してください。Typed はすべてのキーに追従し、Debounced は入力を止めてから0.5秒後に追いつき、コンソールには検索が1回だけ記録されます。キーを押すたびに value が変わるので、Reactは新しいタイマーを始める前にクリーンアップ（clearTimeout）を実行します。500 を 0 に変えると、キーを押すたびに検索が記録されます。

useWindowWidth：クリーンアップ付きで購読する

ブラウザを監視するフックは、コンポーネントが消えるときにリスナーを削除しなければなりません。そうしないと、マウントのたびにリスナーが1つずつ残ります。

import { useState, useEffect } from 'react';

function useWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', onResize);
        console.log('resize listener added');
        return () => {
            window.removeEventListener('resize', onResize);
            console.log('resize listener removed');
        };
    }, []);

    return width;
}

function WidthBadge() {
    const width = useWindowWidth();
    return <p>This frame is {width}px wide: {width < 500 ? 'narrow' : 'wide'} layout.</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Unmount' : 'Mount'} badge</button>
            {show && <WidthBadge />}
        </div>
    );
}

ブラウザのウィンドウの大きさを変えると、数値が追従します。ボタンをクリックすると、リスナーが削除されたことがコンソールに表示されます。エフェクトから return を削除し、何回かマウントとアンマウントを繰り返してみてください。毎回 added の行が出て removed は出ないので、古いリスナーが積み重なっていきます。このようなブラウザの値には、Reactがまさにそのために作ったuseSyncExternalStoreがあり、カスタムフックの中で呼ぶのに適しています。

共有されるのはロジックで、stateではない

同じフックを呼ぶ2つのコンポーネントは、その中のすべてを別々に2つ持ちます。フックがグローバル変数のように動くと思っている人は、これに驚きます。

import { useState } from 'react';

function useCounter() {
    const [count, setCount] = useState(0);
    return [count, () => setCount((c) => c + 1)];
}

function Counter({ name }) {
    const [count, increment] = useCounter();
    return (
        <p>
            {name}: {count} <button onClick={increment}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter name="First" />
            <Counter name="Second" />
        </div>
    );
}

どちらかのボタンをクリックすると、そのカウンターだけが動きます。両方に同じ数値を表示すべきなら、stateを App に移して下へ渡すか、コンテキストに入れてください。カスタムフックは、便利なように共有stateを包むことができます（CartContext を読む useCart()）が、共有を実現しているのはフックではなくコンテキストです。

カスタムフックを書くべきとき

同じフック呼び出しのまとまりが2つのコンポーネントに現れたとき、または1つのコンポーネントのエフェクトのロジックが長く、名前を付けたほうがわかりやすいとき（20行のリスナーより useOnlineStatus() のほうが読みやすい）に、フックを抜き出します。名前を変えるためだけに1つの useState 呼び出しをフックで包んだり、propsからstateをセットするために useEffect を呼ぶだけのフックを書いたりしないでください。その値はレンダリング中に計算します。