u/Breadfruit-Last

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