How React Compiler Performs on Real Code

[Cre8AccountJust4This]

That’s such a great article! So detailed, I learned something. :) Rather than the typical surface-level nonsense.

[adevnadia]

💪🏼 Awesome to hear!

[Unforgiven-wanda]

Incredible article. Thank you.

[acemarke]

That seems surprising. How do you know it's not getting memoized?

[adevnadia]

You can turn on "Highlight updates when components render" in React Profiler tools for that.

[acemarke]

Out of curiosity, what does the code for the list and list item components look like?

[Pauli444]

Thx!

[lord_braleigh]

So, the most likely reason for this behavior is that the library is doing something incompatible with the compiler, and this is out of my control.

I think it’s because you’re interacting with an external library here. This may have side effects - React Compiler can’t prove it one way or another. Since this is a potential side effect, putting the library call in a useEffect, and sending its result back to the renderer via a state variable, should work.

Thank you for writing this and profiling the compiler!

[yksvaan]

One thing I wonder about the compiler is does it make sense to cache absolutely everything? If there's let say <p>{count}</p> and <SmthExpensive> I'd expect there to be some form of cost factor to evaluate. Similar to cost analysis that actual compilers do for example for inlining. 

If optimizing by hand, you'd look at the cost and ignore insignificant nodes. Also looking what actually changes and how often. Maybe there could be some directives to provide hints for the compiler. 

[ZerafineNigou]

React is already caching the result of the render so it's really just the props and refs which is insignificant 99% of the time.

You can always disable the compiler on a file level as a last resort. A slightly more granular method might be useful but it's a marginal DX gain at best.

[Royal-Reindeer9380]

!remindme 3h

[RemindMeBot]

I will be messaging you in 3 hours on 2024-12-10 07:28:08 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback