CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestorereact-hooks
Benjamin Sommer
Benjamin Sommer

Reputation: 1248

React Hooks Firebase - useEffect hook not returning any data

I am trying to use the useEffect hook in React to listen for changes in a location in firestore.

Initially I didn't have an empty array as the second prop in the useEffect method and I didn't unsubscribe from the onSnapshot listener. I received the correct data in the projects variable after a short delay.

However, when I experienced extreme performance issues, I added in the unsubscribe and empty array which I should have put in earlier. Strangely, now no data is returned but the performance issues are gone.

What might be preventing the variable updating to reflect the data in firestore?

function useProjects(organisation) {
  const [projects, setProjects] = useState({
    docs: []
  });

  useEffect(() => {
    if (!organisation.docs[0]) return;
    const unsubscribe = firebase.firestore().collection('organisations').doc(organisation.docs[0].id).collection("projects").onSnapshot(snapshot => {
      setProjects(snapshot);
    });

    return () => unsubscribe()
  }, []);

  return projects
};

const projects = useProjects(organisation);

Upvotes: 1

Views: 437

Answers (1)

Zachary Haber
Zachary Haber

Reputation: 11027

You'll need a value in the dependency array for the useEffect hook. I'd probably suggest the values you are using in the useEffectHook. Otherwise with [] as the dependency array, the effect will only trigger once (on mount) and never again. The point of the dependency array is to tell react to re run the hook whenever a dependency changes.

Here's an example I'd suggest based on what's in the hook currently (using the id that you send to firebase in the call). I'm using optional chaining here as it makes the logic less verbose.

function useProjects(organisation) {
  const [projects, setProjects] = useState({
    docs: []
  });

  useEffect(() => {
    if (!organisation.docs[0]) return;
    const unsubscribe = firebase.firestore().collection('organisations').doc(organisation.docs[0].id).collection("projects").onSnapshot(snapshot => {
      setProjects(snapshot);
    });

    return () => unsubscribe()
  }, [organization.docs[0]?.id]);

  return projects
};

Upvotes: 2

Related Questions