Everything New in React 18 - Explained!

react 18 is just around the corner the beta version is already out the alpha was out a few months ago and with the release of the beta version this means that react is feature complete that means most likely this is whatever we features we have right now they are the ones which will remain in react 18. in this video let's just take a look at everything which is new and significant in react 18 and how does that work 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 so of course you know react 18 is the next version of react 17 without any doubt but there's a major change in react 18 which has not been done ever in 16 15 14 or any other major bump and that is something known as concurrent rendering what this essentially means is assume that you are on a page on a mobile phone and this mobile phone is actually loading react right now let's say you have an input field over here and you tap on this input field let's say this device is actually very old as well which might be like slow performance non-performing and so on so when you tap on this input field what's happening under the hood the browser process is trying to execute the javascript still javascript plus react which is actually running to just load the bundle or you know maybe do some other tasks and so on maybe update some states and so on so your event right here the user tab whether that's an input field whether that's a button click whether that's a link click this is actually postponed right postponed until that work this work which react was doing or javascript was doing internally just got completed right so this behavior is actually wrong why because as a user of course the best experience for you would be that something which you want to do is prioritize first and the background work which is not so important is prioritize later right so one of the major efforts of react in that scenario in this react 18 thing is having a way to prioritize the user input so there are a couple of new concurrent features the first one is start transition and the second one is use deferred value these two functions these two features and remember i'm not talking about concurrent mode anymore because what react team did is that they said us that hey there is no concurrent mode anymore there are only concurrent features so these two are concurrent features which enable you to do heavy state updates or heavy updates in your react app in the background that means that whatever you do in the start transition function whenever you call this and whatever you do whatever happens inside this function can be interrupted by react so the act is trying to run this whole thing but we'll also keep an eye on this input field it will also keep an eye on that button in in a sense it will keep an eye on main thread or on user interactions and the moment it sees a user is interacting it will say hold on i'm not gonna use you know i'm not gonna keep on running this particular thing or particular batch of code let me just go ahead and get rid of all of this handle the user first and then come back to this later right all of this is happening under the hood as long as you opt into these concurrent features which brings me to the second point which is the create root function in react so remember like how you used to create react dom dot render you actually opt into all of that stuff so we used to do something like this prior to react 17 but if you want to use all this new good stuff you have to use the new create root method of creating the react instance of that particular app just so that you opt into that concurrent trending rendering or concurrent features in react then of course one of the big features which react 18 brings us is react server components or react server side streaming support which is officially available in react 18 and it's still available in frameworks like next js which allow you to use them as long as you update to alpha or beta versions of reactant team so react 18 is going to finalize these components finalize the rendering and would definitely include more and more features as we go along we have done extensive discussion on what react server components is on code dam in a lot of previous videos so make sure you watch them in order to understand what this thing exactly is this react server component and server side rendering also includes support for suspense and suspense has been available for a while in react 17 as well and hopefully we were hoping that react 18 would actually bring a suspense plus data fetching solution recommended data fetching solution as well but the react team has taken a step back for that for react 18 and they are saying that hey we most likely are not gonna propose a standardized data fetching solution with suspense but you can still go ahead and use suspense as a boundary for the components to fall back to right so suspense is there server components is there concurrent rendering features are there there's one more thing reactating brings and that is the automatic batching of updates again this is something i have done a video in past our new react 18 features some some title like that you'll search it on youtube you'll find the link to that but that's that's about it that's all the features react 18 brings to the table which are relevant which are production ready and which are available even right now in beta so yeah that's pretty much it for react 18 super excited to see when this launch when the other frameworks would start adopting react 18 as a you know formal thing remix next js is already there there are a bunch of new features in react 18 a lot of performance enhancements and i'm especially excited about the react compiler react future which is a new compiler still work in progress nothing related to react 18 although so if you haven't watched the last video make sure you do that it's a very interesting piece of technology 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: 7,037

Keywords: web development, codedamn, 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, BIGGEST Change in React 18 Explained!

Id: _EWdFVva4kM

Length: 6min 11sec (371 seconds)

Published: Thu Dec 16 2021