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

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

Bắt đầu với bản tái hiện được liên kết và kiểm tra src/app/page.tsx, sau đó chạy npm run dev hoặc npm run build && npm run start để so sánh hành vi của mã nguồn với đầu ra đã biên dịch. Theo dõi đường dẫn của React Compiler biến đổi agg.itemCounter++ và xác minh rằng mã được tạo ra vẫn giữ nguyên ngữ nghĩa phép gán của phép hậu tăng, bao gồm cả các giá trị Count tuần tự.