Why's my response being executed more than once with the correct data instead of just only once-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

The first time it will print empty array since update state is async in React.

GIVEN that you add uploadsData to your dependency array. WHEN your effect runs, it updates uploadsData THEN the effect will be triggered again.

This will go on forever!