How do I window removeEventListener using React useEffect

by

You can put the handleKeyUp function inside of the function given to useEffect (which is the recommended way of doing it according to the official documentation) and only add the listener and return a cleanup function when collapsed is false.

useEffect(() => {
  if (collapsed) {
    return;
  }

  function handleKeyUp(event) {
    switch (event.key) {
      case "Escape":
        setCollapsed(true);
        break;
    }
  }

  window.addEventListener("keyup", handleKeyUp);
  return () => window.removeEventListener("keyup", handleKeyUp);
}, [collapsed]);

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. How to use `setState` callback on react hooks
  3. How to use callback with useState hook in react [duplicate]
  4. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  5. In useEffect, what’s the difference between providing no dependency array and an empty one?
  6. With useEffect, how can I skip applying an effect upon the initial render?
  7. How to use throttle or debounce with React Hook?
  8. React useReducer async data fetch
  9. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  10. How to sync props to state using React hooks : setState()
  11. useNavigate() may be used only in the context of a component
  12. Testing React components that fetches data using Hooks
  13. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  14. Why React useState with functional update form is needed?
  15. React.useState does not reload state from props
  16. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  17. React: useState or useRef?
  18. How do react hooks determine the component that they are for?
  19. useReducer Action dispatched twice
  20. React Hooks – Modified state not reflecting immediately
  21. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  22. React Hooks – How do I implement shouldComponentUpdate?
  23. React hook rendering an extra time
  24. Field Array in React using formik
  25. How to test a react component that is dependent on useContext hook?
  26. What is the expected return of `useEffect` used for?
  27. ReactJS – prevState in the new useState React hook?
  28. How to create dynamic refs in functional component- Using useRef Hook
  29. React – Is useState ‘s setter function able to change?
  30. Which react hook to use with firestore onsnapshot?

Leave a Comment