[Compiler Bug]: eslint plugin erroneously flags third-party functions starting with "use" as hooks

[ddolcimascolo]

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/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAMgIYCe0eAogGaMJyEC+BjMEGBA5DASU2-ANwAdAHaYc+AgCoClMMowBhABaV8q7rwEABShjjbdAehNmdeMABYLcXAnHTpCAB5zCAEwSMlFAANoSMUFJsaBBSBACy1ACCWFgAFACURNIEJGRUtFAMzKx4qRkEALwAfFmxOWpatmAAdKQIACqaCBgIqVIhwemSdewANAQA2gC66e51QniwsanZ9QA8vmgAbgQWVauzUuzSIOxAA

Repro steps

In the simplified playground example above, I'm using amCharts.useTheme which is not a hook at all, just a random function of an external library that happen to start with use.

How often does this bug happen?

Every time

What version of React are you using?

[email protected]

What version of React Compiler are you using?

[email protected]

[ddolcimascolo]

Workaround

function amChartsUseTheme(theme) {
  return amCharts.useTheme(theme);
}

[mofeiZ]

Thanks for the report! Another workaround is const amChartsUseTheme = amCharts.useTheme (or amCharts.useTheme.bind(...)). We've seen a few other instances of this issue as well, but unfortunately there isn't a clean fix right now. An example of a fix would be typescript adopting Flow's component syntax to explicitly annotate component and hook types.