react is building a compiler yes that's the headline and this headline came from react con which happened a few days ago where one of the facebook employees shun actually gave a pretty awesome talk on what this compiler might look like in 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 video if you're new here make sure you leave a like subscribe to the channel and hit the bell icon this is free of cost and helps the channel grow all right so before actually getting into what react compiler would do this particular thing which is named as a react for git in the alpha stage right now let's actually understand what react does right now so whenever you write your 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 jsx is not technically javascript it's a html looking like structure which 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 right so the logic the functionality is pretty much preserved over here 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 would remain same and i'm putting an asterisk here because 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 get a lot better you know a lot lot better i mean it really depends on app to app how complex the app is and how much performance that could extract it out but for example the demo app which the facebook engineer showed that 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 right because of that performance thing so let's discuss what this performance hack is what is this particular compiler doing and how does this help in a react-based scenario all right so this compiler over here which has been code named as react for get basically in a nutshell what we know from the cons 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 let's say you are creating an interface like code dam's playground right in our playground you know that here you get the browser right you get the terminal at the bottom you get the files over here right and you have the monaco in the center which allows you to interactively play and learn with code right so the code down playground when you click on this single file you would see that the monaco editor actually gets changed and the highlighting over here gets different right it gets highlighted to that particular selected file similarly when i click on the next file the same
START_INTERACTION_TOKEN if you're new here make sure you leave a like subscribe to the channel and hit the bell icon this is free of cost and helps the channel grow END_INTERACTION_TOKEN