reactjs - React/Firebase, when i try to setState the data im getting from firecloud i get thousands of console.logs out

Question

I made login/register form and once u register, user's data is sent to cloud Firestore, then I retrieve it using 'users/${users.uid}. When I console.log it I get what I want an object file with users data, but when I try to put it into setUsersData(user.data()) and console.log it I get thousands of logs, yet if I go deeper and console.log(email or display name from user) I get it called like it should just on rerender. And I have no idea why I can't just pass whole data.

import 'firebase/auth';
import 'firebase/firestore';
import firebase from 'firebase/app';

const firebaseConfig = {
  apiKey: '...',
  authDomain: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
  appId: '...',
  measurementId: '...',
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export const auth = firebase.auth();
export const firestore = firebase.firestore();

// export const getUsersData = async (userAuth) => {
//   const userData = firestore.doc(`users/${userAuth.uid}`)
//   const snapShot = await userData.get();

// }

export const createUserProfileDocument = async (userAuth) => {
  if (!userAuth) return;

  const x = firestore.doc(`users/${userAuth.uid}`);
  const snapShot = await x.get();
  const xData = snapShot.data();

  if (!snapShot.exists) {
    const { email, displayName } = userAuth;
    const createdAt = new Date();
    x.set({
      email,
      displayName,
      createdAt,
    });
  }
  return xData;
};

export const googleAuth = () => {
  const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(googleAuthProvider);
};

export default firebase;

This registers user.

const checkPasswords = async () => {
  if (regConfirmPassword !== regPassword) {
    setVisible('');
  } else {
    try {
      const { user } = await auth.createUserWithEmailAndPassword(regEmail, regPassword);

      user.updateProfile({ displayName: userName });
    } catch (error) {
      console.log(error);
      if (error.code === 'auth/email-already-in-use') {
        setEmailPlaceHolder('Email already in use');
      }
    }
  }
};

And this is App.js file

function App() {
  const BASE_URL = "https://dummyapi.io/data/api";
  const APP_ID = "";

  const [data, setData] = useState([]);
  const [pages, setPages] = useState(0);
  const [loading, setLoading] = useState(true);
  const [hasError, setHasError] = useState(false);
  const [isLogin, setIsLogin] = useState(false);
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // getData();
  }, [pages]);

  const getData = async () => {
    try {
      const response = await fetch(`${BASE_URL}/post?page=${pages}`, {
        headers: { "app-id": APP_ID },
      });
      const x = await response.json();
      setData([...data, ...x.data]);
      setLoading(false);
    } catch (error) {
      setHasError(true);
      console.log(error);
    }
  };

  useEffect(() => {
    onAuthChange();
    return () => {
      onAuthChange();
    };
  }, [isLogin]);

const onAuthChange = auth.onAuthStateChanged(async (userAuth) => {
  if (userAuth) {
    setIsLogin(true);
    const y = await createUserProfileDocument(userAuth);
    setUserData(y);
    setUserData(y.email); // this way works fine and logs out just once.
    console.log(y); // if i console y it is as expected.
  } else {
    setIsLogin(false);
  }
});

console.log(userData); // this one gets console.log'ed thousands of times.

question from:https://stackoverflow.com/questions/65951576/react-firebase-when-i-try-to-setstate-the-data-im-getting-from-firecloud-i-get

Answer 1

Waitting for answers