Encountering an infinite loop issue when querying user data containing an array in Firebase via onAuthStateChanged

Question

My current environment is ReactJS 18.2.0, running with Firebase 10.

The problem I'm currently having is using onAuthStateChanged to query data about the user when they load or log in to the page.

The following is an example code snippet for a custom service that handles Firebase Auth.

All settings are part of the context and are all useState.

const subscribeToAuthChanges = (
  handleAuthChange,
  setLoadingState,
  setUserRole,
  setEmail,
  setFirstName,
  setIsActive,
  setLastName,
  setLocation,
  setUserID
) => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      handleAuthChange(user);

      FirebaseFirestoreService.getUserData(user.uid).then((data) => {
        setUserID(user.uid);
        setUserRole(data.role);
        setEmail(data.email);
        setFirstName(data.firstName);
        setIsActive(data.isActive);
        setLastName(data.lastName);
        setLocation(data.location);
      });
      setLoadingState(false);
    } else {
      setLoadingState(false);
    }
  });
};

FirebaseFirestoreService.getUserData() function

const getUserData = async (id) => {
  const docRef = doc(db, "users", id);
  const docSnap = await getDoc(docRef);
  if (docSnap.exists()) {
    return docSnap.data();
  } else {
    return null;
  }
};

This should not be run within useEffect, the context was created to handle this.

import React, { useState } from "react";
import FirebaseAuthService from "../Services/FirebaseAuthService";

const FirebaseAuth = React.createContext({
  user: null,
  loading: true,
  role: "",
  email: "",
  firstName: "",
  isActive: false,
  lastName: "",
  location: "",
  userID: "",
});

export const FirebaseAuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [role, setRole] = useState(null);
  const [email, setEmail] = useState("");
  const [firstName, setFirstName] = useState("");
  const [isActive, setIsActive] = useState(false);
  const [lastName, setLastName] = useState("");
  const [location, setLocation] = useState("");
  const [userID, setUserID] = useState("");

  const [loading, setLoading] = useState(true);

  FirebaseAuthService.subscribeToAuthChanges(
    setUser,
    setLoading,
    setRole,
    setEmail,
    setFirstName,
    setIsActive,
    setLastName,
    setLocation,
    setUserID
  );

  return (
    <FirebaseAuth.Provider
      value={{
        user,
        loading,
        role,
        email,
        firstName,
        lastName,
        isActive,
        location,
        userID,
      }}
    >
      {children}
    </FirebaseAuth.Provider>
  );
};

export default FirebaseAuth;

在这个例子中，我缺少一个查询字符串数组的设置函数，然而，以任何方式查询该数组都会导致onAuthStateChanged()不断循环，反复向Firebase发出读取请求。

有没有办法读取数组而不遇到这个问题？

我尝试通过循环遍历数组来避免遇到这个问题，然而，以任何方式查询它都会导致Firebase被反复POST请求。

Answer 1

The reason your loop is running is because you did not set onAuthStateChanged() in the side effect, please try the following

const FirebaseAuth = React.createContext({
  user: null,
  loading: true,
  role: '',
  email: '',
  firstName: '',
  isActive: false,
  lastName: '',
  location: '',
  userID: '',
});

export const FirebaseAuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [role, setRole] = useState(null);
  const [email, setEmail] = useState('');
  const [firstName, setFirstName] = useState('');
  const [isActive, setIsActive] = useState(false);
  const [lastName, setLastName] = useState('');
  const [location, setLocation] = useState('');
  const [userID, setUserID] = useState('');

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setLoading(true);
      if (user) {
        setUser(user);
        FirebaseFirestoreService.getUserData(user.uid).then((data) => {
          setUserID(user.uid);
          setUserRole(data.role);
          setEmail(data.email);
          setFirstName(data.firstName);
          setIsActive(data.isActive);
          setLastName(data.lastName);
          setLocation(data.location);
        });
        setLoadingState(false);
      } else {
        setLoadingState(false);
      }
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <FirebaseAuth.Provider
      value={{
        user,
        loading,
        role,
        email,
        firstName,
        lastName,
        isActive,
        location,
        userID,
      }}
    >
      {children}
    </FirebaseAuth.Provider>
  );
};

export default FirebaseAuth;