[Compiler]: passing `ref` to render prop will void optimization

[szhsin]

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/#N4Igzg9grgTgxgUxALhAejQAgDIEsBGMAhjAJ6ZwQC2ADhAHYL0AuYmVR5jCAJpsxEwIAHnTAJMAAxgIAZpP6DK9MFCoIYbAG64imGfR4bMNGBBpgAOvWVhmmAGIRBAXkwAKYBQAWuADY8BpgAvgCUmC4AfJjA1pgUDHb6chGYUOIASnLu9FB+fqEA3NZxmBiYAApEYGC49ADmybKKmN7OANaYuGxE+RAA7ryltvb4JKnpCABCJJ5NIUUl9PHlVTV1jTLNAsmGxqbmXWwAcgDyACqYvX4DQ8vJzLDLADw8uFqRwHC+AQZzWwtgs80G8PsV6MFwdYRpgAII0GipdzhKIxUoyR4wF5OCCff4pMIRaLPOo0KD2LYuYBbYJlSJAtA4yLgyHWEDBIA

Repro steps

In some use cases, especially in library code, it is necessary to pass a ref to the consumer using render props. However, this currently results in an error and causes optimizations to be skipped.

Example:

// `renderChildren` is a render prop; passing `ref` like this is not allowed
return <div>{renderChildren({ ref })}</div>;

In contrast, passing ref to hooks or JSX elements within render has no issues:

const bar = useBar({ ref });
<input ref={ref} />

How often does this bug happen?

Every time

What version of React are you using?

19.1.0

What version of React Compiler are you using?

19.1.0-rc.1