React開発において、コードの再利用性と可読性を高める手段として「カスタムフック（Custom Hooks）」の活用が注目されています。Reactの関数コンポーネントで使われるuseStateやuseEffectといったフックは広く知られていますが、実は開発者自身が独自のフックを定義することも可能です。本記事では、カスタムフックの基本から実用例、設計のポイントまでを解説します。
カスタムフックとは？
カスタムフックとは、複数のReactフックの処理をまとめて再利用できるようにした自作の関数です。useで始まる関数名にする必要があり、useStateやuseEffectなどを内部で組み合わせて、状態管理やロジックの共通化を行います。
例えば、フォームの入力状態を管理する処理や、APIのフェッチ処理など、複数のコンポーネントで重複するようなコードは、カスタムフックに切り出すことで管理しやすくなります。
実用例：フォームの入力管理用カスタムフック
複数のフォーム入力を扱う場合、各コンポーネントでuseStateを使って状態を個別に管理するのは非効率です。以下のようなカスタムフックで共通化できます。
import { useState } from 'react';
function useForm(initialValues) {
const [values, setValues] = useState(initialValues);
const handleChange = (e) => {
const { name, value } = e.target;
setValues((prev) => ({ ...prev, [name]: value }));
};
return [values, handleChange];
}
使い方は以下の通りです。
function ContactForm() {
const [form, handleChange] = useForm({ name: '', email: '' });
return (
<form>
<input name="name" value={form.name} onChange={handleChange} />
<input name="email" value={form.email} onChange={handleChange} />
</form>
);
}
これにより、複数のフォームで同じロジックを使い回せます。
設計のコツ
カスタムフックを設計する際は、以下のポイントを意識しましょう：
- 名前は
useで始める
Reactのルールにより、React DevToolsやESLintが正しく動作するためにuseで始める必要があります。 - UI要素には関与しない
カスタムフックはロジックの再利用が目的です。表示（JSX）に関わる処理は行わず、状態やイベント処理などに専念しましょう。 - 柔軟な引数と戻り値設計
useFormの例のように、初期値やハンドラ関数を汎用的に扱える設計にすると、再利用性が高まります。 - 副作用は
useEffectで適切に制御
API通信やデータの監視など副作用を含む処理は、内部でuseEffectを活用して適切に管理します。
まとめ
カスタムフックを活用すれば、Reactコンポーネント内の重複したロジックをまとめ、コードの見通しや保守性を大きく向上させることができます。初めのうちは単純なuseFormやuseCounterなどから始めて、徐々にAPI連携や状態管理といった複雑な処理へと応用していきましょう。Reactの柔軟な設計思想を活かすためにも、カスタムフックの活用は習得しておきたい重要な技術のひとつです。
