Different Ways to Fetch Data from APIs Using `useEffect` in React

In React, the useEffect hook is designed to run side effects like fetching data when the component renders. While you cannot avoid calling the fetchData function in this specific case (because you need a way to initiate the API request), you can simplify or abstract it depending on your requirements.

Approaches

1. Inline the Fetch Logic

Instead of defining fetchData as a separate function, you can inline the fetch logic directly inside the useEffect hook.

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

While this approach eliminates the explicit call to fetchData, the logic still exists as an inline async function.

---

2. Automatically Call the API Without Explicit Function

You can directly execute the fetch operation as an IIFE (Immediately Invoked Function Expression) within the useEffect. This removes the need for a named function like 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
}, []);

This way, the fetch logic is directly executed without explicitly calling a named function.

---

3. Use a Custom Hook

You can abstract the fetching logic into a custom hook to encapsulate the functionality and keep your component cleaner.

Custom Hook: 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;

Use the Hook in Your Component

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>Data from API:</h1>
            <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}