score:0
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
Source: stackoverflow.com
Related Query
- React warning React Hook useEffect has a missing dependency when the deps are []
- React useEffect hook has a missing dependency warning
- React Hook useEffect has a missing dependency warning
- React Hooks JS Lint warning useEffect has a missing dependency
- React warning - useEffect has a missing dependency
- How to fix missing dependency warning when using useEffect React Hook
- React Hook useEffect has missing dependencies. Either include them or remove the dependency array
- React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps
- react hook useeffect has missing dependencies: yyy. either include them or remove the dependency array react-hooks/exhaustive-deps
- React | React Hook useEffect has a missing dependency
- React Hook useEffect has missing dependencies: 'colors' and 'options'. Either include them or remove the dependency array
- React Hook useEffect has a missing dependency when passing empty array as second argument
- React Hook useEffect has a missing dependency Props
- React Hook useEffect has a missing dependency array
- React Hook useEffect has a missing dependency: 'setValid' . How to remove this warning
- React Hook useEffect has a missing dependency: 'formData'. Either include it or remove the dependency array. what is dependency is use
- React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. props in useEffect have no data
- React Hook useEffect has a missing dependency with useEffect
- warning: React Hook useEffect has a missing dependency
- React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array
- React Hook useEffect has a missing dependency: 'handleLogout'. Either include it or remove the dependency array react
- React Hook useEffect has a missing dependency: 'loading'. Either include it or remove the dependency array react-hooks/exhaustive-deps
- React Hook useEffect has a missing dependency with Useeffect hook. Is it bad practice to ignore this warning?
- React useEffect warning to put missing dependency. But dependency value changes in the hook
- React hooks : useMemo and useEffect has a Missing dependency when we are trying to call a function
- React warning useEffect missing dependency
- React Hook useEffect has a missing dependency. Either include it or remove the dependency array react-hooks/exhaustive-deps
- React Hook useEffect has a missing dependency Either include it or remove the dependency array react-hooks/exhaustive-deps
- React Hook useEffect has a missing dependency
- React Hook useEffect has a missing dependency: 'evaluate'. Either include it or remove the dependency array
More Query from same tag
- React onCLick required is not working ? My page is refreshing
- Firebase Storage - Wait till all upload tasks are completed before executing function
- Persist selection between pagination using fluentui/React in DetailsList
- How to access correct 'this' inside map: ReactJS
- Show button when 2 inputs are full and valid in react native
- How does React's state hold files through use of spread operator?
- setState updating a mounted state
- React, Too many rerenders
- Javascript React: Push to an array in useState
- How to set sate only after fetch is completed with all ids inside the object
- Firebase with react .on listener not working
- Render Image in React using Map
- ' Jest encountered an unexpected token { ' error on react application
- React/Redux - dispatch action on app load/init
- Modifying state through both parent and child component
- How to dynamically load the material-ci-icons icon
- How to pass ref to draw control in react-map-gl
- How to pass props to react component that wrapped in variable
- Socket IO emit events twice
- how to upload images(large files) to server using axios
- Web component is not loading the shadowDOM in one react app's but is loading in a fresh CRA app?
- showin alert before app is reloaded by post request (react)
- Fetch json by ID in React from parent component
- how to get to the key in an array of objects?
- react routing with parcel and router dom 6.3
- Issue Converting react class components to functional components with state is undefined
- React too many re-renders error when trying to use 'useState'
- React read input values from multiple input text fields
- Is it possible to serve Static files with create-react-app from public folder?
- Unit testing entry file in React