[Compiler Bug]: InvalidReact: Ref values (the `current` property) may not be accessed during render. False Positive

[funktr0n]

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

[sushanthi1813]

You can keep an eye on the React Compiler release notes for updates regarding this issue.

[funktr0n]

You can keep an eye on the React Compiler release notes for updates regarding this issue.

@sushanthi1813 I'm not seeing any release notes at that link

[mofeiZ]

Thanks for the report! We've been working on reducing false positives from ref.current validation but this one seems to have slipped by.

[dinge321]

For what ive seen in the documentation the problem is because it doesnt consider the possibility that you can add an onClick property later in the code, which make react think its another property that cannot use the current method of a ref, ill lok at it, post the answer if i find the problem causing it to false positive that

[dinge321]

okay, i think i found it, well in the declaration of the function validateNoRefAccessInRenderImpl on react/compliler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccesInRender.ts we have cases and each case is treated differently, for example, the ObjectMethod dont call any problems, but the problem is, when you call anchorProps.onClick = () => myHandler(); is not calling the ObjectMethod case, but is calling the PropertyStore case, which triggers by basically anything that stores a new property, the problem is this case also includes ComputedStore which is something like this myObject["age"] = 30; which could be interpreted as we are calling the current property in render lets say for example myObject["age"] = divRef and that could get that error, but as im new to this community i call @mofeiZ to take a look at this and tell me if im right

[josephsavona]

Fix landed in #34026 - thanks again for reporting!