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 — programandoconro
– programandoconro, Commented Oct 19, 2021 at 8:21

Andrea Costanzo · Accepted Answer · 2021-10-19 08:30:35Z

26

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, 2021 at 8:30

answered Oct 19, 2021 at 7:55

Andrea Costanzo

2,3054 gold badges19 silver badges43 bronze badges

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

2 Comments

geffting Over a year ago

When you add dispatch to dependencies array it triggers twice

Andrea Costanzo Over a year ago

@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 (github.com/reduxjs/react-redux/blob/master/src/hooks/…) you can see that dispatch is directly taken from the store.

Ferin Patel · Accepted Answer · 2021-10-19 08:12:32Z

3

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, 2021 at 8:12

answered Oct 19, 2021 at 7:58

Ferin Patel

4,0193 gold badges19 silver badges50 bronze badges

5 Comments

Andrea Costanzo Over a year ago

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

Ferin Patel Over a year ago

@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.

Andrea Costanzo Over a year ago

we aren't using react use reducer but react-redux use dispatch! As you can see from the source code (github.com/reduxjs/react-redux/blob/master/src/hooks/…) we are returning store.dispatch. What if the underlying store is changed?

Andrea Costanzo Over a year ago

I have updated my post to specify what I'm saying and added a link to the docs

Shautieh Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related