CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Adam Palmer
Adam Palmer

Reputation: 241

React useState doesn't update in window events

State does get set on the scroll, but logged from the eventlistener, it seems to be stuck at the initial value.

I guess it's something to do with scrolling being set when the side effect's defined, but how could I trigger a state change from a scroll otherwise? Same goes for any window event I presume.

Here's a codesandbox example: https://codesandbox.io/s/react-test-zft3e 

  const [scrolling, setScrolling] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", () => {
      console.log(scrolling);
      if (scrolling === false) setScrolling(true);
    });
  }, []);

  return (
    <>
      scrolling: {scrolling}
    </>
  );

Upvotes: 23

Views: 13171

Answers (3)

skyboyer
skyboyer

Reputation: 23695

So your anonymous function is locked on initial value of scrolling. It's how closures works in JS and you better find out some pretty article on that, it may be tricky some time and hooks heavily rely on closures.

So far there are 3 different solutions here:

1. Recreate and re-register handler on each change

useEffect(() => {
    const scrollHandler = () => {
      if (scrolling === false) setScrolling(true);
    };
    window.addEventListener("scroll", scrollHandler);
    return () => window.removeEventListener("scroll", scrollHandler);
  }, [scrolling]);

while following this path ensure your are returning cleanup function from useEffect. It's good default approach but for scrolling it may affect performance because scroll event triggers too often.

2. Access data by reference

const scrolling = useRef(false);

  useEffect(() => {
    const handler = () => {
      if (scrolling.current === false) scrolling.current = true;
    };
    window.addEventListener("scroll", handler);
    return () => window.removeEventListener("scroll", handler);
  }, []);

  return (
    <>
      scrolling: {scrolling}
    </>
  );

downside: changing ref does not trigger re-render. So you need to have some other variable to change it triggering re-render.

3. Use functional version of setter to access most recent value

(I see it as preferred way here):

useEffect(() => {
    const scrollHandler = () => {
      setScrolling((currentScrolling) => {
        if (!currentScrolling) return true;
        return false;
      });
    };
    window.addEventListener("scroll", scrollHandler);
    return () => window.removeEventListener("scroll", scrollHandler);
}, []);

Note Btw even for one-time use effect you better return cleanup function anyway.

PS Also by now you don't set scrolling to false, so you could just get rid of condition if(scrolling === false), but sure in real world scenario you may also run into something alike.

Upvotes: 41

danielm2402
danielm2402

Reputation: 778

A solution that has personally served me well when I need to access a state (getState and setState) in an eventListener, without having to create a reference to that state (or all the states it has), is to use the following custom hook:

export function useEventListener(eventName, functionToCall, element) {
  const savedFunction = useRef();

  useEffect(() => {
    savedFunction.current = functionToCall;
  }, [functionToCall]);

  useEffect(() => {
    if (!element) return;
    const eventListener = (event) => savedFunction.current(event);
    element.addEventListener(eventName, eventListener);
    return () => {
      element.removeEventListener(eventName, eventListener);
    };
  }, [eventName, element]);
}

What I do is make a reference to the function to be called in the eventListener. in the component where I need an eventLister, it will look like this:

useEventListener("mousemove", getAndSetState, myRef.current); //myRef.current can be directly the window object 

function getAndSetState() {
    setState(state + 1);
  }

I leave a codesandbox with a more complete code

Upvotes: 0

Joe Lloyd
Joe Lloyd

Reputation: 22323

The event listener callback is only initialized once

This means that the variable at that moment are also "trapped" at that point, since on rerender you're not reinitializing the event listener.

It's kind of like a snapshot of the on mount moment.

If you move the console.log outside you will see it change as the rerenders happen and set the scroll value again.

  const [scrolling, setScrolling] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", () => {
      if (scrolling === false) setScrolling(true);
    });
  }, []);

  console.log(scrolling);

  return (
    <>
      scrolling: {scrolling}
    </>
  );

Upvotes: 7

Related Questions