CODEWITHSUNDEEP
javascriptreactjs
Vivaan4
Vivaan4

Reputation: 113

keydown firing multiple times when keydown (reactjs)

I am adding an event listener and checking if its level 1, but when I press the space key once, it fires 50times or more. Please help

document.addEventListener("keyup", function(e) {
    if(level === 1){
      if(e.code === "Space") {
        console.log('space press');
        click1();
      }
    }
  });

Upvotes: 3

Views: 2335

Answers (3)

Narek Grigoryan
Narek Grigoryan

Reputation: 449

useEffect(() => {
    const handleEscape = (event) => {
        if (event.keyCode === 27) {
            console.log('Hello')
        }
    };
    window.addEventListener('keydown', handleEscape);

    return () => {
        window.removeEventListener('keydown', handleEscape);
    };
}, []);

Upvotes: 0

Mahmoud Ali
Mahmoud Ali

Reputation: 156

This is something called Event Bubblingwhich basically means that the event gets fired once on each parent element until it reached HTML.

you can learn about it here: https://dev.to/eladtzemach/event-capturing-and-bubbling-in-react-2ffg#:~:text=Event%20Bubbling%20and%20Capturing%20in%20React&text=Bubbling%20is%20as%20straightforward%20as,our%20example%20in%20the%20beginning.

you are able to prevent the default behavior but it's generally a good practice to leave it as is if you don't have a specific use for disabling it.

from the code snippet, I don't see why is this tagged with react but another reason for your problem is that you may be putting this code inside of your render() function or inside of any react life cycle function which is causing this snippet to run with each rerender leaving you with a punch of unwanted listeners which is not only functionality you don't want but also something that will slow down you app overtime ie. until the user refresh the page.

Upvotes: 1

dave
dave

Reputation: 64667

Since this is tagged with React, given the code you have here and the issue you describe, it is almost certain that you are binding an event listener every render. Which means you are ending up with way more listeners than you want. What you need to do is use React when you are using React.

For example below, we have an input that logs on any keypress, and we also manually create an event listener. At first, when you type, you will get one log for each. However, once you click the button (triggering a rerender), you will start getting multiple "manual" events, but still the single "react" event:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }
  
  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }
  
  render() {
    document.addEventListener("keyup", function(e) {
        console.log('manual space press');
    });
    return <div onKeyUp={(e) => {
        console.log('React: space press');
    }}>
        <button onClick={() => this.inc()}>{this.state.count}</button>
        <input />
    </div>
  }
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Upvotes: 2

Related Questions