[Compiler Bug]: react-hooks/set-state-in-effect false positive on async function

[printfn]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgDMoA7OXASwhPwGEIBbbEhE3ACgEp9gAdG-HGpgCAbRgIAhgBMAngBp8YBLgBKUuQF18AXnxRlAZVyTcCdoUkAbZZwDc-fIOEFCu-ctrWrAI0lwAa3ZJMFkyfC5dAD4eRyd8SQB3SQpXFTgAC3YAcgA6fOz7OKdlNQ1ZdlwYKAQigQBfRVFNOriDBABRQkIEcnZInRi+ASdCLgcGpsIWibiJXFgaAB5pCgA3KOAJGVl8AH58bPUd7PxkQ4AZCBkKEgBzbPqlgHpVjYn6-hB5ECESQgodxQIAoTBwBFwskwCB4+AAClYoHdbgB5TCUYT4epEGCMQ5+HwIKwAWkwiORJGJ23IxKETAoVgQMFeFBE2VmJHYwycz2edMwDNMVBIAFkINIEOdeCBvNL+NiwEKwACEGB4eTUejhWB7N9wBkIIkAJJsJkkaxgFCWGwIepAA

Repro steps

export function Component() {
  const [ready, setReady] = useState(false);
  const f = useCallback(async () => {
    await fetch('...');
    setReady(true);
  }, []);

  useEffect(() => {
    f();
  }, [f]);

  return <div>{ready ? 'Ready' : 'Loading'}</div>;
}

The setState call is after an await, so it should not trigger the lint.

How often does this bug happen?

Every time

What version of React are you using?

19.2.0

What version of React Compiler are you using?

1.0.0

[jeetsingh008]

Attempting

[Sabari-Vasan-SM]

I’m also experiencing this exact lint behavior when using eslint-plugin-react-compiler with React 19.2.0 and React Compiler 1.0.0.

Reproduction :
import { useState, useEffect, useCallback } from 'react';

export function Component() {
const [ready, setReady] = useState(false);

const f = useCallback(async () => {
await fetch('...');
setReady(true);
}, []);

useEffect(() => {
f();
}, [f]);

return

{ready ? 'Ready' : 'Loading'}

;
}

Observed Behavior

The compiler builds successfully, but ESLint reports:

Avoid calling setState() directly within an effect.
Calling setState synchronously within an effect body causes cascading renders.

[Zeta611]

This does seem to be a false positive, as wrapping it in a then clause makes the report go away.

[basitqayoom]

I've submitted a fix for this in #35732.

The change tracks Await instructions in ValidateNoSetStateInEffects so that setState calls after an await are correctly recognized as asynchronous and not flagged.

Specifically, a seenAwait flag is introduced within getSetStateCall() — when an Await instruction is encountered in a block, any subsequent setState call in the same block is skipped from being reported as a synchronous state update in an effect.

[oktaysenkan]

any update?

[karlhorky]

It looks like eslint-plugin-react-hooks@7.1.0 introduced some changes to reduce "false negatives" - not sure if this relates to this issue though:

Improved set-state-in-effect validation with fewer false negatives. (@jorge-cab in #35134, @josephsavona in #35147, @jackpope in #35214, @AntonChesnokov in #35419, @sleitor in #36107)