[Compiler Bug]: .map() callback extracted to module scope breaks closure over locally-scoped variables

[Omarov3000]

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-hooks (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/#N4Igzg9grgTgxgUxALhAejQAgLIEsB2uAtgIYA2mMCADjBACZRwAuuE+mEAZpgEoIkWmAMIQi1XGQQxMAIygBzADr4MmAIKYuUfCzYd6CLgQT1MBTlGbTMYOBGoI5Ce0QRhMOw8fynz+MFxDTAA6UmoACgBKTDhyMllBAGsVNQB3AAsEDlkIZgzMEip-QOCSWLIIMFgnKmZYXzMuOiJCrUFmCBgATy0dPXYVFWJqLuZMACpCj34OrRbMAHIqDsWh3wAPUZhx7V1WdliV6wAhAnoCBTBozGAVTEw1AEl8XxlXUd98ce8TMws4JVqlR7rF2GBxi83qJxOxssxkHwBCwQgAxYQAHmAmAAbuQoAhERCYJdMABfAB8mAAvJgIti8WQCeSYtSqXcOA9KAh6jAOBiLjiKcBGQSyRi0IKKaCyesHmoAPJWGwfOHfTD5EjjKBgdyYKHSGGfeH+NphEiRKKg+wBcZK6wwI1qhFIjpozHY3DWIhgInMEn4BQAbQAuuSqbT6eZvR4yaz2aCHnUGnTE1yBbghWmubcvQgfebIhE80R47dsznHlgTgBVADiiINjrExvVuA8XiMf0wWWKmWyYPEklMFZzNsgUhClQUEUWTadXwRiwANBruo5uPrXoaW86rZzK1zk3zMBj57vF5gkghutTgCWybj8Qg7w-HtKD5W47LPw8JVK033B4f1BY8OGxe0d1hS8fxA1QsBrMASAUBAVHHcYIOVZtoJNR9aTgY4EDOfALkDa59xUBAtjGTBvBIKAyF2foDg4dRqEtctOTA09IOw1txhLMA7yDRYSBXJZZHExY4EWENHzQD8fxAZcQBtYwFBQEARho5h1ycbEAAUmQUAgFWoFjY3mMQJJIWQEDIABaahjIIByVhYByPmHGBJXbZhFgAbnWelQQwLyyC1fRsAYQlMCUEB4nilRHyQ1gwGMPUjMUUzzP0MAogC5TwAyCA0heB18HIMAUC4KqEDJIA

Repro steps

1. Open the React Compiler Playground with this code: LINK
2. The code defines a factory function createBindings() that returns React components. Inside the factory:
   - InnerComponent is defined as a simple functional component
   - OuterComponent uses InnerComponent inside a .map() callback
3. Observe the compiled output - the .map() callback is extracted to a module-scope function _temp:

  function _temp(item) {
    console.log("InnerComponent:", typeof InnerComponent);
    return <InnerComponent key={item} value={item} />;
  }

4. _temp references InnerComponent, but InnerComponent is defined inside createBindings() - not at module scope.
   The closure is broken.
5. At runtime, InnerComponent is undefined inside _temp, causing: Error: InnerComponent is not defined

Expected behavior:

The compiler should either:

• Keep the callback inline to preserve the closure
• Hoist captured variables along with the extracted function
• Skip compilation for callbacks that close over locally-scoped values

Workaround:

Adding 'use no memo' to OuterComponent prevents the callback extraction and preserves the closure.

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