Handling memory leaks in a React component with useEffect and event listeners
I'm having trouble with I'm experiencing a memory leak in my React component when I add an event listener. The component is using `useEffect` to set up and clean up the listener, but I'm still seeing a React warning about a memory leak, specifically: \n\n`Warning: need to perform a React state update on an unmounted component.`\n\nHere’s the relevant part of my code: \n\n```javascript\nimport React, { useEffect, useState } from 'react';\n\nconst MyComponent = () => {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n const handleScroll = () => {\n setCount(prevCount => prevCount + 1);\n };\n window.addEventListener('scroll', handleScroll);\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n }, []);\n\n return <div>Scroll Count: {count}</div>;\n};\n\nexport default MyComponent;\n```\n\nThe cleanup function is supposed to remove the event listener, but for some reason, I'm still working with this scenario when navigating away from the component. I've tried ensuring that the cleanup function is being called by logging messages in both the effect and cleanup, and they show up correctly. I've also checked that the component unmounts properly, but the warning continues.\n\nAm I missing something in how I handle the state update within the event listener? Or is there a specific case where this pattern can still lead to memory leaks? Any advice would be greatly appreciated! Has anyone else encountered this?