[Compiler Bug]: Post Increment Assignment Compiling to Pre Increment Assignment

[kbitgood]

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://github.com/kbitgood/rc-bug-repro-increment-assign

Repro steps

Description

When using the post increment operator in an assignment (y = x++) the value is incremented before being assigned when using the React Compiler.

Steps to Reproduce

1. Check out the reproduction repository
2. Run npm run dev, or npm run build && npm run start as the problem exists in both dev mode and production
3. See the index field of each item in the next list is off by one. Every item in the list should have a sequential "Count" value starting at 1, not

Details in the Reproduction Code

The code in src/app/page.tsx uses Array.reduce to build an array of nodes, and keeps track of a counter in the aggregated value.

When we use this code:

const count = agg.itemCounter++;

The compiled output translates to:

agg.itemCounter = agg.itemCounter + 1;
const count = agg.itemCounter;

Which is not equivalent because it increments before assigning, rather than assigning and then incrementing.

The issue goes away by taking the counter out of the aggregate object and into a normal variable outside of the reduce function.

Conclusion

I realize that this way of keeping the count in the aggregated value is not the best way, but this is not strictly against the "Rules of React". If it is, it should probably be added to the ESLint rules.

This issue was found on a large codebase that was working just fine before enabling the compiler. And we had no indication that this code would not work after enabling the compiler.

How often does this bug happen?

Every time

What version of React are you using?

19.2.0

What version of React Compiler are you using?

1.0.0

[josephsavona]

Thanks for posting. I took a quick look and can confirm this, it's because the postfix increment is happening inside a function that gets outlined, and we don't run our pass to handle this case (promoting temporaries) on outlined functions. We should do the promotion eagerly in BuildHIR.

[Abiabi01]

Hi! I’m a beginner in open source and I’d love to work on this issue if it’s available. Could you please assign it to me? Thanks!