Dado que esto está etiquetado con React, dado el código que tiene aquí y el problema que describe, es casi seguro que está vinculando un detector de eventos cada renderizado . Lo que significa que estás terminando con muchos más oyentes de los que deseas. Lo que debe hacer es usar React cuando esté usando React.

Por ejemplo, a continuación, tenemos una entrada que registra cualquier pulsación de tecla y también creamos manualmente un detector de eventos. Al principio, cuando escriba, obtendrá un registro para cada uno. Sin embargo, una vez que haga clic en el botón (activando una nueva representación), comenzará a recibir múltiples eventos "manuales", pero seguirá siendo el único evento de "reacción":

 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>

Esto es algo llamado Event Bubbling que básicamente significa que el evento se activa una vez en cada elemento principal hasta que llega a HTML .

puede obtener más información aquí: https://dev.to/eladtzemach/event-capturing-and-bubbling-in-react-2ffg#:~:text=Event%20Bubbling%20and%20Capturing%20in%20React&text=Bubbling% 20es%20como%20directo%20como,nuestro%20ejemplo%20en%20el%20comienzo .

puede evitar el comportamiento predeterminado, pero generalmente es una buena práctica dejarlo como está si no tiene un uso específico para deshabilitarlo.

del fragmento de código, no veo por qué está etiquetado con reaccionar, pero otra razón de su problema es que puede estar poniendo este código dentro de su función render() o dentro de cualquier función de react life cycle que está causando este fragmento para ejecutar con cada renderizado, dejándolo con un puñado de oyentes no deseados, que no solo es una funcionalidad que no desea, sino también algo que ralentizará su aplicación con el tiempo, es decir. hasta que el usuario actualice la página.