React compiler generates different results based on the return statement

[MrFlashAccount]

I was surprised by the React compiler’s behavior of terminating functions from memoization based on whether they return a value or not.

Playground link: https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHQHYDMobgFwEsIMACMAQwDcEBBORMMAFQgGsEMAKfdzgGlIUo+ABYBlBDCqFEASlLBMpUjAT5YZYWMnTZCAHSUa9Riz7deHDHIDcmAL6ZMOPERKkMEfAFkEAWwhCAC8EABNxajoGBCZWax4LQW0JKRl5RWUhEVS9RCMo01jzBKtOO0dMEAcgA

Is this an intentional feature?

[poteto]

There's a couple of things here:

1. React Compiler by default only compiles hooks or functions, so if you were to look at your example code in a real repo neither would be compiled since they are not hooks. Our playground however was configured to compile everything. I've fixed that in [playground] Use default compiler config facebook/react#32009
2. The compiler only memoizes values that "escape" a component or hook. One of our goals with the compiler is to bound how much rendering can happen. In order to do that we determine which values are used in rendering, and we memoize only those values (and other values that flow into those escaping values). In other words it's not our goal to memoize every single value possible.

[MrFlashAccount]

Thank you for the explanation!

If I understood correctly, memoizing render props(https://legacy.reactjs.org/docs/render-props.html) pattern is also out of the scope of the compiler?

Edit: the compiler playground optimizes the render prop function now, but doesn't touch its internals: https://playground.react.dev/#N4Igzg9grgTgxgUxALhAegFQYDoDsAEG+AAgGYCWANgvgIL4Am5AhpRAOb7lj7MEQA3BDErMAnvjAALCAHcCzAEaCaEAC5Th+OBFxqEergoUAHE5XJxma8roB0eQvgDCffIppQwCBvjURGbnNxXmoYNTAAGm1dChgAW2tbXCj8CBg0jS0dPQM1BwIMNDxyeJN0tSdmHgAlBGY4StIYCHj8AHIYesb2vBKyiqqeZhgWfGbWjoBiNB0B3DywNBGWXtxS8vCh-E21VnGWtvaZufKFvSWABQrWNf7dvzETGmB8ADUVvjVLlpMeAF8DpNjmgoDYLDYEEs9lRZORcAwPqMvmA1htBmonjQiNVHs8eBMjnY0Jj8XdcHg0Gh8ABeOn0hkMynU+n4AAiLDYnHpzNpjP5dL6uEwOEKdECrA4XGG-CEIhC0jkCmUQkymgyOX0hnhvFM5ksSXsjiIrgIHnwXh8fgCTDAwQkrGEEWiOTiiRsulS6TV2V0WvyxuKCwAHg9SFBcI1kuzORwABQmX5gZAxyXsH4QP4ASnwwEcMRSlTzBHwpdJNBpHXiEAYt0i+dL3A5YHi3DASmotL8MCgCHrJcbYAA0ggxMoRgxm62wGBmx2rZXSKxvP3S6XdAB5Z64ZxSPjsCv4OM5mkAPlz+H+q7X1drlAzfy7wCv+cBlcTmbAQtLOTAlRa6hdrsrB2JaADKaijI01zhKwzh+ggwZqMe374F0aiwAQcYNvgAA8nx2AAsjWrAbnKohiDhP6iDOAByzDxAgNLAHGrzcAAorkoy4Ow0QccG5A2Dxl4nqeVFrhubzsTUAAytAAJoAPpgQAKvJMnsWBrHSpx+jcbxOkCUJBmKGwcAANYAJJcQ0HopCmACETbcNO7amTQ-xZuJ-zic5LZtvOzF+a584+QOa7cCOY4QBOU5tnO7kMEFw6juOMCTi58XcPODBhWua4AKq0aptAAEIaYpwGUPBejMPCwjMQBah5flaS4FuBi7vuTHAJu25dTxCAtflipQJQDDOGw3gbrg1l6bZG5gmA5AMD1x60ueS6UN4w1rsAdgHberAPmAu1ieFpYsQIrC9mAolHuJpb4ciREkZQj1rnANFgPRjHMdpHFcfCBn8YJwMiRt+CERubK0DJylqRpWmvOWfFgLpwjA2j7FGeDnm7a10pxTOgXAMFAXuQTrWRalMXpcTs7ZYlyVRWlGX+TOCXULlH2lkVJXlexlU3NVfp1QsMCNRA6hU-lfWdXug3MfLO6KwestrqN42TRA02zTZjSLREK1rfdW07bzuYHXYR33kmGvnYT+W4RyaY1f6VsHR+fyArbEHWD112ULddh-gHgJoI7Tu4csL3EXeUf5Vmu0xwR8ekeR4hR15uBhSA-xAA