[Compiler] Reading external mutable state

[mecirt]

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/#N4Igzg9grgTgxgUxALhHANgQzGABAFQTABddgAdAO11zgkpJijmIhgAoBKM3YgCwCWYAHQB9AG6Z0UIrgC8ZAL4BuXIqo0A5gmLsBAE24VqNXOh24YshfyFjJ0ogG0DAXWUbTAgGa52AQiswbiD5HgByYgQAD2Jw5Fxw8LUPExorYlhqINSadRMwHT19ABpeGOIjTxpzUgQw4ESo2Pjy2JTq3kERCSkZMBd9VzCEXLUqFSoqSRhykjDKBAB3AiJdTlSqGIAHNlJvKEoWAXpVkgBhCABbXcXKXUbFKpNyEChC3EoIXCuEK4hXmM6AxSE4oNt9JgomVvGxEABVCFQhDDBTvBAAZWIyPYxCYCA2nlquAMYQAjGNiQAjMJREjCbS6AyEkzEhDoMLsAA8hFiADEBOz9LgANYIACecnC3kF6H0ySwVPZUsIJAElE0uBlQuSDhkcmAVOEzWIilw9HOfEwGoQBvYBPkAD4eHTiMJCkzSrgEMbMDBGcI9QTVLD4AhEZCogFwZHg2ozQB6R0s9I6LJ+Ln6ATiR3AdmKLkJrM5lmTShTRbRXYwUj6BDeTBQdD7Q7HU4AWXFAEFttsuGRPBl0zy1pcbvQEPdcEnUvkQCU0PQZZoUCABOOa7xxdt6o0AArSTTqgDy22IJwYai1MGuiSpmCV6AAtNtD+qn1ZMCwn3QbgJzDARZCHEmyUOwxg0AmCa-ts-5Qhe7YQHWCSvFI6CvBMuBgPBYDange5+ueUhcgeUBHpQp7nvQYDJso87gHwEBLAAkvcCAwJQUhgCgDboIUihAA

Repro steps

See the playground above - if you remove "use no memo", the generated code caches away the calls to test.get(1) as it incorrectly thinks that it always returns the same thing, and as a result, the TextField doesn't get updated properly.

How often does this bug happen?

Every time

What version of React are you using?

19.1.1

What version of React Compiler are you using?

19.1.0-rc.3

[josephsavona]

Thanks for posting. Note that React requires that components and hooks are pure functions of props and state. Reading external mutable values — such as test.get(..) in your example — violates this requirement and can cause your component to update (or fail to update). The example code would also fail with standard memoization, eg useMemo(() => test.get(id), [test, id]) would only update when test or id changes. In this way, you can think about the compiler as yet another tool for detecting places where you're violating the rules of React.

Is there a specific library that you're using which encourages this pattern?

[mecirt]

No library, no, this is a simplified version of our internal code that we are currently porting from class components to functional ones. I will note that this issue also occurs if you pass "test" as a prop - the compiler doesn't detect that calling test.set alters the value returned by test.get.

[josephsavona]

Thanks for clarifying!

the compiler doesn't detect that calling test.set alters the value returned by test.get.

Yup, that’s expected. In React, component props and hook arguments may not be mutated. The way to model this in React is to use state, and setState with a new value on change.

[mecirt]

Well, it has worked perfectly fine until now (and it continues to work fine after you disable the compiler), and so I imagine that this is going to trip up a lot of projects. I was at least lucky in that my component was fairly small, debugging an error of this kind on something big might be quite a nightmare.

I don't know how feasible it is, but such a major behavioral change really needs to show a warning at the very least, same as e.g. hooks show one if you try to use them in a class component.

[marcocondrache]

@mecirt React always expects components to be pure functions, which is a fundamental requirement. This is a constraint that the compiler respects. Just because it works doesn't mean it is correct. Implementing a warning to detect side effects in a function is not as straightforward as it may seem.

https://react.dev/learn/keeping-components-pure