Why's my response being executed more than once with the correct data instead of just only once with useEffect()?

0

Issue

I know having an empty dependency [] executes useEffect() only once but when it does execute only once with an empty dependency [] – it logs an empty array in the console.

When it’s not empty, it just continuously logs with no end in sight (with the correct data). I’m not sure why it won’t log it correctly just one time with the data I need to use.

What am I doing wrong?

Code below:

const [uploadsData, setUploadsData] = useState([]);

const getUploads = async () => {
    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    }

    await axios.get('http://localhost:8000/api/get-uploads', {headers})
        .then(resp => {
            console.log(resp);
            setUploadsData([resp.data]);
        }).catch(error => {
        console.log(error);
    });
};

useEffect(() => {
    getUploads();
    // logs empty array in the console if dependency array is empty
    // logs correct data when dependency array isn't empty - i.e. [uploadsData]
    console.log(uploadsData);
}, []);

Solution

That’s because you are referring the uploadsData inside the useEffect hook’s callback and in order to get correct console log, you should run that code in a separate useEffect hook.

useEffect(() => {
    getUploads();
}, []);

useEffect(() => {
    // logs empty array in the console if dependency array is empty
    // logs correct data when dependency array isn't empty - i.e. [uploadsData]
    console.log(uploadsData);
}, [uploadsData]);

In this way, the getUploads function is called only once and it outputs correct uploadData to the browser console.

Answered By – Alan Zhu

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More