Reactにおけるカスタムフック（Custom Hooks）とイベントハンドラ（Event Handlers）は、それぞれ異なる目的と役割を持つ機能です。
以下にその違いを詳しく説明します。
カスタムフック（Custom Hooks）
概要: カスタムフックは、Reactのフック（例えばuseStateやuseEffect）を組み合わせて再利用可能なロジックを抽出し、複数のコンポーネントで共有できるようにしたものです。
名前は「use」で始める必要があります。
目的:
- 複数のコンポーネントで共通する状態管理や副作用処理をまとめる。
- コードの再利用性と可読性を向上させる。
- ビジネスロジックをコンポーネントから分離することで、テストしやすくする。
例:
// useFetch.js
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then((response) => response.json())
.then((json) => {
setData(json);
setLoading(false);
});
}, [url]);
return { data, loading };
};
export default useFetch;// MyComponent.js
import React from 'react';
import useFetch from './useFetch';
const MyComponent = () => {
const { data, loading } = useFetch('https://api.example.com/data');
if (loading) return <div>Loading...</div>;
return <div>{JSON.stringify(data)}</div>;
};
export default MyComponent;イベントハンドラ（Event Handlers）
概要: イベントハンドラは、ユーザーの操作（クリック、入力、送信など）に応じて実行される関数です。Reactでは、イベントハンドラをコンポーネント内で定義し、JSX内の要素にプロパティとして渡します。
目的:
- ユーザーの操作に応じたインタラクションを実現する。
- 状態の更新や他の関数の呼び出しなど、ユーザーアクションに基づく処理を行う。
例:
// ButtonComponent.js
import React, { useState } from 'react';
const ButtonComponent = () => {
const [count, setCount] = useState(0);
// イベントハンドラ
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>クリックしてカウント: {count}</button>
</div>
);
};
export default ButtonComponent;主な違い
| 項目 | カスタムフック（Custom Hooks） | イベントハンドラ（Event Handlers） |
|---|---|---|
| 目的 | ロジックの再利用と抽象化 | ユーザーの操作に応じたインタラクションの処理 |
| 構造 | useで始まる関数。フックを内部で使用 | 関数として定義し、JSX内のイベントプロパティに渡す |
| 使用場所 | コンポーネントの中でフックとして呼び出す | JSX内の要素に直接バインドする |
| 再利用性 | 高い。複数のコンポーネントで共有可能 | 基本的に特定のコンポーネント内で使用 |
| 例 | データフェッチ、フォームバリデーションなどの共通ロジック | ボタンのクリック、フォームの送信などのユーザー操作 |
まとめ
- カスタムフックは、Reactのフックを利用して共通のロジックを抽出・再利用するための仕組みであり、主に状態管理や副作用の処理に関わります。
- イベントハンドラは、ユーザーの操作に応じて特定の処理を実行するための関数であり、インタラクティブなユーザー体験を実現します。
両者はReactアプリケーションにおいて異なる役割を果たし、適切に使い分けることでコードの効率性と可読性を向上させることができます。
