Sfrgttk

Following some Udemy course on how to register events with hooks, the instructor gave the below code:

  const [userText, setUserText] = useState('');



  const handleUserKeyPress = event => {

    const { key, keyCode } = event;



    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {

      setUserText(`${userText}${key}`);

    }

  };



  useEffect(() => {

    window.addEventListener('keydown', handleUserKeyPress);



    return () => {

      window.removeEventListener('keydown', handleUserKeyPress);

    };

  });



  return (

    <div>

      <h1>Feel free to type!</h1>

      <blockquote>{userText}</blockquote>

    </div>

  );

Now it works great but I'm not convinced that this is the right way. The reason is, if I understand correctly, on each and every re-render, events will keep registering and deregistering every time and I simply don't think is the right way to go about it.

So I made a slight modification to the useEffect hooks to below

useEffect(() => {

  window.addEventListener('keydown', handleUserKeyPress);



  return () => {

    window.removeEventListener('keydown', handleUserKeyPress);

  };

}, []);

By having an empty array as the second argument, letting the component to only run the effect once, imitating componentDidMount. And when I try out the result, it's weird that on every key I type, instead of appending, it's overwritten instead.

I was expecting setUserText(${userText}${key}); to have new typed key append to current state and set as a new state but instead, it's forgetting the old state and rewriting with the new state.

Was it really the correct way that we should register and deregister event on every re-render?

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, its best to use the callback pattern and register the event listeners only on initial mount. If you do not use the callback pattern the 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 new render and hence in the handler you will not be able to the updated state

const [userText, setUserText] = useState('');



  const handleUserKeyPress = 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);

    };

  }, []);



  return (

    <div>

      <h1>Feel free to type!</h1>

      <blockquote>{userText}</blockquote>

    </div>

  );

You'll need a way to keep track of the previous state. useState helps you keep track of the current state only. From the docs, there is a way to access the old state, by using another hook.

const prevRef = useRef();

useEffect(() => {

  prevRef.current = userText;

});

I've updated your example to use this. And it works out.

const { useState, useEffect, useRef } = React;



const App = () => {

  const [userText, setUserText] = useState("");

  const prevRef = useRef();

  useEffect(() => {

    prevRef.current = userText;

  });



  const handleUserKeyPress = event => {

    const { key, keyCode } = event;



    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {

      setUserText(`${prevRef.current}${key}`);

    }

  };



  useEffect(() => {

    window.addEventListener("keydown", handleUserKeyPress);



    return () => {

      window.removeEventListener("keydown", handleUserKeyPress);

    };

  }, []);



  return (

    <div>

      <h1>Feel free to type!</h1>

      <blockquote>{userText}</blockquote>

    </div>

  );

};



ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

In the second approach, the useEffect is bound only once and hence the userText never gets updated. One approach would be to maintain a local variable which gets updated along with the userText object on every keypress.

  const [userText, setUserText] = useState('');

  let local_text = userText

  const handleUserKeyPress = event => {

    const { key, keyCode } = event;



    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {

      local_text = `${userText}${key}`;

      setUserText(local_text);

    }

  };



  useEffect(() => {

    window.addEventListener('keydown', handleUserKeyPress);



    return () => {

      window.removeEventListener('keydown', handleUserKeyPress);

    };

  }, []);



  return (

    <div>

      <h1>Feel free to type!</h1>

      <blockquote>{userText}</blockquote>

    </div>

  );

Personally I don't like the solution, feels anti-react and I think the first method is good enough and is designed to be used that way.

try this, it works same as your original code:

useEffect(() => {

  function handlekeydownEvent(event) {

    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {

      setUserText(`${userText}${key}`);

    }

  }



  document.addEventListener('keyup', handlekeydownEvent)

  return () => {

    document.removeEventListener('keyup', handlekeydownEvent)

  }

}, [userText])

because in your useEffect() method, it depends on the userText variable but you don't put it inside the second argument, else the userText will always be bound to the initial value '' with argument [].

you don't need to do like this, just want to let you know why your second solution doesn't work.

you dont have access to the changed useText state. you can comapre it to the prevState. store the state in a variable e.g.: state like so:

  const [userText, setUserText] = useState('');

  let state = ''



  const handleUserKeyPress = event => {

    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {

      state += `${key}`

      setUserText(state);

    }   

  };  



  useEffect(() => {

    window.addEventListener('keydown', handleUserKeyPress);

    return () => {

      window.removeEventListener('keydown', handleUserKeyPress);

    };  

  }, []);



  return (

    <div>

      <h1>Feel free to type!</h1>

      <blockquote>{userText}</blockquote>

    </div>

  );