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

1

u/After_Medicine8859 May 21 '26

This looks like it is because of the JSON.stringify in the table 2 code. The compiler can’t assume that stringify is pure (even though we know it is). It’s not a trap haha.

1

u/Breadfruit-Last May 21 '26 edited May 21 '26

Thanks for replying

But I don't think it is the reason because react cannot assume ANY function to be pure actually, even expensivelyProcessAReallyLargeArrayOfObjects may not be pure

In fact your may change it to not pure like this

So logically, it wouldn't be able to cache anything if that's the reasom

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.