score:0

Accepted answer

in your component definition, every time it re-renders, you're re-creating the variable initfoo.

react hook linting isn't smart enough to figure out this case. it says "hey, i see you're creating a new object every time your component renders. however, you don't update your useeffect callback, which only is set once. so if your initfoo changes without your useeffect changing, then your useeffect could end up setting an old value of initfoo, causing bugs."

in your case, initfoo is the "same" every time. moving initfoo outside of the component definition stops it from being re-created on every component render, so react hook linting sees that it can never change, so the useeffect callback could never become "stale" based on the value of initfoo changing.

another option is to inline the use of initfoo:

usestate({ attrone: '', ... });

which may be inconvenient here if you need to duplicate the result in useeffect.

this is also a warning, not an error, which you can ignore if you prefer to keep the declaration inside the component body for some reason. you can disable any eslint rule with comments, if you want to ignore this warning, put this line above your useeffect call:

// eslint-disable-next-line react-hooks/exhaustive-deps

Related Query

More Query from same tag