I add an event listener inside useEffect
. It runs once after first rerender due to the useEffect second argument([]
). Then I try to re
The reason it doesn't work is because setPageHeightWrapper
is defined an inline function and when the component re-renders a new instance of it is created and while clearing an event listener you need to pass the same method which was passed while setting the listener.
On the other hand, when a useEffect hook is called it, gets the function reference from its closure and it uses the same reference to clear the listener.
A way to make the removeListener work outside of useEffect is to use useCallback hook
const handleSearch = () => {
window.removeEventListener('resize', memoHeightWrapper);
};
const [pageHeight, setPageHeight] = useState(0);
const memoHeightWrapper = useCallback(() => {
setPageHeight(window.innerHeight);
})
useEffect(() =>{
window.addEventListener('resize', memoHeightWrapper);
return () => {
window.removeEventListener('resize', memoHeightWrapper);
};
}, []);