カスタムフックとは何で、どのように書きますか？

Question

Accepted Answer

**カスタムフック**は、名前が `use` で始まり、他のフックを呼び出して**ステートフルなロジックをパッケージ化して再利用する**関数です。HOC や render props とは異なり、コンポーネントツリーを変えることはありません。 ```jsx // extract "fetch + loading + error" logic once, reuse everywhere function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const ctrl = new AbortController(); setLoading(true); fetch(url, { signal: ctrl.signal }) .then(r => r.json()) .then(setData) .catch(e => { if (e.name !== "AbortError") setError(e); }) .finally(() => setLoading(false)); return () => ctrl.abort(); }, [url]); return { data, loading, error }; } // usage — the component stays declarative: function Profile({ id }) { const { data, loading, error } = useFetch(`/api/users/${id}`); if (loading) return ; return

{data.name}

; } ``` ## 重要な性質 - **フックのルール**に従います（トップレベルで呼び出す。コンポーネントやフックからのみ呼び出す）。 - **状態は呼び出しごとに分離されます。** `useFetch` を使う 2 つのコンポーネントは、それぞれ独立した状態を持ちます。フックを共有しても、データが共有されるわけ*ではありません*。 - 慣習：`useX` という名前にし、状態と関数を返します（多くの場合、配列またはオブジェクト）。 ## なぜ重要なのかカスタムフックは、現代の React においてロジック（データ取得、フォーム、サブスクリプション、メディアクエリ）を共有するための慣用的な手段であり、コンポーネントを小さく保ち、ロジックを独立してテスト可能にします。