React で「useEffect」を使用して API からデータをフェッチするさまざまな方法

React では、useEffect フックは、コンポーネントのレンダリング時にデータのフェッチなどの副作用を実行するように設計されています。この特定のケースでは fetchData 関数の呼び出しを避けることはできませんが (API リクエストを開始する方法が必要なため)、要件に応じて関数を単純化または抽象化できます。

アプローチ

1.フェッチロジックをインライン化します

fetchData を別の関数として定義する代わりに、useEffect フック内にフェッチ ロジックを直接インライン化できます。

useEffect(() => {
    const fetchData = async () => {
        setLoading(true);
        try {
            const response = await fetch('http://127.0.0.1:5000/indicators_signals');
            const data = await response.json();
            setData(data);
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            setLoading(false);
        }
    };

    fetchData();
}, []); // Empty dependency array ensures this runs only once

このアプローチでは fetchData への明示的な呼び出しが不要になりますが、ロジックはインライン非同期関数として引き続き存在します。

---

2.明示的な関数を使用せずに API を自動的に呼び出す

useEffect 内で IIFE (Immediately Invoked Function Expression) としてフェッチ操作を直接実行できます。これにより、fetchData のような名前付き関数が必要なくなります。

useEffect(() => {
    (async () => {
        setLoading(true);
        try {
            const response = await fetch('http://127.0.0.1:5000/indicators_signals');
            const data = await response.json();
            setData(data);
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            setLoading(false);
        }
    })(); // The function is invoked immediately
}, []);

この方法では、名前付き関数を明示的に呼び出すことなく、フェッチ ロジックが直接実行されます。

---

3.カスタムフックを使用する

フェッチ ロジックをカスタム フックに抽象化して機能をカプセル化し、コンポーネントをクリーンな状態に保つことができます。

カスタムフック: useFetch

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        (async () => {
            try {
                const response = await fetch(url);
                const result = await response.json();
                setData(result);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        })();
    }, [url]);

    return { data, loading, error };
};

export default useFetch;

コンポーネントでフックを使用する

import useFetch from './hooks/useFetch';

const MyComponent = () => {
    const { data, loading, error } = useFetch('http://127.0.0.1:5000/indicators_signals');

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

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