React Compiler in Vite 8

Hey guys, today we'll be looking at the React Compiler in VeeT 8. VEET 8 has been officially launched recently. It has basically been released. In which I told you that they have made many changes. Their major change is that Previously, they used to use two bundlers. ESBuild and Rollup But now they are using only one bundler. And that's Rolldown Because of which a lot of things have changed In fact, the way the React Compiler used to work has also changed. I mean, it used to work in the same way But the way it is written, the way it is configured How we use it has changed So I'm going to share that with you in this video And I have shown you, you can see it here as well That now the state of React Basically the state of React Like the survey that was conducted The React Compiler has received a very positive response. And definitely in 2026 This can help you a lot And of course it will come So yesterday I made a video saying Like React in 2026 In which I showed you about the compiler And that is how you can use a callback Use memo, React.memo You don't need all this now It doesn't mean they are gone forever. Or they are dead We don't have to use it Nothing like that You can use it But now we have React Compiler Which senses Where do I need to apply memoization? So I told you that I would tell you in detail So today I've finally brought that_constraints So first of all, you can see The React Compiler is working on our project. And its proof is here This icon or this label You can check it out here Memo and then this star Which you can see here So what used to happen And what has changed now I will tell you As you can see here This one Which you can see here So this was your previous Weed.config.js code Which you had to write So that you can use React Compiler In your React version 19 Here you can see clearly We have one plugin. You can see this And that is at the rate Weed.js.plugin-react So now, guys, I will explain about this. So you will definitely find it very interesting. So before Weed 8 The versions of Weed Let it be 7 or 6 So there's this plugin It had two functions. The number one task is to Convert your JSX To normal JavaScript Or even TypeScript to JavaScript Because you write JSX in React So you have to convert it to JavaScript Only then will your browser understand It doesn't understand JSX TypeScript It understands pure JavaScript. So one task is completed To convert your JSX The second work was Fast reloading You know, like automatic refresh So it was also dealing with this And behind the scene it was handling Because Weed Used Babel And we all know What is Babel's work? Babel's work is Whatever your JavaScript code It creates a family tree. Through it Means your Abstract syntax tree AST I mean, it used to be used to create a tree. And on the base of that tree All your other plugins Let it be this plugin Or any other plugin It used to read that tree. Where it needs to be updated Where it needs to be modified It used to modify there And rewrite the JS This was your process Read Analyze Update your AST tree And rewrite Because Babel is used everywhere Now you know this much If you go into depth We knew before Weed 8 There used to be two bundlers. ESbuild for your development And rollup for production So in development ESbuild used to Convert modern JavaScript In your normal JavaScript So it understands the browser So When Weed 8 was launched They removed ESbuild and Rollup They kept only one bundle. And that's your rolldown Now roll down Written entirely in Rust And they thought We don't need Babel So they removed Babel And ESbuild Now in Weed 8 They have one new toolchain known as OXC. Which is Transforming JS Translating JS In normal JavaScript Fast Refresh Injection Which was doing this plugin Now it is doing OXC New toolchain introduced in Weed 8 Now In Weed 8 They removed Babel. Because Before only this plugin If you used to write Babel, Plugin, React Compiler Then your work was done Because the Compiler is also like a plugin Like JSX Babel is making a tree Like this So React Compilerannis Can read AST tree easily Behind the scenes The React Compiler also requires Babel. Before it was Babel support Now in Weed 8 Babel is not supported So the React Compiler is not able to read Now what we need Here we need New plugin Which ensures Here you can see New configuration file of Weed 8 Here, if you look closely That plugin is still here Behind the scenes It is using OXC To transform JSX and enable fast reloading To implement And here We have a new Helper function And that is React Compiler preset And Two things JSX transform and fast reloading This plugin is doing No one knows But React Compiler It is not working So for that We need a new plugin. And that is this one At the rate Roll down forward slash plugin hyphen Babel Now this plugin Will make sure The React Compiler still requires Babel. So import Babel So, like this, we import Babel And look here No Babel block here anymore React's own comma In Babel You have to write a preset And in the array You have to pass the function So like this Finally You can use React Compiler. In Weed 8 And why do we have to Write like this I have already explained. Previously we had a Babel But now we no longer have Babel's support. In Weed 8 In Weed 8, there is only one bundler. That is your rolldown And we need to get a new plugin So that Our React Compiler gets Babel So yeah, guys This is it Rest is in the code Wherever Unwanted re-renders were occurring So React Compiler will Analyze it And where Your use callback Use memo or sometimes React.memo for your component Automatically it will add And whether it is happening or not Whether it is running or not You can see here If you click here It means your compiler Is working And I hope Now you know How React Compiler Will work in Weed 8 And why Our previous The configuration is not working. If yours is working Then let me know in the comment section Because mine isn't working So I just figured it out How it works And I told you the reason. Because Bundler has changed in Weed 8 So yeah, guys This is it There is not much to say about the code. Because I told you yesterday I told you yesterday You can check out And I've made a playlist on React You can see I have made a playlist on React You can check out I even React in one complete video You can check out There are many things But I thought I should explain What was the work of React Compiler? And why in Weed 8 The way of writing has changed. The reason behind it I think Now you know Now you feel better It feels good Because we are using React in Weed So yeah, guys This is it I hope you liked the video If you have any doubt On any other topic If you want to know in depth Please let me know in the comment section Topic Name I will make a video about it. I am going to conduct research. What has changed in Weed But guys If you liked the video Please share it with your friends They too need to know If you liked the video Like it See you in the next video. Be careful