CODEWITHSUNDEEP
reactjsreact-hookseslintuse-effect
Ganesh Krishna
Ganesh Krishna

Reputation: 714

useEffect() React Hook Dependency Array lint rule

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]);

Upvotes: 1

Views: 419

Answers (1)

Muhammad Ali
Muhammad Ali

Reputation: 2648

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.

Upvotes: 1

Related Questions