[Compiler Bug]: `environment.validateNoSetStateInRender` doesn't throw an error for wrong case

[dimaMachina]

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-hooks (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/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAyngIZ4IEC+BAZjBBgQOQwJVx4cBuADoA7UUygi+aCCIIAxNABsEAFW4IAFAEoioggTiywhYrzxoAbggAiEOADkqGOowC8JMnbhQXIvADCsrQAHng6wnKGxoQA2ljclgCC0tbeTi4ANARkeAAKiSkWafYZCAC6BB6kFNS0muZWtqXOCNqR+gRoTAQNqc2OrQQAhG4eCQjJ-emtusCdBrkFk0VNMy59xQNl7Z30op3ceLByADwAJlYEAPQAfKL7IiCZIEYiTGgA5igg81FCIAQIksaFYIj8eAByD0YhAlioSjQ5xoCAcEHICDwlBRAEkRAAlIHnBAwKEEPAwKAIPYPZ7gAAWEAA7njaDARAiwCgmJyEPQgA

Repro steps

Replace if (activeDocName !== prevActiveDocName) { with if (true) { and you will receive

Found 1 error:

Error: Cannot call setState during render

Calling setState during render may trigger an infinite loop.
* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
* To derive data from other state/props, compute the derived data during render without using state.

   6 |
   7 |   if (true) {
>  8 |     setPrevActiveDocName(activeDocName);
     |     ^^^^^^^^^^^^^^^^^^^^ Found setState() in render
   9 |   }
  10 |
  11 |   return <div />

I expected to receive the same error when using the condition if (activeDocName !== prevActiveDocName) {.

cc @sleitor tagging you if it something that you want to fix based on your previous amazing contributions 🙏

How often does this bug happen?

Every time

What version of React are you using?

latest

What version of React Compiler are you using?

latest

[MaxwellCohen]

While this looks like an abnormal coding pattern, it is a coding pattern blessed in the official docs with an example of Storing information from previous renders . Cosden solutions has a great youtube short on this pattern

The React Compiler and lint rules continue to impress me with how it is able to cover all the edge cases of JS and React.

[dimaMachina]

Thank you for sharing links! Closing since it's an official pattern