[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)
• 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.

[n3dst4]

Seconded - I am trying the beta eslint plugin, and likewise I have a settings object with several properties with names like useFeatureX, useFeatureY. They're not hooks, they never have been hook, nobody thought they were hooks, and they work fine as regular accessors.

I can't easily rename them, because 1, they are named correctly and I'm not going to change that to appease React, and 2. they are used as keys in storage so renaming them would break everything.

My workaround would be a local alias: const settingsUseFeatureX = settings.useFeatureX but that's so messy for something that clearly looks like a misfeature in the eslint plugin.

[colin969]

I've run into this recently, but the only case is when I'm already doing something questionable.

If you reference anything with the useValue structure that isn't created within the react app, it gets upset. E.g members of window, or constants defined outside of functions in the file. Probably something you shouldn't be doing anything, but the error is very confusing.

You can work around it by pulling it out first, or creating it within a function call first.

Works:
const { useValue } = settings;

const settings = getDefaultSettings();
const useValue = settings.useValue;

Fails:
const useValue = settings.useValue;

I've left an example below which I think shows it running into the issue accurately enough.

https://0xeac7-forget.vercel.app/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEA5gjgCIJoCGUANjgMrn6YlgAUAlEcADrEiMcrGIChRIlDAIAajXpQEyIjhjLBUgL4BuQXsGCEADwAOEGDiIATanUZEM2fISIAVBGBwBhCAFsLTARMHAAmHj4tIjhCbyJZHDYOIgBeUnIqWgZmVjx2Lm59IVjMeJl5RWU0hLyCgDoKhSUEYuiRHDEiTmipAB4APj6AegHoooMjbDjrROSwGokpJqqVNQ0EAzbg80trO2zHZ1wCYk9vP0DCEJxIpZiZ6Vlm6vS5-I5G59XtqQ6unqSIiDEZjIQTTDaQQgbRAA

[SGSANJAY044]

Seconding n3dst4 – the rule seems too aggressive here. It's one thing to enforce the use prefix for hook calls, but flagging property access like settings.useFeatureX feels overly broad. Property names shouldn't be conflated with hook calls, especially when renaming isn't feasible. The rule needs refinement to distinguish access from invocation.