0
98
ViewsPrevent Event Listener firing event multiple times
I am using this event listener to fire an event which basically updates my state of Interval in a useEffect and enabling me to go up and down in my table. The up and down approach working fine for me but its firing the event multiple times. This multiple times firing of event causing the top and down events works slow and slows over all application.
useEffect(() => {
console.log("HAAN MEI WUHI PAPPI HUN");
document.addEventListener("keyup", (e) => {
if (e.shiftKey && e.code === "ArrowRight") {
console.log("shift + right", vjsRef.current.currentTime);
vjsRef.current.currentTime = vjsRef.current.currentTime + 1;
}
else if (e.shiftKey && e.code === "ArrowLeft") {
console.log("fire! left", vjsRef.current.currentTime);
vjsRef.current.currentTime = vjsRef.current.currentTime - 1;
}
});
document.addEventListener("keyup", async(event) => {
if (event.code === "ArrowUp") {
console.log('aj mei upar ');
await props.setSelectInterval(props.selectInterval - 1);
}
if (event.code === "ArrowDown") {
if (props.selectInterval + 1 < props.row.length) {
console.log('asmaan nichay');
props.setSelectInterval(props.selectInterval + 1);
}
}
});
}, []);
3 answers
Answer question0
In order to make sure listeners are only added once, one thing I do is call removeEventListener before every addListener
console.log("HAAN MEI WUHI PAPPI HUN");
var foo = (e) => {
if (e.shiftKey && e.code === "ArrowRight") {
console.log("shift + right", vjsRef.current.currentTime);
vjsRef.current.currentTime = vjsRef.current.currentTime + 1;
}
else if (e.shiftKey && e.code === "ArrowLeft") {
console.log("fire! left", vjsRef.current.currentTime);
vjsRef.current.currentTime = vjsRef.current.currentTime - 1;
}
}
document.removeEventListener("keyup", foo);
document.addEventListener("keyup", foo);
0
To avoid React adding multiple event listeners from the one useEffect hook, you can return a cleanup function to remove the event listener within the useEffect hook. The cleanup function will run whenever the component unmounts. eg:
useEffect(() => {
const yourFunction = () => {console.log('hi')}
document.addEventListener('keyup', yourFunction)
return () => {
document.removeEventListener('keyup', yourFunction)
}
}, [])
This is ideal for removing event listeners. You can refer the the cleanup section on the React useEffect hook page: https://reactjs.org/docs/hooks-effect.html
0
useEffect(() => {
var foo1 = (e) => {
if (e.code === "ArrowUp") {
if (props.selectInterval - 1 >= 0) {
props.setSelectInterval(props.selectInterval - 1);
}
}
if (e.code === "ArrowDown") {
if (props.selectInterval + 1 < props.row.length) {
props.setSelectInterval(props.selectInterval + 1);
}
}
};
document.addEventListener("keyup", foo1);
return () => {
document.removeEventListener("keyup", foo1);
};
}, [props.selectInterval]);
well this works for me! thanks to both contributors above!