Reading React Compiler
Preface:
This scrap serves as a practice for me to try my best to write in my own English.
Therefore, the pace may be slightly slow or there may be many awkward English expressions.
(This sentence was generated by ChatGPT)
Getting Started
For a long time, I'm Slacking off on reading the source, but finally I'm getting off one's butt and start to read the React compiler.
It's truthfully first time to read, so let's try to read from the official documents.
(Actually, I've seen the some speaks and played on the playground just a little bit.)
Reading Official Document.
At first, React Compiler is experimental for now (2024-06-10).
The document is WIP too.
According to the document, here is a working group for the React Compiler.
The Introduction is exist in here, so I'll read it after reading the document!
React Compiler requires React 19 RC
It works with plain JavaScript, and understands the Rules of React,
I'm slightly sensitive to the word "plain", I concerned about this meaning. 🤔
The compiler also includes an eslint plugin that surfaces the analysis from the compiler right in your editor.
Eslint plugin is included too, I see.
> What does the compiler do?
Well, I'm sure about a bird's-eye view. It's OK.
> DEEP DIVE: What kind of memoization does React Compiler add?
React Compiler focuses on these two use cases:
- Skipping cascading re-rendering of components
- Skipping expensive calculations from outside of React
Optimizing Re-renders
function FriendList({ friends }) {
const onlineCount = useFriendOnlineCount();
if (friends.length === 0) {
return <NoFriends />;
}
return (
<div>
<span>{onlineCount} online</span>
{friends.map((friend) => (
<FriendListCard key={friend.id} friend={friend} />
))}
<MessageButton />
</div>
);
}
Expensive calculations also get memoized
// **Not** memoized by React Compiler, since this is not a component or hook
function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
// Memoized by React Compiler since this is a component
function TableContainer({ items }) {
// This function call would be memoized:
const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
// ...
}
How React Compiler detects component and non-component functions...? 🤔
> What does the compiler assume?
OK.
> Should I try out the compiler?
OK.
> Checking compatibility
Hmm, It's pretty good.
I would like to implement for Vue.js Vapor Mode too. (check some not supported functions)