如何使用带有外部依赖项的 React useCallback 和 useEffect

Question

I am trying to follow react-plugin-react-hooks.

I have a useEffect which adds an event listener to the window ( onScroll ). onScroll makes use of window.pageYOffset .

function onScroll() {
    if (window.pageYOffset > 0) {
      setFoor(bar)
    } else {
      setFoor(baz)
    }
  }

Now in the useEffect I have:

useEffect(() => {
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, []);

This was following the idea initially supported recommendation that if you pass an empty dependency array, it's like componentDidMount . But the React docs clearly say that you should either pass no dependencies (not even empty array), or all dependencies (which refer to props or state). ( https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies ) So that would look like:

useEffect(() => {
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [onsScroll]);

But that means I have to use useCallback for onScroll or it will always have a different depenedency. But the useCallback "dependency" for onScroll would be window.pageYOffset , but that doesn't work, ie:

function onScroll = React.useCallback(() => {
    if (window.pageYOffset > 0) {
      setFoor(bar)
    } else {
      setFoor(baz)
    }
  }, [window.pageYOffset])

My general question, is how do you deal with useEffect / useCallback functions that had outside dependencies? (Besides ignore the warning.)

Thanks

I also tried moving onScroll definition entirely inside the useEffect but it doesn't update properly.

useEffect(() => {
    function onScroll() {
      if (window.pageYOffset > 0 && !slim) {
        setSlim(true);
      } else {
        setSlim(false);
      }
    }
    window.addEventListener('scroll', onScroll, onScrollOptions);
    onScroll();
    getAccountAction();
    return () => {
      window.removeEventListener('scroll', onScroll, onScrollOptions);
    };
  }, []);

Answer 1

Dependencies should be props or state, here you have a class method defined as a dependency, in your case I suppose you want to mount the event listener with a effect similar to componentDidMount, you can achieve that by setting an empty array as a dependency. In this case this is not wrong as the logic in the effect doesn't use any variables in the component scope.

In the event handler I would change state by setting the value of the pageoffset and in the other effect use that state as the dependency

Answer 2

Even if you define scroll handler inside useEffect , you're still accessing the offset from outside, which you need to track inside the dependencies array as well as the slim state var.

Your onScroll function can be simplified by using functional form of setState , in which case you won't need to track slim state variable anymore:

useEffect(() => {
  function onScroll() {
    setSlim(currentSlim => window.pageYOffset > 0 && !currentSlim)
  }

  window.addEventListener('scroll', onScroll, onScrollOptions);
  getAccountAction();
  return () => {
    window.removeEventListener('scroll', onScroll, onScrollOptions);
  };
}, [window.pageYOffset]);