React Hook useEffect 缺少依赖项：'formValues'。 包括它或删除依赖数组 react-hooks/exhaustive-deps

Question

I am trying to update my reducer every time a useSelector change its value, but I need to use the spread operator to keep the rest of the content of my reducer. But my useEffect gives the following warning:

React Hook useEffect has a missing dependency: 'formValues'. Either include it or remove the dependency array react-hooks/exhaustive-deps.

Is there a way to avoid this warning and keep the rest of state of my reducer?

My code useEffect code:

 const handleDispatch = useCallback( values => { dispatch(hrRequestHiringFormChangeValues(values)); }, [dispatch] ); useEffect(() => { if (cepAddressValues.error !== true) { handleDispatch({ ...formValues, state: cepAddressValues.state, city: cepAddressValues.city, neighborhood: cepAddressValues.neighborhood, address: cepAddressValues.street, }); } else { handleDispatch({ ...formValues, state: '', city: '', neighborhood: '', address: '', }); } }, [cepAddressValues, handleDispatch]);

Answer 1

in dependency array of hooks like useEffect, useCallback, useMemo you have to place all variables that are declared outside of this hook and you used it inside of hook function. In this case you use formValues in handleDispatch inside useEffect but you don't place it in dependency array.

[cepAddressValues, handleDispatch, formValues]

Answer 2

Disable react-hooks/exhaustive-deps inline

(make sure that dependency is not required)

  useEffect(() => {
    if (cepAddressValues.error !== true) {
      handleDispatch({
        ...formValues,
        state: cepAddressValues.state,
        city: cepAddressValues.city,
        neighborhood: cepAddressValues.neighborhood,
        address: cepAddressValues.street,
      });
    } else {
      handleDispatch({
        ...formValues,
        state: '',
        city: '',
        neighborhood: '',
        address: '',
      });
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cepAddressValues, handleDispatch]);

Check, is exist react-hooks plugin in eslint plugins Thanks