Different Ways to Fetch Data from APIs Using `useEffect` in React-JS Tutorial-php.cn

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

Linda Hamilton

Release： 2025-01-10 22:33:43

Original

789 people have browsed it

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

Copy after login

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
}, []);

Copy after login

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;

Copy after login

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

); };

Copy after login

Instead of fetching data inside the component where it is needed, fetch the data in a parent or higher-level component and pass it as props.