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 · Accepted Answer · 2020-05-21 16:33:39Z

1

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.

answered May 21, 2020 at 16:33

Muhammad Ali

2,6582 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zachary Haber Over a year ago

As a note, dispatch is already stable, so it's fine to include in the dependency array

Collectives™ on Stack Overflow

useEffect() React Hook Dependency Array lint rule

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related