如何在 React useEffect 挂钩中获取更新的 state 值

Question

I'm listening to a scroll event in a function for a pagination feature. The scroll event is called inside a useEffect hook. When the scroll event is fired, I want to make a HTTP call with a value already set in state, and update that value if the HTTP request is successful.

However, whenever the event fires, it only uses the initial value of the item in state, even though the value has been updated, and I can see the updated value outside of the function.

How do I get the updated value inside the onScroll callback?

Below is a code snippet

 const [test, setTest] = useState(0);

  // The below commented out code works because it's not inside useEffect
  // window.addEventListener('scroll', () => requestAnimationFrame(() => {
  //   console.log(test);
  //   setTest(test + 1);
  // }));

  useEffect(() => {
    window.addEventListener('scroll', () => requestAnimationFrame(() => {
      console.log(test); // this always returns 0
      setTest(test + 1);
    }));
  }, [])

  console.log(test); // this returns the updated/correct value.

Answer 1

By providing an empty array as the second argument to the effect, you've told react to never recreate this effect. So it happens just once, and the variables it has in its closure are never going to change.

Option 1:

You can get the effect to rerun by either removing the dependency array, or populating it with the variables you care about. Since this will result in the effect running multiple times you will also need to provide a cleanup function for tearing down the previous effect.

useEffect(() => {
  const callback = () => requestAnimationFrame(() => {
    setTest(test + 1);
  })
  window.addEventListener('scroll', callback);
  return () => window.removeEventListener('scroll', callback);
}) // <------

Option 2:

Since the only thing you need to be refreshed is the latest value of state, you can use the callback version of setTest. React will pass you in the latest value, and you can compute the change based on that.

You will still want to have a teardown function so that the listener can be removed if this component unmounts:

useEffect(() => {
  const callback = () => requestAnimationFrame(() => {
    setTest(prev => prev + 1); // <------ 
  })
  window.addEventListener('scroll', callback);
  return () => window.removeEventListener('scroll', callback);
}, [])