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 stackoverflow.com/questions/55840294/… and see if it helps? — Akshit Mehra
– Akshit Mehra, Commented Jun 8, 2022 at 15:27

Kevin Chavez · Accepted Answer · 2022-06-12 13:45:40Z

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, 2022 at 13:45

Kevin Chavez

1,0311 gold badge12 silver badges28 bronze badges

answered Jun 8, 2022 at 15:31

Adarsh P

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anuj Sharma · Accepted Answer · 2022-06-08 15:31:39Z

0

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
}, [])

answered Jun 8, 2022 at 15:31

Anuj Sharma

3942 silver badges8 bronze badges

Collectives™ on Stack Overflow

React Hook useEffect has a missing dependency for empty array dependency

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related