React useEffect hook with empty dependency render multiple times

Question

I always thought useEffect with empty dependencies will only render once. Here is my code snippet but it renders 2 times:

useEffect(() => {
        let entryDataArray = [];
        for (let i = 0; i < days; ++i) {
            let entryData = [];
            let entries = eventEntryList[i];
            console.log('entries = ', entries);
            for (var j = 0; j < entries.length; ++j) {
                console.log('j = ', j);
                console.log('entries[j] 1111111 = ', entries[j]);
                if (entries[j].runGroup[i] === NOT_ATTENDING) {
                    continue;
                }
                console.log('entries[j] 2222222 = ', entries[j]);
                let entry = {
                    lastName: entries[j].userLastName,
                    firstName: entries[j].userFirstName,
                    email: entries[j].email,
                    carNumber: entries[j].carNumber,
                    paymentMethod: entries[j].paymentMethod,
                    entryFee: entries[j].entryFee,
                    paymentStatus: entries[j].paymentStatus ? 'Paid' : 'Unpaid'
                };
                entryData.push(entry);
            }
            entryDataArray.push(entryData);
        }
        setEntryListArray(entryDataArray);
        setShowLoading(false);
    }, []);

console output shows it renders 2 times. The first time, for loop works as it supposed to - "continue" works under "if (entries[j].runGroup[i] === NOT_ATTENDING)". The 2nd time, "continue" did not get executed.

Am I missing something?

Is it your case? https://stackoverflow.com/a/61897567/12656448 — Kirill Skomarovskiy, Dec 12 '20 at 05:03
Does this answer your question? [React 18, useEffect is getting called two times on mount](https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount) — Youssouf Oumar, Aug 13 '22 at 17:30

score 1 · Answer 1 · answered Dec 12 '20 at 20:30

1

To be clear: useEffect with an empty dependency array runs every time the component mounts. This could be more than once if you have unmounted and remounted your component by accident.

First make sure you're not in StrictMode, as this would be expected in strict mode.

If you aren't in strict mode include a return function in your useEffect which will run on every unmount to detect whether or not your component is unmounting.

useEffect(() => {

     // your code

    return () => {
    // will run on every unmount.
     console.log("component is unmounting");
    }

}, [])

answered Dec 12 '20 at 20:30

qMo

11
1

I am not in StrictMode. I added a return with console.log inside useEffect as you suggested. No, the component did not unmount. The only time it gets unmounted is when I left the page. I just put another console.log right after useEffect() section to check entryListArray which value was set using useState() setEntryListArray(entryDataArray); Surprisingly, the 2nd render did not affect the final result. As long as the array has the values that I want, I am OK with the extra rendering for now. Thanks for the help! – HHung Dec 12 '20 at 21:15

score 0 · Answer 2 · answered Dec 08 '21 at 02:23

0

I thought you run your app in dev mode right?. On Dev mode every time you make the change it hot reload your component every time you make the change to your code.

answered Dec 08 '21 at 02:23

Luan Nguyen

1
1

React useEffect hook with empty dependency render multiple times

2 Answers2