Home
Support Forums

Event listener in production on netlify

Hello everyone

I have a calculator react app. I have an event listener added on the document to listen for keyboard events like this:

  useEffect(() => {
    document.addEventListener('keyup', keyboardInputHandler);
    return document.removeEventListener('keyup', keyboardInputHandler);
  }, [])

However, this event listener is working on my localhost, everything is fine. But when I deploy it on netlify it does not work anymore. No errors, no nothing. Simply ignores keyboard inputs.

My Github repo

Live demo deployed on Netlify

Hi @BSlaven

I am seeing key presses logged to console.

Have you made updates since posting to get this working?

I have resolved the issue in the meantime.

In the useEffect I had to return a function that returns removal of the event listener.

LIke this:

useEffect(() => {
    window.addEventListener('keyup', keyboardInputHandler);
    return () => window.removeEventListener('keyup', keyboardInputHandler);
  })

I don’t like leaving useEffect without a dependency array, so I have this option as well:

useEffect(() => {
    window.addEventListener('keyup', keyboardInputHandler);
    return () => window.removeEventListener('keyup', keyboardInputHandler);
  }, [keyboardInputHandler])
1 Like