score:1
Accepted answer
you keep registering the listener over and over again. react's documentation regarding usehook
mentions how you can clean up certain things, which is exactly what you need for event listeners:
useeffect(() => {
const listener = function(event) {
// ...
};
document.addeventlistener('keydown', listener);
return () => {
// this function gets called when the "effect wears off"
// which means we need to unregister the listener
document.removeeventlistener('keydown', listener);
};
}, [currentid]);
the [currentid]
makes react only call the hook whenever currentid
changes. react also makes sure that whenever the component gets unmounted, or the hook is about to be re-executed for the same component, that the "cleanup function" gets called. the cleanup function is basically whatever function you return within the hook. if you don't return any, no cleanup function will be called.
Source: stackoverflow.com
Related Query
- React addEventListener issue with useEffect
- React Hook useEffect issue with setState
- can't perform a react state update on an unmounted component issue with useEffect
- React - Issue with useEffect and pagination
- How to call loading function with React useEffect only once
- componentWillUnmount with React useEffect hook
- Issue with babel-jest dependency when running npm start in a React app
- React img tag issue with url and class
- Uncaught TypeError: create is not a function using useEffect React Hook with AJAX request
- Difference between with and without useEffect in react functional component
- Create React App Dependency Issue with Webpack
- CORS Issue with React app and Laravel API
- state inside useEffect refers the initial state always with React Hooks
- Having an issue with e.target.value returning Undefined in React
- Unexpected end of JSON on GraphQL query with React while no issue with GraphiQL
- React and typescript with webpack typing issue
- React useEffect cleanup with current props
- Issue with async default value in React Material UI Autocomplete
- React hook useEffect() under the hood. Does an effect scheduled with useEffect block the main thread?
- Jest with React Native getting issue
- CORS issue with Django and React hosted on same server
- setTimeout not clearing with React useEffect hook on mobile devices
- Access old state to compare with new state inside useEffect react hook with custom hooks usePrevious
- React setInterval in useEffect with setTimeout delay
- React and Axios GET request issue with Safari on MacOs and iOs
- React useEffect with useState and setInterval
- asynchronous context with useEffect in React
- Replace of setState callback in react hook with useEffect hooks for complicated scenario not working
- React Hook useEffect : fetch data using axios with async await .api calling continuous the same api
- issue with how to render with react router
More Query from same tag
- Removing the last item of an array with filter won't re-render react component
- Problems with react router trying to redirect users
- Can i set a className in the tables from ant design?
- Value in countUp and even in typography not updating
- Dynamically adding and deleting row in empty ag-grid,first time row is getting deleted, second time throwing error
- Why does on saving the .' .js' file chage the indentation?
- goBack with useHistory react-router-dom firing old result api
- React Test Renderer: findAllByProps return double of what It should find when looking for testID in React Native
- Applying conditional style on click on single element in collection
- pass id through Link in next js with out effecting the url
- How to make a further API call with data from first API call?
- How can pull values from a Json in React?
- React: Advantages for conditionals to check the negative before the affirmative?
- Styled Components Conditional Styling with href value
- How to ensure data is not loaded twice in Redux Saga?
- Can't change state in Material Table header when using remote data
- Next.js dynamic page params for static export
- Customizing/Disabling Material-UI Dialog's Touch Mechanics
- Display message for n seconds after AJAX response
- React: State update delay
- Some route of navlinks always remain active
- How to implement scroll & card-stack like animation in React / TailwindCSS?
- I need to position image at the bottom of the background image and have them stay in place when window is resized
- Apply Multiple filter in redux action
- Passing a function works, but doesn't change the variable
- react leaflet basic tutorial map do not display map correctly
- Why I have errors in React with load data from database Postgresql?
- How to debounce createAsyncThunk from Redux Toolkit
- react-hook-form Controller onBlur callback not triggering validation
- How to change color of fontawesome icons in modular css React