0

Cant seem to get my head around the right approach for this. Want to get ride of the warning and not by having the inline ignore warning comment. Probably useCallback is in the direction of the solution. I just want to check only once when functional component gets initialised wether if the Store needs, conditionally. Thats all.

Line 72:6: React Hook useEffect has missing dependencies: 'dispatch' and 'storedSlugItems'. Either include them or remove the dependency array react-hooks/exhaustive-deps 

useEffect(() => {
  if (storedSlugItems.length > 0) {
    dispatch(setSlugItems(storedSlugItems));
  }
  // eslint-disable-next-line 
}, []);
San Jay Falcon
  • 993
  • 1
  • 9
  • 20

1 Answers1

1

Just add dispatch to useEffect dependencies:

useEffect(() => {
  if (storedSlugItems.length > 0) {
    dispatch(setSlugItems(storedSlugItems));
  }
}, [dispatch]);

It probably also matters what dispatch is and where it comes from, but adding it to the dependencies should work.

If it is Redux dispatch - the dispatch function reference will be stable as long as the same store instance is being passed to the . Normally, that store instance never changes in an application.

However, the React hooks lint rules do not know that dispatch should be stable, and will warn that the dispatch variable should be added to dependency arrays for useEffect and useCallback. The simplest solution is to do just that - to add it to the dependencies :)

ikos23
  • 4,879
  • 10
  • 41
  • 60
  • i assumed that having empty braces [] indicates only render once, with adding dependencies it will get triggered every re-render: https://stackoverflow.com/questions/62088649/empty-square-brackets-in-javascript – San Jay Falcon Dec 24 '21 at 11:58
  • 1
    const dispatch = useDispatch(); dispatches Redux Store Action – San Jay Falcon Dec 24 '21 at 11:59
  • @SanJayFalcon And that is what I mean by "where dispatch" comes from. E.g. if it is Redux dispatch - it is stable - so you actually won't get the hook running on every re-render. Or you might want to wrap it with useCallback. But it's hard to say - because you do not provide any details ) – ikos23 Dec 24 '21 at 12:01
  • @SanJayFalcon updated my answer with more details – ikos23 Dec 24 '21 at 12:10