How to clean up event listener inside useCallback

Question

const ref = useCallback((node) => {
 if (node) {
  // ...intersection observer code goes here
 }
}, []);

return <div ref={ref} />

I use useCallback hook to setup intersection observer listener once ref 's node is available. My question is what is the correct way to kill intersection observer when component unmounts?

Answer 1

move your listeners to useEffect hook