[Compiler Bug]: `for await` loop fails to optimize component.

[suneettipirneni]

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/#N4Igzg9grgTgxgUxALhHCA7MAXABAQwCMcZ85sEATXAXgLAE8M5cAKASloD5dgAdDLiG4AZhBgEA7vgCWeVuix4xEXBBG5C+GJ36DhQgQYC+R3KYwCEADwAO4vJQQj8UADbKozbDMy4AsgwAgra2HLwCZoo4uJQQAMoQALYI2AAWMhgA5rT0TCzhNDx6BmIS+NJybNHKEKrqmtq6kfpCFm0tQjCpsIIAPJQyAG5cABIIbm6qAOribpR9APSDIwDcAhYgxkA

Repro steps

React compiler fails to optimize components that contain for await loops. I came across this bug while trying to deduce the cause of a significant amount of re-renders. In the react dev tools it showed the component was indeed auto-memoized, however it would still re-rerender when seeing the same props. When removing for await from my code the component properly memoized inputs.

Later I tested this in the react compiler playground and noticed the very clear Todo: (BuildHIR::lowerStatement) Handle for-await loops (10:12) error message. Ideally this error could be addressed or surfaced to the user in order to prevent confusion on why a component marked as auto-memoized isn't actually being memoized.

How often does this bug happen?

Every time

What version of React are you using?

19.1

What version of React Compiler are you using?

rc

[josephsavona]

Thanks for posting. This is a known todo, as it has a specific todo message.

why a component marked as auto-memoized isn't actually being memoized.

Where did you see the component as auto-memoized? Was that in devtools? Just confirming. What likely happened is that a hook within the component was memoized, which showed up as the component being memoized - this is another known limitation cc @poteto and @hoxyq

But as a larger point: note that async client components aren’t supported, so for..await doesn’t really make sense to use. Can you explain more of what you’re doing?

[suneettipirneni]

Thanks for posting. This is a known todo, as it has a specific todo message.

why a component marked as auto-memoized isn't actually being memoized.

Where did you see the component as auto-memoized? Was that in devtools? Just confirming. What likely happened is that a hook within the component was memoized, which showed up as the component being memoized - this is another known limitation cc @poteto and @hoxyq

But as a larger point: note that async client components aren’t supported, so for..await doesn’t really make sense to use. Can you explain more of what you’re doing?

The dev tools does indeed seem to properly not mark the component as auto memoized in a smaller example I tested. I don't have access to the code I'm using but I may have been mistaken on if the dev tools were incorrect or not. I will re-verify.

As for what I was trying to do I had a button that invoked an event handler to stream text from an endpoint. This function was exposed as an async iterator. Something like this:

async function* streamText() {
  const data = ["this", "is", "a", "test"]

  for (const chunk of data) {
    yield chunk;
  }
}

function Test() {
  const [text, setText] = useState('');

  const onClick = async () => {
    for await (const chunk of streamText()) {
      setText(previous => previous + chunk)
    }
  }

  return (
    <>
      <div>
        <span>{text}</span>
        <button onClick={onClick}>Stream Text</button>
      </div>
    </>
  )
}

[josephsavona]

Ah ok, it was a for..await in an event handler. That makes more sense, thanks for confirming!