👀 Views: 1902 💬 Answers: 1 📅 Created: 2025-06-12

react useEffect event-listeners performance memory-leak JavaScript

I'm testing a new approach and I just started working with I'm working with an scenario with event listeners in my React application... I have a component that listens for mouse movements and updates the state accordingly, but it seems that every time the component re-renders, I'm getting multiple event listeners added, causing performance degradation and unexpected behavior. I suspect a memory leak or that the state updates are not being managed correctly. Here's the setup: ```javascript import React, { useEffect, useState } from 'react'; const MouseTracker = () => { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const handleMouseMove = (event) => { setMousePosition({ x: event.clientX, y: event.clientY }); }; useEffect(() => { window.addEventListener('mousemove', handleMouseMove); return () => { // Cleanup function to remove the event listener window.removeEventListener('mousemove', handleMouseMove); }; }, []); // empty dependency array return <div>Mouse Position: {`(${mousePosition.x}, ${mousePosition.y})`}</div>; }; export default MouseTracker; ``` I thought using the cleanup function in the `useEffect` would prevent multiple listeners, but it appears that each render still binds a new listener instead of removing the old one properly. I've also tried moving `handleMouseMove` outside the component to see if that would help, but that didn’t change anything. When I check the performance tab in Chrome, I see the number of event listeners increasing over time, which I believe is causing the sluggishness. Any ideas on what might be going wrong? I'm using React 17.0.2 and it seems like a common question, but I can’t find a solution that works for my case. The project is a service built with Javascript. Has anyone else encountered this? Any feedback is welcome!