[Compiler Bug]: eslint-plugin-react-compiler reports "Hooks may not be referenced as normal values" if property begins "use"

[lukpsaxo]

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)
• [X] 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/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEcEAdgGZoDmBZMEGBA5GPAPTHlWMDcAOifwQAPHPgIATBGQCGUADaEyUEnDxpSBALIBPAIJYsACix0sYAJQFg-AkVJhCYABbQ54gKpgEADQIBeO05KADppYKgvbz4SWxgEPFgY51cPSIIAfiYhRgJkJm0efgBffhAioA

Repro steps

We have a config object with a property starting "use" - its a boolean.

It seems very restrictive that we cannot have any properties beginning "use".

I guess we could destructure outside the react component or make a abstracted function to get the boolean - is that the recommended solution? Or should react compiler be less restrictive in detecting hooks? It seems unlikely to be a hook if its a property name thats not on a import?

How often does this bug happen?

Every time

What version of React are you using?

0.0.0-experimental-9ed098e-20240725

[lukpsaxo]

Having further reflected on this, the best thing to do is to rename the property. But I am keeping the bug open for your opinion - there may be circumstances where renaming isn't possible.