Différentes façons de récupérer des données à partir d'API à l'aide de « useEffect » dans React

Dans React, le hook useEffect est conçu pour exécuter des effets secondaires comme la récupération de données lors du rendu du composant. Bien que vous ne puissiez pas éviter d'appeler la fonction fetchData dans ce cas spécifique (car vous avez besoin d'un moyen de lancer la requête API), vous pouvez la simplifier ou la résumer en fonction de vos besoins.

Approches

1. Inline la logique de récupération

Au lieu de définir fetchData en tant que fonction distincte, vous pouvez intégrer la logique de récupération directement dans le hook 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

Bien que cette approche élimine l'appel explicite à fetchData, la logique existe toujours en tant que fonction asynchrone en ligne.

---

2. Appeler automatiquement l'API sans fonction explicite

Vous pouvez exécuter directement l'opération de récupération en tant qu'IIFE (Immediately Invoked Function Expression) dans useEffect. Cela supprime le besoin d'une fonction nommée comme 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
}, []);

De cette façon, la logique de récupération est directement exécutée sans appeler explicitement une fonction nommée.

---

3. Utilisez un crochet personnalisé

Vous pouvez résumer la logique de récupération dans un hook personnalisé pour encapsuler la fonctionnalité et garder votre composant plus propre.

Hook personnalisé : 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;

Utilisez le crochet dans votre composant

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)}