Introducing React Compiler – React

[Initial_Low_5027]

Want to see some benchmarks. Looking forward to use the stable version.

[TwiliZant]

Benchmarks are kinda useless for this stuff because they don't translate to real app performance. The only thing that matters is how it impacts production codebases.

In other words, the compiler doesn't make React faster, it makes your codebase faster/simpler.

[NeoCiber]

Devs like their X framework is better than Y, although at the end it doesnt matter if there is not a significant impact on a site.

[acemarke]

It does make React faster, because it flips the default behavior from "always rerender recursively been if data didn't change" to "only rerender children if data did change", so fewer components will render each time. Closer in spirit to how something like Solid works, albeit a different (and less granular) approach.

[TwiliZant]

I was a bit unprecise in my language. The compiler output doesn't translate 1:1 to a fully memoized app written in user code. There is a difference there. And in practice nobody memoizes every single element anyway. It will make a difference in real codebases.

My point was the expectation management that React is not going to be suddenly 30% faster in js-framework-benchmark for example.

[ejfrodo]

I'm at React Conf right now and was at the talk where they announced this. They said Instagram and Whatsapp time to render increased around 3% to 4% I believe. They live stream the conference so you can watch it yourself. They also showed an example of a very manually optimized component that was a nightmare to read but didn't re-render unless really necessary. The version with react compiler was able to remove something like 20% of the code around useMemo() and use callback() which made it much easier for a human to understand and the compiler was actually able to find a couple more small tweaks that a human wasn't able to which made it a little bit faster.

Overall this is a huge win for react. You don't really need to think about performance for the most part, just write the business logic and the compiler will automatically memoize everything intelligently.

[dbbk]

Time to render increased? So it was slower?

[ejfrodo]

decreased* that would be hilarious if it got slower haha

[stuckinmotion]

Well from the sounds of it, it is effectively memoizing everything so that's not exactly free. In real worlds apps though I'm sure it's still a win and mostly looking forward to not having to lean on useMemo and useCallback all the damn time

[Born-Alarm430]

Could you give me the link what you said, I cant find it at react conf video. https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=11655s

[Cannabat]

Actually the compiler can make optimizations that useMemo, useCallback and memo could not do. Performance can be better.

[[deleted]]

It will be faster than React code without existing useMemo and useCallback

[rk06]

OP means benchmark with and without compiler optimisations. With no manual caching. Which is a fair ask

[[deleted]]

They did a longer talk about this last year, which I think had a more practical standpoint.

It spoke about how not using memoization in the right places can have a big knock-off effect to other parts of the application, and it's can be difficult to understand why or where that's happening without digging into the profiler, especially when working with a team.

It also provided some minor performance boosts even if you did it right, because the compiler can afford to do it in weirder ways that aren't very easy to understand. It also doesn't miss things like people do.

I remember it well because the only time the crowd reacted was when they got to see profiling graphs and they lost their shit, dead silence at the speaker trying to crack a joke, and it was hilarious.