[Compiler Bug]: false negative, compiler skips memoizing a variable that should be memoized

[sharabai]

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/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCARCBtJg0HgvCgQHg2BAYHocNsqKoiC5JFAvHhMAB5Cj4HSKIhoQwsIgAcgARgIaQhJABaCjY3GYJlNAS4JnaNh4OIwP54XRU+oaHh5Z7PPkUAVCAiYACyED4CGQRDUIAEkkkWo0JzACrA0JGmLZeMJxJogTB4AiEAA7qtMGkYJgdWAUGhPQgFEA

Repro steps

Open the example from React Compiler introduction , which is linked by See this example in the React Compiler Playground

The example Component itself expects props with two properties: function ExpensiveComponent({ data, onClick })
This example from React Compiler docs doesn't memoize the first line in its body const processedData = expensiveProcessing(data);

If you look closely at the compiled output, the compiled version would recalculate that line each time when onClick is changed, even though data is the same.

If we manually add useMemo as it was in the original example from React Compiler introduction, compiler starts memoizing it, as you can see here.

How often does this bug happen?

Every time

What version of React are you using?

19.2.3 probably, it's whatever version is in Playground

What version of React Compiler are you using?

0.0.0-experimental-334f00b-20240725 probably, it's whatever version is in Playground