React | React Hook useEffect has a missing dependency

Question

I want to update a value in the store ONLY ONCE AT FIRST OPENING when the page is first opened using react hook. For this, I make the second parameter of useEffect '[]' empty list. Nothing prevents it from working, but I get a warning from ESLint rules: React Hook useEffect has a missing dependency: 'changeCount'. Either include it or remove the dependency array react-hooks/exhaustive-deps. How do I remove this warning?

const App = ({UserStore:{setCount, count}}) => { const changeCount = () => { setCount(); } useEffect(() => { changeCount(); },[]) return ( .. )}

Hend El-Sahli · Accepted Answer · 2021-02-13 11:22:21Z

Create a custom hook ...

export const useMountEffect = handler => useEffect(handler, []);

Consume it like

useMountEffect(() => { changeCount(); });

Not only you'll get rid of this warning ... but it'll be more clear that this effect will only be executed onMount ...

Abdelmonaem Shahat · Accepted Answer · 2021-02-13 11:11:06Z

use this syntax to remove this eslint warning before your dependency array like this:

const App = ({UserStore:{setCount, count}}) => { const changeCount = () => { setCount(); } useEffect(() => { changeCount(); // eslint-disable-next-line },[]) return ( .. )}

You shouldn't disable ALL warnings ever. Specify which warning to disable it, and ideally leave a comment in code doing so as well, especially for a warning where the docs claim code triggering it is always wrong...

kunquan · Accepted Answer · 2021-02-13 11:09:08Z

changeCount is a function that is not a setState or hooks. Since you use it in useEffect React will warn you. For the reason why it warns you read this article

Some of the answers above suggest you disable the checking, and I recommend diable only the one you are working on. However, normally you don't need to worry about a warning.

p1uton · Accepted Answer · 2021-02-13 11:04:53Z

Move changeCount inside useEffect

const App = ({UserStore:{setCount, count}}) => { useEffect(() => { const changeCount = () => { setCount(); } changeCount(); },[]) return ( .. ) }

Stark Jeon · Accepted Answer · 2021-02-13 11:05:53Z

TLDR

Fix eslint config "react-hooks/exhaustive-deps"

Answer

It is eslint error with hook, so how about fix eslint config like

{ "plugins": [ // ... "react-hooks" ], "rules": { // ... "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks "react-hooks/exhaustive-deps": "off" // Checks effect dependencies } }

But It can make your hook be wrong action, So the other way you can use /* eslint-disable */

Reference

01. Rules of Hooks - React Document

I think even suggesting to disable that whole rule is a terrible idea.

Collectives™ on Stack Overflow

React | React Hook useEffect has a missing dependency

5 Answers 5

Comments

1 Comment

Comments

Comments

TLDR

Answer

Reference

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

TLDR

Answer

Reference

2 Comments

Related