Have you seen the first day of React Conf 2024? Were you as excited as I am about new changes? I personally liked that they made ref as a component prop and we finally can get rid of forwardRef!
But the true GEM, that was shining the most, definitely was a React Compiler!
Let's dive a bit deeper into it!
For those who want a short overview, here it is:
TL;DR
- React Compiler provides memoization under the hood
- It's Opensource!
- No need to use hooks like
useMemoanduseCallback - Not stable yet, you can experiment but do not use it in production. Give it some time.
And for those who want to know the details, I am here to spill the tea!
How React Compiler works under the hood
Here is a short chart of what happens initially:
That's how we get our optimization and we do not need useMemo or useCallback anymore
But when our memoCache is ready, what happens? Here is another chart to demonstrate the process, which is quite simple:
But it is important to remember, that React Compiler is not part of React 19! It is a separate open-source project. And there is one little caveat here...
So we should expect a small headache soon when React Compiler gains mass adoption.
One interesting thing I have found - under the hood there is lots and lots of typescript! What does it mean to us? Less bugs, better support, and documentation. I believe TS is a must in modern web development and was happy to see it.
Compatability and fallback
React Compiler has a fallback for the bad-written code. Besides that additional linter comes along with the Compiler. If the compilation is going to damage the component, the Compiler falls back on the original transpiler and everything still works. But if you follow the main React Rules, you will not have any bad side effects.
What about useEffect?
Unfortunately, the dependencies array for useEffect is still necessary, but React Compiler helps to stabilize the non-primitive references in your dependencies array. And again, it is just better to follow React Rules so you do not need this stabilization at all.
Conclusion
Since this tool is still in its yearly age, you can freely experiment with it, but be careful or better not use it in production, give it some time to be more stable and resolve current issues.
There is a public React Compiler PR, if you are interested, go check it out, and maybe leave a supportive comment to the community and devs. It feels like a historical moment, one small step forward!
That's all for now, thank you for your time, and happy coding!
Materials and references:
Top comments (1)