I am trying to create a useEffect hook that will check my firebase database for an array of objects when the component loads or when there’s an update to the array. My problem is that it’s causing infinite rerendering if I include the usersDragons array at the end of the useEffect hook and I don’t understand why. If I leave it out, it’s no longer running at all.

I am new to React so this may be an obvious solution that I’m just not seeing.

useEffect(() => {

        async function checkForUsersDragons(currentUser) {
            try {
                const usersDragonsFromDB = await getUsersDragonsFromDB(currentUser.uid);
                const usersDragonsFromDBArray = Object.values(usersDragonsFromDB);
                if (usersDragonsFromDBArray.length > 0) {
                    setUsersDragons(usersDragonsFromDBArray);
                } else {
                    console.log("No dragons for this user");
                }
            } catch (error) {
                console.error("Error fetching dragons:", error);
            }
        }

        if (currentUser) {
            checkForUsersDragons(currentUser);
        }
    }, [usersDragons]);