useEffect dependency with Context API. My code works fine with empty array but still gives the warning

Question

So. I get clients from context as initialState and the code below is from my listing component (listClients.js or smth) . I update the context with the data fetched from firebase. Everything works fine actully with using empty array as dependency. I get my final array listed on my list component.. But eslint is still saying me that I should add "clientsRef" and "updateClients" into dependency but this causes an infinite loop. So what should I do with that? Close my eyes to this warning?

const { clients, removeClient, updateClients } = useContext(ClientsContext);
const collection = 'clients';
const clientsRef = firestore.collection('clients').orderBy('createdAt', 'desc');


useEffect(() => {

    const unsubscribeFromSnapshot = clientsRef.onSnapshot(async snapshot => {
        const clientsMap = convertSnapshotToMap(snapshot);
        updateClients(clientsMap);     

    });

    return () => {
        unsubscribeFromSnapshot();
    }
}, []);

score 0 · Accepted Answer · answered Jun 01 '20 at 05:40

You can declare the clientsRef within the useEffect and for updateCloients function you can make use of useCallback in the ContextProvider. Once you do that you can add them as a dependency to useEffect

const { clients, removeClient, updateClients } = useContext(ClientsContext);



useEffect(() => {
    const collection = 'clients';
     const clientsRef = firestore.collection('clients').orderBy('createdAt', 'desc');
    const unsubscribeFromSnapshot = clientsRef.onSnapshot(async snapshot => {
        const clientsMap = convertSnapshotToMap(snapshot);
        updateClients(clientsMap);     

    });

    return () => {
        unsubscribeFromSnapshot();
    }
}, []);

In ClientContext Provider

const updateClients = useCallback(() => {
   // logic here
}, []);

However if you are sure that you just want the logic within useEffect to run once and not anytime later, you can disable the warning with

// eslint-disable-next-line react-hooks/exhaustive-deps

Ex:

useEffect(() => {

    const unsubscribeFromSnapshot = clientsRef.onSnapshot(async snapshot => {
        const clientsMap = convertSnapshotToMap(snapshot);
        updateClients(clientsMap);     

    });

    return () => {
        unsubscribeFromSnapshot();
    }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

For more details please check this post:

How to fix missing dependency warning when using useEffect React Hook?

Works like a charm! Thanks. useCallback rocks. Only [updateClients] was enough after doing as you said. — user3080042, Jun 01 '20 at 06:05

useEffect dependency with Context API. My code works fine with empty array but still gives the warning

1 Answers1