setState inside useEffect cause infinite loop

Question

I want to use the list to seData and setUserData. I am using data to map through the list of users and display on the table. I am using the userData to get user information in different components. This is causing infinite loop.

import { useState, useEffect, useContext } from 'react';
import { collection, onSnapshot } from 'firebase/firestore';
import { db, auth } from '../../firebase';
import { UserContext } from '../../Contexts/UserContext';

const Datatable = () => {
    const {userData, setUserData} = useContext(UserContext);
    const [data, setData] = useState([]);
    const [isEditing, setIsEditing] = useState(false);
    const [currentId, setCurrentId] = useState("");

    useEffect(() => {
        const getUserData = () => {
            onSnapshot(collection(db, "users"), (snapshot) => {
                let list = [];
                snapshot.docs.forEach((doc) => {
                list.push({ id: doc.id, ...doc.data() });
                setData(list);
                setUserData(list)
                });
            }, (err) => {
            console.log(err);
            });
        }
        getUserData();
    }, [])
}

you can add dependency in use effect to avoid an infinite loop — Amit Rai, Jun 07 '22 at 06:01

score 1 · Answer 1 · answered Jun 07 '22 at 06:21

Updating values to the state should not be done in useEffect. You have to create a function outside and update the state value.

If you do so, You will be getting Warning: Maximum update depth exceeded. error.

This happens because once if you update a state the reference of the state will be changed and component rerender happens. Again since the reference is changed. The useEffect will be called again and this happens infinitely which the react stops after a certain extent.

setState inside useEffect cause infinite loop

1 Answers1