React Hook useEffect has a missing dependency for empty array dependency

Question

I am getting missing dependency warning.

React Hook useEffect has a missing dependency: 'fetchFeatured'. Either include it or remove the dependency array

My Code

useEffect(() => {
        const fetchFeatured = () => {
            onSnapshot(faeturedCollectionRef, (snapshot) =>
                setFeatured(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
            )
        }
        fetchFeatured();
    }, [])

I have used empty array for avoiding loop.

Go through this thread https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook and see if it helps? — Akshit Mehra, Jun 08 '22 at 15:27

score 1 · Answer 1 · edited Jun 12 '22 at 13:45

1

you can avoid the waring by disabling it with a comment like this

 useEffect(() => {
    const fetchFeatured = () => {
        onSnapshot(faeturedCollectionRef, (snapshot) =>
            setFeatured(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
        )
    }
    fetchFeatured();
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

edited Jun 12 '22 at 13:45

Kevin Chavez

949
1
11
27

answered Jun 08 '22 at 15:31

Adarsh P

11
2

score 0 · Accepted Answer · answered Jun 08 '22 at 15:31

The main purpose of the this warning is to prevent the developers from missing dependencies inside their effect and lost some behavior or unintended effect. In this case, you can

Just ignore it.
Suppress that rule for the entire project: Go to .eslintrc file and change 'react-hooks/exhaustive-deps': 'warn' to 'react-hooks/exhaustive-deps': 'off'
Supress the rule only in this instance:

useEffect(() => {
    const fetchFeatured = () => {
        onSnapshot(faeturedCollectionRef, (snapshot) =>
            setFeatured(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
            )
        }
        fetchFeatured();
// eslint-disable-line react-hooks/exhaustive-deps
}, [])

React Hook useEffect has a missing dependency for empty array dependency

2 Answers2