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

3

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

edited Feb 13, 2021 at 11:22

answered Feb 13, 2021 at 11:16

Hend El-Sahli

6,8585 gold badges31 silver badges50 bronze badges

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

Comments

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

2

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 (
  ..
)}

edited Feb 13, 2021 at 11:11

answered Feb 13, 2021 at 11:07

Abdelmonaem Shahat

5422 silver badges7 bronze badges

1 Comment

ThiefMaster Over a year ago

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

2

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.

answered Feb 13, 2021 at 11:09

kunquan

1,2671 gold badge12 silver badges25 bronze badges

Comments

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

1

Move changeCount inside useEffect

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

    changeCount();
  },[])

  return (
  ..
  )
}

answered Feb 13, 2021 at 11:04

p1uton

2662 silver badges7 bronze badges

Comments

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

0

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

answered Feb 13, 2021 at 11:05

Stark Jeon

1,1651 gold badge10 silver badges24 bronze badges

2 Comments

ThiefMaster Over a year ago

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

Stark Jeon Over a year ago

I think so :) But it is just some way to solve it

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

TLDR

Answer

Reference

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related