useEffect() React Hook Dependency Array lint rule

Question

The lint rules force me to include 'dispatch' also as a dependency for useEffect().

(If I don't add dispatch as dependency, it throws warning that "React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array.")

Is it okay to list dispatch or any other function as dependency? Is there a better way to use without disabling the lint rule?

useEffect(() => {
    if (debouncedSearchText) {
      dispatch(getUsers(pageIndex, rows, debouncedSearchText));
    }
},[debouncedSearchText, pageIndex, dispatch]);

Muhammad Ali Muhammad Ali · Accepted Answer · 2020-05-21T16:33:39

It's alright to add functions as dependencies, but keep in mind that the functions which are in the hierarchy of your component should be wrapped in useCallback hook, as on re-render it's not going to change the reference unless dependencies given in the useCallback are changed. Library writers already exposes memoized functions so no need to wrap those functions in useCallback.

useEffect() React Hook Dependency Array lint rule

1 Answers