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

Question

How can I fix this warning?

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

  useEffect(() => {
    if (!loading && data) {
      dispatch(action.TODO(data));
    }
  }, [data, dispatch]);

It tells you how to fix it: Either include loading to your dependency array or remove the array. — tkausl

fortunee fortunee · Accepted Answer · 2021-04-20T23:27:10

You add a dependency to a useEffect hook by specifying it in the second argument array.

Like this.

useEffect(() => {
  if (!loading && data) {
     dispatch(action.TODO(data));
  }
}, [data, dispatch, loading]);