React のカスタムフック

React のカスタム フックは、複数のコンポーネント間でロジックを抽出して再利用できる強力な機能です。これにより、複雑なステートフル ロジックをカプセル化できるようになり、コンポーネントがクリーンになり、保守が容易になります。ここでは、カスタム フックの作成方法と使用方法の簡単な概要と例を示します。

カスタムフックの作成

カスタム フックは本質的には JavaScript 関数であり、その名前は use で始まり、内部で他のフックを呼び出すことができます。カウンタを管理するカスタム フックの簡単な例を次に示します。

import { useState } from 'react';

// Custom Hook: useCounter
function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);

    const increment = () => setCount(c => c + 1);
    const decrement = () => setCount(c => c - 1);
    const reset = () => setCount(initialValue);

    return { count, increment, decrement, reset };
}

export default useCounter;

カスタムフックの使用

useCounter フックは任意の機能コンポーネントで使用できます。

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
    const { count, increment, decrement, reset } = useCounter(0);

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
            <button onClick={reset}>Reset</button>
        </div>
    );
}

export default CounterComponent;

重要なポイント

1. 命名規則: React の規則に従って、カスタム フックの名前は常に use で始まります。
2. 再利用性: カスタム フックは複数のコンポーネント間で再利用でき、DRY (Don'trepeat Yourself) コードを促進します。
3. 状態管理: 状態を管理し、副作用を実行し、カスタム フック内の他のフックを活用できます。

高度な例: データのフェッチ

データを取得するためのより高度なカスタム フックは次のとおりです。

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error('Network response was not ok');
                const result = await response.json();
                setData(result);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading, error };
}

export default useFetch;

使用法

コンポーネントで useFetch フックを使用してデータをフェッチできます。

import React from 'react';
import useFetch from './useFetch';

function DataFetchingComponent() {
    const { data, loading, error } = useFetch('https://api.example.com/data');

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;

    return (
        <div>
            <h1>Data:</h1>
            <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}