Facebook is Building a Compiler for React?!🤯

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 thing happens when i click on another file or open another folder that folder opens right now internally what we do use is that this particular thing over here is an explorer component right and what's happening right now if we don't use memoization is that on every single click this whole file structure is recomputed this whole tree is recomputed all the elements are re-rendered and everything you would not be able to see it yourself on the screen but we know that everything is re-rendered even if it is not changed right so if you have four files like index.html script.js and if you have a folder like assets and here you have let's say file.jpg let's say this folder is collapsed initially when you click on this folder these two divs would also get re-rendered right although they were not required to be re-rendered similarly let's say this was a complex tree of file structure right and if i open a nested folder maybe something like node modules or somewhere and i click on continuously click on that i don't want every single item to be re-rendered right so in order to avoid that what we say is that each component is memoized but on certain criteria right it is memoized only as long as nothing is being done to this particular component right in this case this particular explorer also has this as the file component this as the folder component so our only parameter which we want to optimize against is that whether this is active or not right so if this index.html is active then it has a different color if this becomes inactive then we want to re-render it because we want to change the color the classes have to be removed and so on so only that active prop is what we need if on a click there is no change in the active prop we don't want to touch it right this is what i know as a developer right but when i'm coding on this application react does not know this react would assume that i need to check heuristically whether this div needs to be rendered or not whether this div needs to be re-rendered or not and it will try to do it every for every particular thing in that component where something has happened right now if we talk a little bit about this what components are essentially in react are now functions right so you have a function which takes certain input as props and return jsx so what these guys have done is at least what i believe this compiler assumes is that this function is functional component number one super important and ideally this function is pure as in it does not do any sort of side effects outside of that particular function right so this is this is my assumption of how what what 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 pure component and 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 a memoization of those components 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 as complex as you know this where you have multiple re-renders happening why because now you are not re-rendering anything at all on top right which is not required the best part about this is that all of this would be abstracted away from you you would still write the code which would just look as nice as you can see on the screen but it's actually transformed into a memoized version of component which looks much uglier but is much performant now this sort of optimization is something which swelt does by default right remember we in the swelt versus react video we talked a little bit about how swelt uses magic in a way that it takes a look at assignment operator and then figures out whether that's used in html or not and if the variable is used in html it'll attach those certain triggers but b because swelt is a compiler it's not a library it has much more information when it's compiling that code down to javascript right because compilers can get into abstract syntax tree and private variables and take a look at what exactly is happening on a static analysis without running the code and that is like the thing you need in order to perform this sort of memorization which swell does by default and which hopefully react would also start doing by default in some time this feature as said by the developer is not production ready it's not even i think available at the moment and it might be dropped but there would be something good which would be coming out of this new react compiler so yep that's pretty much it 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 that is all for this one i'm gonna see you in the next video really soon if you're still watching this video make sure you comment down in the comment section i watched this video till the end also if you're not part of code dam's discord community you are missing out a lot on events which we organize on a weekly basis to code you already know the drill make sure you like the video subscribe to the channel if you haven't already and thank you so much for watching

Channel: codedamn

Views: 11,448

Keywords: codedamn, Facebook is Building a Compiler for React, full stack development, React.js full course, React beginner tutorial, React course, React free tutorials, Learn react.js free, React.js course, React 18 full course, react tutorial, react js, learn react, react javascript, react tutorial 2021, react js tutorial, react tutorial for beginners, reactjs, reactjs tutorial, react crash course, react.js, reactjs tutorial for beginners, learn reactjs, javascript, learn react js

Id: IoFmugrP1UQ

Length: 9min 3sec (543 seconds)

Published: Wed Dec 15 2021