How to register event with useEffect hooks?

by

The best way to go about such scenarios is to see what you are doing in the event handler.

If you are simply setting state using previous state, it’s best to use the callback pattern and register the event listeners only on initial mount.

If you do not use the callback pattern, the listeners reference along with its lexical scope is being used by the event listener but a new function is created with updated closure on each render; hence in the handler you will not be able to access the updated state

const [userText, setUserText] = useState("");
const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;
    if(keyCode === 32 || (keyCode >= 65 && keyCode <= 90)){
        setUserText(prevUserText => `${prevUserText}${key}`);
    }
}, []);

useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
        window.removeEventListener("keydown", handleUserKeyPress);
    };
}, [handleUserKeyPress]);

  return (
      <div>
          <h1>Feel free to type!</h1>
          <blockquote>{userText}</blockquote>
      </div>
  );

More Related Contents:

  1. Where can I make API call with hooks in react?
  2. How can I force a component to re-render with hooks in React?
  3. How to prevent re-rendering of components that have not changed?
  4. What is useState() in React?
  5. Do we still need functional setState way in react hooks?
  6. What is component in reactjs?
  7. The useState set method is not reflecting a change immediately
  8. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  9. How can I use multiple refs for an array of elements with hooks?
  10. Invalid hook call. Hooks can only be called inside of the body of a function component
  11. Can I set state inside a useEffect hook
  12. How to call an async function inside a UseEffect() in React?
  13. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  14. Is there a generic way to set state in React Hooks? How to manage multiple states?
  15. React Function Components with hooks vs Class Components
  16. React hooks: accessing up-to-date state from within a callback
  17. React Hooks – What’s happening under the hood?
  18. React.createClass vs. ES6 arrow function
  19. Is it an anti-pattern to define a function component inside the render() function?
  20. unable to scroll in scrollView
  21. How to clear react-native cache?
  22. Next.js context provider wrapping App component with page specific layout component giving undefined data
  23. Determine which dependency array variable caused useEffect hook to fire
  24. React hooks: call component as function vs render as element
  25. React hooks useState setValue still rerender one more time when value is equal
  26. Updating state to the same state directly in the component body
  27. Component won’t update when a redux state change occurs
  28. useMemo vs. useEffect + useState
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment