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

0
votes

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]);
2
javascriptreactjsreact-redux

2 Answers

0
votes

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]
0
votes

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