Skip to content
Advertisement

How can I instantly load all my firebase entries without re-rendering?

Circumstances: For my app project that uses a realtime database I’m trying to load in data from all machines that are associated with the user. The machines that the user should see are dependent on the related company (cid) and which machines belong to that company.

Problem: I have used the Firebase v9 docs as much as possible and have created the code you can see below. However, this code only returns the correct machines after 3 re-renders. It looks like every onValue command only returns something after a re-render. Can someone explain to me a way in which I can get the full data without forcefully re-rendering the screen? I have already tried to use the get command asynchronously but this didn’t seem to change anything.

Firebase layout picture

useEffect(() => {
    const auth = getAuth();
    const db = getDatabase();
    const userRef = ref(db, "users/" + auth.currentUser.uid + "/cid");
    onValue(userRef, (snapshot) => {
      const cid = snapshot.val();
      setCid(cid, true);
    });
    const machinesRef = ref(db, "companies/" + cid + "/machines");
    onValue(machinesRef, (snapshot) => {
      const fetchedData = [];
      snapshot.forEach((childSnapshot) => {
        const childKey = childSnapshot.key;
        const childData = childSnapshot.val();
        const parsRef = ref(db, "machines/" + childKey);
        onValue(parsRef, (snapshot) => {
          const parData = snapshot.val();
          fetchedData.push(
            new Machine(
              childKey,
              cid,
              childData.type,
              childData.creation,
              parData.temperature
            )
          );
        });
      });
      setData(fetchedData);
    });
    console.log(cid); # Outputted in the results section
    console.log(data); # Outputted in the results section
  }, []);

Results:
Render 1:

null
Array []

Render 2:

cid # This is correct
Array []

Render 3:

cid
Array [
  Machine {
    "companyId": "cid",
    "creation": "creation",
    "id": "23rff3345GRR",
    "temperature": 99,
    "type": "type",
  },
  Machine {
    "companyId": "cid",
    "creation": "creation",
    "id": "3454egGR3",
    "temperature": 2,
    "type": "type",
  },
]

Advertisement

Answer

You’ll need to move the call to setData into the onValue handler:

onValue(machinesRef, (snapshot) => {
  const fetchedData = [];
  snapshot.forEach((childSnapshot) => {
    const childKey = childSnapshot.key;
    const childData = childSnapshot.val();
    const parsRef = ref(db, "machines/" + childKey);
    onValue(parsRef, (snapshot) => {
      const parData = snapshot.val();
      fetchedData.push(
        new Machine(
          childKey,
          cid,
          childData.type,
          childData.creation,
          parData.temperature
        )
      );
      setData(fetchedData); // 👈
    });
  });

If you leave it outside of the callbacks, it will run before the fetchedData.push(...) was called. The easiest way to check this is by setting breakpoints on both lines and running in a debugger, or by adding some logging and checking the order of the output.

For a longer explanation on this, see: Why Does Firebase Lose Reference outside the once() Function? (pre v9, but the behavior is the exact same regardless of version)

Advertisement