Cada vez que presiono una tecla, el evento keydown se dispara el doble de veces que antes, creó un ejemplo mínimo aquí https://codesandbox.io/s/epic-goldstine-sy852 . Sé que puedo eliminar la amount
de las dependencias de las devoluciones de llamada, pero hago muchas operaciones cuando se presiona una tecla y las reutilizo en toda mi aplicación, donde la cantidad puede provenir de useState, useReducer o de otro lugar.
export default function App() { const [amount, updateAmount] = React.useState(0); return ( <div className="App"> <Text disableDecimal={true} amount={amount} updateAmount={updateAmount} /> </div> ); } export default function Text({ amount, updateAmount }) { const keydown = React.useCallback( ({ repeat, key }) => { if (repeat) return; console.log(key); if (!Number.isNaN(key)) updateAmount(parseFloat(amount.toString() + key)); }, [amount, updateAmount] ); React.useEffect(() => { window.addEventListener("keydown", keydown); () => { window.removeEventListener("keydown", keydown); }; }, [keydown]); return ( <div> <h1>{amount}</h1> </div> ); }
Olvidaste return
antes de desmontar la devolución de llamada
debería ser así:
React.useEffect(() => { window.addEventListener("keydown", keydown); return () => { window.removeEventListener("keydown", keydown); }; }, [keydown]);