React Compiler - New Hero?
Tags: webdev, javascript, programming, react
Published: 2024-05-16 14:35:49

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 `useMemo` and `useCallback`
- 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1c3kgsv4segt3gmd3m6.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qczjy6h4jc5w728mn8ub.png)

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...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t30niksn7vt95iluktg.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4vdn3j5gvpozx85rwda.jpeg)

## 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](https://react.dev/reference/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](https://react.dev/reference/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](https://github.com/facebook/react/pull/29061), 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:

- [React Compiler: In-Depth Beyond React Conf 2024](https://www.youtube.com/watch?v=PYHBHK37xlE&ab_channel=JackHerrington)
- [React Compiler Playground by Meta](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwFkBPAQU0wAoAlPmAAdNvhgJcsNgB5CTAG4A+ABIJKlCPgDqOSoTkB6RaoDc4gL7iQVoA)