title: React native remove scrollY listener with useEffect hook
body: <pre><code>const [scrollY] = useState(new Animated.Value(0));
  const [scrollYValue, setScrollYValue] = useState(0);
  
  useEffect(() =&gt; {
    scrollY.addListener(({ value }) =&gt; {
      setScrollYValue(value);
    });
    return scrollY.removeAllListeners();
  }, [scrollY, scrollYValue, setScrollYValue]);
  </code></pre>
  <p>The goal is to instantiate an Animated.Value called <code>scrollY</code> and add a listener that will set the current scroll value into state. This scroll value <code>scrollYValue</code> is shared among components so they can do whatever they need to do based on how far the user has scrolled.</p>
  <p>Things work fine if I remove the <code>return scrollY.removeAllListeners();</code> line, but I do actually want to remove the listener when this component unmounts.</p>
  <p>Is this a case where my <code>useEffect</code> dependency array is incorrect? It seems to remove the listener right away and scrollY is just fixed at <code>0</code>.</p>