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/#N4Igzg9grgTgxgUxALhAHQHYIB4AcIwAuABACYIBmAhlADYkVQZyECWEGxAsgJ4CCuXAAoAlMWCZixOBzAlSrAG4AlSsQC8xKGASqKQjHVoiA3JOmySAWx4AJKhlK0EMDcQQaAfOPNSqzoiEFFUoAOjhYGAQMQlDWDCwYABUcQlNzAF9zGQw5Ygc4AAsCAAUYCFwwN2AMs0585mKYMoqwUI4AYVpWOABrN1EvYht7RwDROsxzKMJYTiFfYgAeT0WpJeDiKIp1YGC9DM9bBFpaCGIAdQJaUiWAemDV+ql1qnFQj4KmlsrDi8KqPIIAgqoRCh5NmAqDwAPz3KhPF7LO6I4jpDBZDAgDJAA

Repro steps

1. Create a ref with useRef()
2. Create an event handler that accesses ref.current
3. Create an arbitrary object
4. Assign an arbitrary property to that object and set it equal to a function that calls the handler from step 2.
5. Witness the InvalidReact: Ref values (the current property) may not be accessed during render. error

Ex (also in playground link):

export default function MyApp() {
  const divRef = useRef(null);
  const myHandler = e => {
    alert(divRef.current.innerText);
  }
  const anchorProps = {};
  anchorProps.onClick = () => myHandler();


  return (
    <>
      <div ref={divRef}>Hello World</div>
      <a {...anchorProps}>What does the div say?</a>
    </>
  );
}

How often does this bug happen?

Every time

What version of React are you using?

18.3.1

What version of React Compiler are you using?

19.0.0-beta-27714ef-20250124