Cannot remove an event listener outside useEffect

后端 未结 1 888
北海茫月
北海茫月 2021-02-14 01:02

I add an event listener inside useEffect. It runs once after first rerender due to the useEffect second argument([]). Then I try to re

相关标签:
1条回答
  • 2021-02-14 01:35

    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);
      };
    }, []);
    
    0 讨论(0)
提交回复
热议问题