Accessing firestore functions from React useEffect without dependency warning

Question

I'm using ReactJS and Google FireStore to create a simple stock portfolio tracking app. How can I access database functions from within useEffect without triggering the warning "React Hook has a missing dependency"? I've tried playing around a bit with useCallback, but no success so far. Or is it ok to ignore these warnings?

var db = firebase.firestore();
  useEffect(() => {
    //get user's cost averages from db

    if (props.userStatus) {
      db.collection("users")
        .doc(props.userStatus)
        .get()
        .then((doc) => {
          if (doc.exists) {
            if (doc.data().portfolio) {
              setCostAverages(doc.data().portfolio);
            }
          }
        });
    }
  }, [props.userStatus]);

Warning msg: "React Hook useEffect has missing dependency 'db'

Can you share your package.json ?

Chemi Adel
– Chemi Adel

2021-10-23 14:47:21 +00:00
Commented Oct 23, 2021 at 14:47 — Chemi Adel
– Chemi Adel, Commented Oct 23, 2021 at 14:47

ErnestoC · Accepted Answer · 2021-10-25 22:32:08Z

The frequent solution to this warning is to add the reference of the Firestore instance to the dependency array of the useEffect() hook function. You can check this related thread and Github issue for more details. For your code snippet, the dependency array would need to look like this:

var db = firebase.firestore();
  useEffect(() => {
    //get user's cost averages from db
    //...
  }, [props.userStatus, db]);

According to the documentation, the dependency array should include all values used in the effect scope:

If you use this optimization, make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect. Otherwise, your code will reference stale values from previous renders.

Finally, I found a detailed guide which goes much in depth into this dependency array.

Collectives™ on Stack Overflow

Accessing firestore functions from React useEffect without dependency warning

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related