Post

I’d love to see some rough numbers on what sort of performance gains one might expect in the real world. I understand this is peak “it depends” territory, but what gains did Facebook or early adopters report? Is there a trade-off to between first render cost and re-render speedup?

we shared some numbers previously: react.dev/blog/2024/10... I'm not sure if we want to put this in the docs as I don't want to make any claims about how much the compiler can improve your app. It's really going to vary based on how your app was built and where your performance bottlenecks are.

What we've generally found is that the bundle-size increase is quite small after gzip. We also saw that it wasn't just re-renders that got faster but also initial load, as often times components have to render multiple times even on the very first page load in order to fully settle.

Bug on the “before compiler” code example (unless the point was to illustrate that we make mistakes when doing it manually 😅) <Item key={item.id} onClick={() => handleClick(item)} /> Item wasted renders, despite handleClick being memoized above, because onClick is assigned an inline lambda.

Also the processedData to <Item>s map would make new elements every time anyways, so that should me memoized. Or if point was only to illustrate avoiding expensiveProcessing, then I’d say remove the unrelated code as it distracts from what is trying to be shown.

Something I find strange with React Compiler (and also the docs here) is how React.memo is compiled: In the 1st image, we can see that using or not `React.useMemo` results in the same output (which is 100% expected). But in the 2nd image, `React.memo` has a different output

I may be mis understanding this, but as `React.memo()` is kept in the output, and as I don't see special flags (like `react.memo_cache_sentinel`) at the component level, I feel like we'll still need to use `React.memo` to avoid re-rendering a component See playground.react.dev#N4Igzg9grgTg...

thanks for sharing! let me think about how to best explain this in the docs.

This discussion had been helpful as I didn't realize there was now react 18 compat, but might it be worth documenting that the babel plugin is just a first step and that other integrations will happen down the road? I did find this very encouraging! github.com/oxc-project/...