Facebook is building a React compiler?


React is building a compiler, yes that’s the headline????????. This headline came from React conf which happened a few days ago where one of the Facebook employees Xuan Huang actually gave a pretty awesome talk on what this compiler might look like in the future. What this would do and where the direction is headed towards. So what is a compiler exactly, what this functionality wise is doing. How this would be helpful to you as a developer, and what you should know about this. let’s discuss a little bit about that in this article. All right so before actually getting into what React compiler would do this particular thing which is named “React Forget” is in the alpha stage right now.

Let’s actually understand what react does right now, so whenever you write you react code you would have seen you are using something like Babel or the cool kids now are using SWC. For example and even if this is in js or typescript you need kind of that transpilation because you want to convert that JSX syntax into something which is javascript, right?

What is JSX? ????????????

It is a syntax extension to JavaScript. JSX is not technically javascript it’s an HTML-looking like structure that uses a lot of js but still the browsers don’t understand that. so this step over here is transpilation. so when this particular step happens technically the code which you get the bundle, which you actually ship to the browser. it’s still what you exactly wrote logic-wise and functionality-wise as well.

About React Forget

What reacts just proposed in the react code with this compiler over here this compiler right here once this runs it will perform certain optimizations in your code and the resulting bundle which would be generated would functionality-wise remain same. The code would be changed, the logic would also be obviously if the functionality is same, logic’s functionality would be same code level things would be different in a way that the performance gets a lot better you know a lot of better.

I mean, it really depends on app to app how complex the app is and how much performance that could extract it out. For example, the demo app which the Facebook engineer showed was doing something like three to four hundred renders on a single click and that is pretty much dropped down to one or two renders because of that performance thing.

How React Forget boosts the performance?

All right so this compiler over here has been codenamed as React Forget. Basically in a nutshell what we know from the React Conf what it does is that it memorizes pretty much everything in your react component. And this is important because this is important why this is not happening automatically and why a compiler is needed for this so you see when you write a basic react app.

When you are coding on the application, React would assume that I need to check heuristically whether any div needs to be rendered or not. And it will try to do it every for every particular thing in that component where something has happened. Now if we talk a little bit about this what components are essential in react are now functions.

So you have a function that takes certain input as props and returns JSX so what these guys have done is at least what I believe this compiler assumes is that this function is a functional component. number one is super important and ideally, this function is pure as it does not do any sort of side effects outside of that particular function. So this is my assumption of how what would be some of these requirements for React forget to work properly without introducing any sort of bugs or anything it should be functional and it should be a pure component.

The way it works is that react compiler would actually take a look at all the props which are being used over here and it will create memoization of those components.

How React forget works?

It will create this memorization it will say your function call and it should only be triggered when let’s say prop 1 is changed but prop 2 is changed because it is able to see that you are only using prop 1 and 2 in that particular function. The moment this happens you get massive performance gains in an application. It is actually transformed into a memoized version of the component which looks much uglier but is much performant now this sort of optimization.

For this new react compiler let me know what you think about this what are your views on react and this React forget the new react compiler which would probably land sometime next year hopefully.

Learn more about React.

Happy Coding !! ????????

Sudeep Mishra

Sudeep Mishra


Leave a Reply

Your email address will not be published.

%d bloggers like this: