React Hook useEffect has missing dependencies Either include them or remove the dependency array react-hooks/exhaustive-deps

Question

I have this alert on console:

React Hook useEffect has missing dependencies: 'clearClient', 'clearProductEdit', 'clearProducts', 'client', 'productEdit', and 'rows'. Either include them or remove the dependency array react-hooks/exhaustive-deps

clearClient,ClearProducts and clearProductsEdit are similar functions, which return the initial value of my reducer

The function is working normally, however I would like to resolve this alert, am I using useEffect incorrectly? How can I solve this?

My useEffect:

useEffect(() => {
        return () => {
            clearClient(client)
            clearProducts(rows)
            clearProductEdit(productEdit)
        }
    }, [])

My clearClient function:

  function clearClient(c) {
        dispatch({
            type: 'CLEAR_CLIENT',
            payload: { row: c },
        })
    }

On my reducer,the initialState is:

const initialState = {
    client: {
        name: '',
        id: '',
        dateBirth: '',
        cpf: '',
        address: {
            street: '',
            number: '',
            district: '',
            city: '',
            cep: '',
            uf: '',
            complement:'',
            phone: '',
        },
    },
}

And the case of CLEAR_CLIENT:

 case 'CLEAR_CLIENT':
            return {
                ...state,
                client: {
                    name: '',
                    id: '',
                    dateBirth: '',
                    cpf: '',
                    address: {
                        street: '',
                        number: '',
                        district: '',
                        city: '',
                        cep: '',
                        uf: '',
                        complement:'',
                        phone: '',
                    },
                },
            }

Does this answer your question? [How to fix missing dependency warning when using useEffect React Hook](https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook) — lawrence-witt, Aug 19 '21 at 14:38
No,it doesn't, the question is sent me is about a fetch,i'm using react-redux useDispatch hook — Lucas Álvares, Aug 19 '21 at 14:41
@lawrence-witt The question you sent is wrapping the fetch inside use effect, this is fine on the situation demonstrated there, but here we have a hook, you cannot use useDispatch(i assume the OP is using it) inside functions, only components, the solution i gave answers better the issue than the link you sent — pablo henrique, Aug 19 '21 at 14:49

score 2 · Accepted Answer · answered Aug 19 '21 at 14:38

I recommend you to use the store variable outside the React component, like this


    useEffect(() => {
        return () => {
            store.dispatch({
                type: 'CLEAR_CLIENT'
            })

            store.dispatch({
                type: 'CLEAR_PRODUCTS'
            })

            store.dispatch({
                type: 'CLEAR_PRODUCTS_EDIT'
            })
        }
    }, [])

As you are cleaning the store, you don't need to send payload, feel free to change the type namings to the ones you use on your code.

didn't know hooks inside useEffect caused this alert, your solution worked, thanks! — Lucas Álvares, Aug 19 '21 at 14:53

React Hook useEffect has missing dependencies Either include them or remove the dependency array react-hooks/exhaustive-deps

1 Answers1