Bug: useEffect runs with newer scope than the one that triggered the effect about react

[rickhanlonii]

@Janelaxagh please don't reply with chatgpt or whatever answers, I've seen this on a few issues and it's often wrong. I've hidden your comment, because it's very wrong this time.

[pgsandstrom]

Sorry about the silly mistake. The bug is still present even with a fixed dependency array. I opened a new issue with a codesandbox example to make it clearer: #28304

[Janelaxagh]

This seems like an issue related to the timing of when the useEffect hook captures the variables (a and b) and when it executes. React doesn't guarantee the exact order in which effects are executed, especially in scenarios like yours where quick updates or multiple changes are occurring.

The behavior you're experiencing might occur due to the asynchronous nature of how React batches updates and executes effects. The effect captures the values at the time it's created, but by the time it runs, those values might have changed, especially if changes are happening rapidly.

One potential way to address this is to use a ref to hold the variables, capturing their current values at the time the effect runs. This way, you can ensure the effect uses the most recent values.

Here's an example:

import { useEffect, useRef } from 'react';

function useWtf(a?: string, b?: string) {
  const aRef = useRef(a);
  const bRef = useRef(b);

  useEffect(() => {
    aRef.current = a;
    bRef.current = b;

    console.log("inside effect", aRef.current, bRef.current);
  }, [a, b]);
  
  console.log("outside effect", a, b);
}

By using useRef, you maintain a reference to the latest values of a and b. This doesn't change the asynchronous nature of React, but it ensures that when the effect runs, it uses the most recent values captured in the ref objects.

[rickhanlonii]

@pgsandstrom the scope is stale because your effect uses a variable b but doesn't include in the the dependencies. If you enable the react-hooks/exhaustive-deps lint rule, you'll see the error that catches this (sandbox):

React Hook useEffect has a missing dependency: 'b'. Either include it or remove the dependency array.
(react-hooks/exhaustive-deps)