useEffect has a missing dependency: 'dispatch'

Question

I am using Reactjs and Redux.

//constants
const dispatch = useDispatch();

//useEffects
useEffect(() => {
  if (!IsEmpty(loggedUser)) {
    dispatch(actions.getUserDetail({ userId: loggedUser.Sid }));
  }
}, [loggedUser]);

Everything is working fine. But I am getting a warning in browser's console :

src/components/EditProfile.js Line 91:6: React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps

I don't know how can I remove this warning.
Please help me !

Does this answer your question? [React Hook useEffect has a missing dependency: 'dispatch'](https://stackoverflow.com/questions/58624200/react-hook-useeffect-has-a-missing-dependency-dispatch) — John Lobo, Mar 25 '22 at 05:29
Some are saying, you can add`dispatch` as dependency array in `useEffect`. Is it safe ? — Abhishek kamal, Mar 25 '22 at 05:37
@JohnLobo The link you provided, is not my answer. Because If I use `useCallback` and move dispatch inside that useCallback then I am getting the same warning. — Abhishek kamal, Mar 25 '22 at 05:46

score 2 · Accepted Answer · answered Mar 25 '22 at 05:31

2

If you want to remove warnings like React Hook useEffect has a missing dependency: 'dispatch' then you can use eslint-disable-next-line in your useEffect.

useEffect(() => {
  if (!IsEmpty(loggedUser)) {
    dispatch(actions.getUserDetail({ userId: loggedUser.Sid }));
  }
  //eslint-disable-next-line
}, [loggedUser]);

answered Mar 25 '22 at 05:31

Dharmik Patel

1,041
6
12

Some are saying, you can add dispatch as dependency array in useEffect. Is it safe ? – Abhishek kamal Mar 25 '22 at 05:39
1

You can add it if you want but sometimes it can cause `infinite loop`. You can check if that happens in your case if doesn't then it's alright you can add `dispatch` to the `dependency array` – Dharmik Patel Mar 25 '22 at 06:04
No issue. Currently, I am using `//eslint-disable-next-line` – Abhishek kamal Mar 25 '22 at 06:06
whatever makes your code work bro! – Dharmik Patel Mar 25 '22 at 06:07
`//eslint-disable-next-line` this is simple. Because I don't want to add dispatch as a dependency array on every file where I have used useEffect and check for infinite loop in every file. – Abhishek kamal Mar 25 '22 at 06:10
that's a good point. But `dispatch` rarely causes `infinite loop` but in the end it depends on your choice either one is fine. – Dharmik Patel Mar 25 '22 at 06:12

useEffect has a missing dependency: 'dispatch'

1 Answers1