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

Question

can anyone help me to get rid of this warning

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

here is my code

function Register(props) {
  const inusers=useSelector( (state) => {return state});
  const history=useHistory()
  const dispatch=useDispatch();
  // const formik = useFormikContext();


  useEffect( () => {
    dispatch(fetchUser())
  },[])

Does this answer your question? [How to fix missing dependency warning when using useEffect React Hook](https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook) — programandoconro, Oct 19 '21 at 08:21

AndreaCostanzo1 · Answer 1 · 2021-10-19T08:30:35.043

20

Just add dispatch among the dependencies:

  useEffect(() => {
       dispatch(fetchUser())
  },[dispatch])

Dispatch is a safe dependency to add and it won't cause infinite loops. For more insights on why dispatch can change (and when it can change) check:

What are the cases where Redux dispatch could change?

UPDATE: from react-redux documentation

edited Oct 19 '21 at 08:30

answered Oct 19 '21 at 07:55

AndreaCostanzo1

1,799
1
12
30

When you add dispatch to dependencies array it triggers twice – geffting May 17 '22 at 15:42
@geffting Are you updating the store for some reason? Or do you have any upper render that you are missing? Check carefully, because the docs are clear about it and if you inspect the code of the hook on github (https://github.com/reduxjs/react-redux/blob/master/src/hooks/useDispatch.ts) you can see that dispatch is directly taken from the store. – AndreaCostanzo1 May 18 '22 at 08:16

Ferin Patel · Answer 2 · 2021-10-19T08:12:32.847

1

You can write comment above useEffect dependency eslint-disable-next-line react-hooks/exhaustive-deps and it will stop complaining.

React guarantees that dispatch function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

So its safe to ignore this warning.

function Register(props) {
  const inusers=useSelector( (state) => {return state});
  const history=useHistory()
  const dispatch=useDispatch();
  // const formik = useFormikContext();


  useEffect( () => {
    dispatch(fetchUser())

    // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])

edited Oct 19 '21 at 08:12

answered Oct 19 '21 at 07:58

Ferin Patel

3,424
2
17
49

1

I wouldn't suggest simply tell ESLint to ignore the issue. In most cases is not a problem, but if the underlying store changes for any reason it might cause issues – AndreaCostanzo1 Oct 19 '21 at 08:10
1

@AndreaCostanzo1 React guarantees that dispatch function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list. – Ferin Patel Oct 19 '21 at 08:12
we aren't using react use reducer but react-redux use dispatch! As you can see from the source code (https://github.com/reduxjs/react-redux/blob/master/src/hooks/useDispatch.ts) we are returning store.dispatch. What if the underlying store is changed? – AndreaCostanzo1 Oct 19 '21 at 08:24
I have updated my post to specify what I'm saying and added a link to the docs – AndreaCostanzo1 Oct 19 '21 at 08:31
1

That's what I ended up doing. I don't want to put into the dependency array all the functions defined in other files that can never change anyway, as putting them all in there would obfuscate the real dependencies. – Shautieh Apr 04 '23 at 12:08

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

2 Answers2