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

[pgsandstrom]

React version: 18.2.0

Steps To Reproduce

If this can be confirmed as a bug, I'll try to create a repo that shows the bug in action.

The current behavior

I have this hook:

function useWtf(a?: string, b?: string) {
  console.log("outside effect", a, b)
  useEffect(() => {
    console.log("inside effect", a, b)
  }, [a])
}

When quickly changing the variables, such as in StrictMode, I manage to get this output:

outside effect NOT_STARTED undefined
outside effect NOT_STARTED  undefined
inside effect NOT_STARTED undefined
outside effect PENDING NOT_STARTED
outside effect PENDING PENDING
inside effect PENDING PENDING

The effect is triggered when a is changed to PENDING. At that moment b is NOT_STARTED. So I expected this to hold true for when the effect runs as well. But if the hook is run quickly, that is not always the case. As shown here, once the effect is run b has already changed to PENDING.

The expected behavior

The effect should run with the scope that is available when the effect is triggered. While I can't find any documentation that specifies if this is something that useEffect guarantees, it feels like the most logical thing.

[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]

@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.

[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)

[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: https://github.com/facebook/react/issues/28304