[Compiler Bug]: setState in useEffect / react compiler and eslint hooks plugin

[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/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwFkBPAQU0wApg+TGTBgEhAEql8AXwCU+YAB02+OKzAEA2rjIwA5glwAafONwAVfUdwBdfAF58UcQGU9uBPzpVK81VV8fAB6EPwEMEomOlwAWkImMDIAI0oEOLoMeOis-BgEMkY4jQBbTCZ0mBCCoviyiqqg0PDI3PjE5LSMrPQcmIR8wuKACwgIAGswEIwRii0mADcM4kwwZuk6gDpXBABREhIERn5+RUcAPiVm4KYSfH4RMQlpEi24WALY-ABCR2c9IZjIoVGpgsELNYgbhHqJxFJSO9PghYvIANw3OTNBQYujNDR0LRKcy4TjpMByJwucQABQgfAQMH4gNs6MCagKuFgbAAPIlFiSyZFHMAtEKwLILgAJBCUSgQfAAdRwlEIPJC-IuuNk7Iw2DwRFIFGo+FoDGYrA4PD4ACZBMI4S8ZAprmoCUTdDZjGZIV77FTdh4yF4fH4Ani1GbGCw2FBMIRgwgobYzq7wfg7g8nvDXkiYF8CH8AX6QZiIcZk8ZYc8EW8PvmUbg2WCsWodRHgptGDtxAcjidU5c0+C4wmvJWYc3gjj2cF3QQhGLyZTnLs6QymSzgbjmpzufg+UtBeSRUvIpKZXKFcqYKr1ZrtaoQLIgA

Repro steps

the eslint plugin react hook complains about calling setState in a useEffect: more discussion here: https://github.com/facebook/react/issues/15329

I'm happy with the eslint error ;- it is potentially dangerous.

but the eslint-plugin-react-compiler errors if you disable the react hook rule ;- in this particular case this seems over the top.

Will it stop the react compiler compiling this file or its just a eslint extra warning?

In the 2nd example, I've abstracted the setState to another function and I get no errors. This is fine in the context of the eslint plugin but what about react compiler?

I was lead to believe a eslint compiler plugin warning means it will not be compiled and bail out, but I guess for warnings because of disabling eslint rules, this is not the case?

In my opinion:

• The react compiler eslint plugin should not error on disabling the react hooks plugin
• if the react compiler thinks something is a problem for the compiler, it should generate its own warning and as in this case it would need to be more thorough than the eslint plugin hooks plugin

How often does this bug happen?

Every time

What version of React are you using?

0.0.0-experimental-92aaa43-20240924

[josephsavona]

Thanks for posting. This specific rule - no setState directly in an effect - is enabled only for the eslint plugin. The compiler can still safely compile code that contains such setState calls, but it’s not a frequently misused pattern so we’ve started linting against it.