React 18 - Everything You Need To Know - Migrating from v17

so react version 18 has been finally released for us as a stable release so we can use it as regular users and this really awesome new version is bringing a lot of stuff a lot of features a lot of new changes a lot of deprecations into the state of how react works so in this video we will go through what is react version 18 what does it bring for us as developers and also what are the breaking changes or the deprecations you need to look at so the first and the most important change on the react ecosystem or the whole react library in general is the react dump so as we all know the reactor is actually the companion with the react library that allows you to render and attach event listeners and manage the whole dom and to make like react available and work on the browser itself so if you go to install the new react domain here and you follow as you see the react dom renderer is deprecated and must use the new create work instead of the render method in order to actually benefit from version 18's features and you know get beyond the version 18 and just like actually start using all of those because reacts actually started and and basically moved from how react works basically for both server-side rendering and client-side rendering so you need to move into this and need to move from the deprecated methods in order to make that work so if we jump off projects in here as closely we got a simple really easy project in here using the create react top and everything and use some crayco using some tailwind just a small stuff and of course it's using typescript it's not a big of a deal now this project currently here uses react version 17 and we want to upgrade from version 17 into actually using the newly built version or react version 18 basically so first things first what you need to do is actually install the newly erased version and to do that make sure to use your package manager for me i'm using yarn so i'm going to use yarn in here real quick so i'm going to do yarn add and make sure to do react at latest and make sure to use the add layers in here and also dash react dash dom at latest as well after doing both of these clicking enter this will go ahead and resolve the latest versions of reacts which is currently version 18.0.0 and it's just going to install them for you of course after this particular installation everything will be broken so do not do this in actually your big projects or large scale projects or legacy projects for yours or any production or any of sort of that because there is so many breaking changes and like after installing this new version 18 these changes will affect your application and you won't no longer be able to actually use it and you're going to see a lot a lot of errors so use this with caution and make sure to carefully actually migrate only small projects and just have a small project to test that with first all right the version 18 has been installed if you go out into the package.json just double check there you go we've got version 18 on both reacts and reactdom are installed and make sure both of these versions are matching otherwise you're going to get in trouble awesome now this next thing we want to do in here we want to do the move out from the react dom deprecated methods and so actually how we can do our own or using the create wrist it's actually pretty pretty simple and just like a couple of lines of carrots change so you need to head over to your index which where you're actually doing the reactdom.render and in this particular part what you need to do is actually get rid of this render because now it's deprecated and can no longer be used so as you're seeing here on the react domain here we are actually importing from the react dump now first things first what you need to make sure to do now react exports a completely different set so you need to make sure to import from the client because if you just import from the react dom that would just make it use the previous old versions version 17. so you need to make sure to import from the clients now we'll instruct react dom oh i want to use version 18. excuse me autobox we're getting rendering here is not a method so i'm going to comment all this thing in here and i'm no longer going to be using all of those so i'm going to go ahead and use the create roots so the query is basically you need to first to make sure to get the container so our container is i'm going to get do container i'm going to go get element supply id so we can go ahead and get the dom native container in here so we can quickly access it and the next thing in here you need to use react dom so i'm going to do reactdom dot create route and this is the new function that you know the api is talking about it's actually the create views now the query using here you need to actually provide it or supply it with your container that you know is going to act as the root container for your rendering tree so you just put container in here and that will actually return const root container so make sure to save that as well and here because i'm using timescript whatever just ask me to check that i'm going to just go and enforce this to be in html elements because sometimes document elements by id returns no instead of an html element okay awesome the next thing here you want to do is actually go ahead and use the root container dot render so you just go in and do dot render and you provide it with the react application or the gsx as you regularly do so you can go ahead and copy this react.strict mode and you can quickly go in and paste it so i'm going to go ahead and remove the comments real quick and we just go ahead and save that and there you go that's basically what the migration is from the old react-dom pipeline or the render method into using the new create roots method so if you head over into our localhost 3000 where our application is actually hosted you can easily see oh we are actually getting that and it's actually absolutely working fine so everything is working fine there's no errors on the console and you've done the migration from a deprecated react-dom api into using the new create rows api the second awesome feature about react or version 18 of react is concurrent rendering yes you're here right now when doing has actually more potential and react can handle rendering or the gsx rendering if you're react tree in a more sophisticated way so if you're looking to concurrent rendering it's not what you actually think at first it's not like allows or it's something that allows react to render multiple trees at the same time but it's something like this and it gives you more control of how react can run your stuff and what are the urgent applied or urgent update that you need to apply to the tree before any other non-urgent stuff that you can't apply currently or something or you don't actually need to apply currently so what is actually in here is pretty much for example you see in here like first there's the pause resume render so it can allow you to dif like render a different ui component to apply other urgent changes or maybe differentiate between an urgent change and a non-urgent change and now react can actually differentiate between both of these so you can take for example an urgent change is something like an input value so like you can imagine there's a search input and whenever the user actually types on the keystroke actually you can basically go ahead and show them a value and that's what actually an urgent thing so you need to immediately show them that value on the input and a non-urgent thing is more of like displaying the search results so that's more of actually of how react now can actually concurrently render both of these and actually can optimize the performance a lot more better also for example here you can imagine like where react stated on their blog so you can have particularly a really awesome feature where you can remove a section from your eye and add it back later so you can actually do a different stuff of manipulations for example you can hide ui when clicking away for browser and this could be really really awesome when it comes to like security concerns or hiding payment details or hiding cryptocurrencies something of that sort and it's actually a really really awesome way that allows react to control more of like how the rendering pipeline can manage different gsx trees and render different types of parts of the whole ui elements actually and the third one and one of the most favorite ones for me personally is the state update patching now what this will basically allows react is actually to have less re-renders and just badge different set state into a single set state so you can have a lot more better and smoother experience plus the performance is gonna boost to a double or triple depending on how many states you're gonna have it's a really really awesome technique now and react can batch multiple states now before react actually batched only on event handlers that are handled by react or the gsx elements so react right now is actually capable to batch state changes on an event scope so it's actually more of like versatile compared to how rx was working before it only could batch on version 16 and 17 reacts only could batch different set states or updates in reacts event handlers or like when i set it on gsx but right now or event handlers are benefiting from this particular feature which can boost it a lot more so of course when i'm talking about event handlers you can just think about it like dom events or like dumb event listeners promises callbacks event handlers when fetching the data and yeti ariana so it's absolutely amazing to have this feature right now and it's actually a really really awesome feature and also react right now provides a de facto to get out of this loop so if you don't want to batch different updates and you just want to have it regularly working the same way maybe your application when migrating from version 17 to version 18 it couldn't actually work really well with this really really awesome new feature of like batching so you want to change it back actually there is a defect or there is an opt-out feature that allows you to opt out of this and go back to the previous one so for example here you can imagine this particular example where we have its own upvote function and this object function gets called whenever you click on this particular button and there is actually another one which is sentiments so if the upvotes are greater than 10 you're going to see good if they are less than 10 you're going to see bad so you're just going to show your different emojis that's what it is so one in here what i'm doing is actually using the new batching feature because i'm just using this and this is actually an event handler and this is actually a gsx event handler and whenever you click on that both of these the set sentiments either this one on this one depending on the if statements and the set number of votes are both going to be batched into a single update rather than calling the set state or updating react twice as it was before so for example we got here like console.log rerender now let's go ahead and see how many times this re-render is going to be called so if i go to my example i'm going to click upvote as you can see every single time i click on alvo there is a single re-render okay so clicking out vote over i'm gonna go into 10 and see how it does it's still actually not always pointing out or console login one single re-render that's because react is actually batching it but in the other hand if you want to opt out out of this particular feature and you want to just like go back to the regular react of how updating stuff and you don't want to do any batching you want to just like do this synchronously you want to update this first then it's going to rock re-render then you're going to need to update this one you know next so you want to cue both of these updates and you're just going to basically have it working the same way as react 17 and prior to that so to do this you can use the flash sync function so you can import the flash sync from the react dom particularly not react library they react down particularly so you can have flash sync it takes a cool mac and it takes whatever state you want to set in here so this will be called separately and this the second one will be called separately too so the these both of these set states in here or state updates won't be patched together so if you go back to our example in here and try to do upvotes as you can see whenever i click i get two re-renders just like clicking i get two re-render two renders to renders and that's actually telling us that it's not doing any batching and it's calling set state and it's actually updated reactory re-rendering dual reconstellation two times because of this flux sync and the fourth one is the strict mode or having a stricture restrict mode in react version 18. now what i mean by the strict mode so for example if you're having a diffusion basically a function that is going to be deprecated it's going to warn you saying oh you can't use this particular function because it's duplicated or something like this it just allows you to apply different patterns and and best practices to make use of this on real react application now on reacts version 18 you got this trick to your thing and now what it tells you is actually it will only throw errors in development mode so if you use strict mode in production it doesn't really matter just meant for developments and the react now for the structure mode it will be like automatically in mounting and re-mounting components so you could actually check if the component can preserve state and why is that particularly because this will be useful for upcoming react features to prepare and actually allow react 18 and allow this migration to benefit from these new features so to simply enable streak mode you need to go ahead into your you know rear tree on here and you need to surround your react application with strict mode so you just do react.strict mode and react.strict mode and that is it now if you go back in here can you see i'm doing the re-rendering and i'm no longer using the flash sync so i'm doing the batching in here so the expectations there will be only a single re-render but remember we're using structure mode or the strict tier strict mode and this particularly what we does actually is going to re-render your components particularly a couple of times to make sure you know they work so as soon as you add strict remote you're going to have some warnings in your set before because that's what reacts is actually telling you to do or to use best practices of react whatever so i'm going to completely ignore this and if we try to do up votes it's clearly every single time we get to but this time is this one is bold and this one is more of like a grayish kind of color because this is coming from the react dev tools and this is actually being outputted from actually the strict mode and the two last ones is the ssr suspense streaming support and what does that mean and if you're not familiar with suspense it's basically to tell react to wait for a different data to be available and just to have a fullback ui like a spinner or a loading bar before that is actually available maybe an import maybe something like this and it's mostly used for code splitting and now what actually provides or actually support is actually suspend streaming so it allows you to do a server-side rendering experience with streaming from for example node.js server into a react application you can have these changes actually exchange or transmitted throughout this streaming server and they can be distributed as soon as they are available and the last bumper for you guys actually internet explorer is no longer supported and this is hallelujah for me because i never used or liked internet explorer and i know a lot of you never did that but there are some applications out there they still actually use android explorer or support internet explorer so if you still need internet explorer support and you still need your react application to work on unlinked internet explorer do not upgrade to version 18 and stay on version 17. so thank you guys for watching i hope you guys enjoyed this particular walkthrough reacts version 18 features and what change and how to do migrations so thank you guys for watching before and catch you hopefully in the next ones [Music]

Channel: CoderOne

Views: 22,119

Keywords: React, react, react 18, react v18, new react version, new react, react concurrent, react suspense, react ssr, react client side, react internet explorer, react ie, react v17, react v16, react v1, react batching, react state batching, react state, react vscode, react streaming, migrate react, react 18 migrate, react new features, react deprecated, react-dom deprecated, react dom deperacted, react changes, react 18 changes, love react, react hard, react easy, react 16

Id: bCZVos-yZXw

Length: 14min 55sec (895 seconds)

Published: Mon Apr 04 2022