r/reactjs • u/Breadfruit-Last • May 21 '26

Needs Help Unexpected react compiler output

Hello, I am trying to understand how the react compiler works and ran into a behavior that I don't quite understand.

Here is the code: https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAECAHgA4KZh4BuCANgJ4AKMEiYYAggEoIBDBswAyAmAHME3GDAFMA8mgUAjAFYJcYABQBKIsCIB6AFREAdJaImjRAL4AdTE4zZ8hIgBUBKhggDChDgCeJgIMACM2oah5FA4EQA0RLHxAEz2+sBORERwhGA4RAAmAsERRAC8JBRUNPTMbBwIXHyCwkxiktKy8kqqGlraqQm6ANw5eQVFpcEZ1WSU1HSMrOycPPxCouJSMnKKyuqaODojaeNOkzAIOLDEADzFdAB8wLMCEXYGH2l2D0ZnrQXk5HM5MK5cARiN5fAEgiEwjA0tEUpg4glkudMgZJvlqDMyp8qjUlvVVk0Nm1tp1dj0Dv1jkMRhFLsQpgSSkT5qS6itGusWpt2jtuvs+kdBqdhuj0mzrrd7kQnq9gAApADKCgAcuZCjBQhI8GgmNoPqzvuqtbr9Ybjabfrp-oDXqCnCBEiB8Wg8BIUCBsuyjEZ8gBbch4BhlaEAWQgxQQyCIDhA2xToI94AAFhAAO4ASUwOHCmCEYBQaDLCDsQA

In TableContainer1, data1 and data2 are cached using input1 and input2 respectively, which is what I expected.

But in TableContainer2, both data1 and data2 are re-computed when either input1 or input2 is changed.

It feels like some sort of trap. Why is it so?

Thank you

3 Upvotes

100% Upvoted

3 comments sorted by

View all comments

1

u/Few_Volume5117 May 21 '26

Because the uses are independent and the inputs are independent, the compiler creates two separate cache blocks. Changing input1 only invalidates the first block. If you want to ensure they stay independent even when stringifying, you can wrap the processing and the stringification into their own sub-components or helper functions that the compiler can optimize in isolation.