Qualified.One: REACT 18 - WHATS New & how to upgrade ?

In Web Development

REACT 18 - WHATS New & how to upgrade ? - read the full article about React update, Web Development and from Time to Code on Qualified.One

Share

Tweet

hi everyone i hope you are as excited as i am because ruiat has released a new version ria17 is still the current stable version nevertheless riyadh has released the new features powered by their new conqueror render so lets analyze them together in todays video we are going to cover three main points how to upgrade to react 18 whats new we are going to dive deep into more concord renderings and four new features and one announcement they made and finally we are going to cover how hard it is to update our app with reactating and how long it will take us if you are starting a project you can install it by using npm install react and react iphone dom or if you are using yarn yarn at react react dom otherwise you can upgrade it to the latest version of react by doing install react at 18 and react dom at 18. once we install it we will get a warning message in the console like this react dom render is no longer supported in react 18. use create root instead until you switch to the new api your app will behave up is it is running react 17. this means the code will work but we wont be able to use the 18th version until we do some changes we need to keep in mind that react 17 is still the current stable version right so we just need to switch from react dom dot render to create root and then we call root dot render this is a new method to create a route render or amount according to react documentation we also need to remove the callback from rendering it usually does not have the expected result when using suspense well talk about suspense later so this is before and now we create a function where we return the app and this is what we passed to root.render finally if your app uses server-side rendering with hydration a great hydrate to hydrate root we now import it from react dom client and we pass our main app dip to hydrate root and unlike with create root we dont need a separate root render code here we might also see another warning message when working with the unit test for the first time after updating to react 18. the current testing environment is not configured to support act to fix this we need to set in our test tab file global disk is react act environment to true before running your tests we also need to update our types to the latest version if we use typescript the new types are safer and catch issues that used to be ignored for example now we need to define the props for children whats new in reactating the first thing that we need to talk about is conqueror render cochlear rendering is a new obtaining mechanism to improve performance its only enabled when we use a concurrent features so there are no significant out-of-the-box breaking changes to component behavior if we go to react documentation reacts tell us that concurrency is not a feature is a new behind the scene mechanisms that enables react to prepare multiple versions of your ui at the same time so to put a simple concurrency unlocks new features for us to do this reacts evaluates the entire tree and then performs dome mutations react simultaneously prepare multiple ui versions in the background without blocking the main thread react doesnt render our app synchronously it cant be interrupted and change the order of the elements that are rendered so it might start rendering an update pause in the middle and then continue later the user wont even be aware of this because the ui will seem consistent and as soon as the priority changes for example suppose the user wants to interact with the filters in that case react with immediately focus on that new task and continue with the other slow or large tasks behind the same so we improve the performance and the perceived performance by delaying some stata days creating a fluid user experience the main takeaway about how this works is that conqueror render allow us to focus on what we want to do what experience we want to provide to the user and reality scale of how to deliver that experience suspense on the server to understand how suspense on the server works first however we need to understand the difference between rendering a website using the client side or the server side if you are unsure how client-side process works and the difference between both renderings leave me a comment and ill make a video at this point im going to assume you have some idea about it and we are going to focus on how this new feature works on the server lets recall how the process of rendering something on the server is we fetch the data and then we render all the react components to html so the first thing the user sees is the html structure on content but the user cannot interact with it just yet meanwhile we will load the javascript for these components on the client and connect all the logic to the html render in the browser it is at this point that the page becomes interactive this is called hydrate this can be a bit confusing so lets repeat it first the server sends the html to the browser this gets rendered the browser dont lose the javascript and it connects the javascript with static html generated on the server to make the page 100 interactive each step of the process will happen for the whole application all at once here is a dumb example of the different components our page needs to render if we have one or more slow components it could slow down our whole app and directly freeze freezing until the whole hydration process is completed in this case product is a slow component and is blocking my page from hydration maybe because its making expensive api calls and it takes time for the data to come back or we have a lot of javascript codes to process in this component so what we can do now is exclude the slow components from that initial page render and wrap each of them with suspense suspense is a component that allow us to explain the code and show a temporary fallback component from the client until the slow component code is loaded then the server will render and show its html in the same streaming for example here i will show a loading spinner until the products component is ready i will also wrap personalized product suggestion with suspense because this is a slow component so we can wrap multiples components with suspense in this case header filter and cta sections will follow the normal process loading html loading javascript are hydrating all at once as usual the other two products and personalized product suggestions will go through their own asynchronous process in the order that they show up in the tree oh but thats not all react is really clever if the user come and click in this second block personalized product which is waiting to be hydrated once the product has finished react will pause dehydration and start hydrating this one instead thats because react knows that if the user clicks on it means the user is more interested in having this content ready sap before the other one that was rendering previously react prioritize the part of the app the user finds more interesting lets wrap up before riyadh assumed everything was synchronous now we react we can break the app apart into different blocks and allow them to render asynchronously when they are ready then react will prioritize the components the user clicks on them so we no longer have to wait until all the javascript is 100 connected and is interactive this solves the issue of a slow component holding up the process and improves the user experience by allowing the user to gradually consume the revealed content suspense is a powerful feature that help us to let the user consume content faster and let them know that some other content is coming however the user still perceives the app with fewer visual changes as having loaded faster so this means that if in your app you have loading spinners the user will think that your app is slower than another app that doesnt have these visual elements thats why riyadh has also introduced new apis first i shall mention that these apis will only be available if you have upgraded react and use the new root api as we did at the beginning of this video this new root api enables the new conqueror render and adds out-of-the-box improvements okay lets quickly go through some of them first we have used transition and star transition transitions allow us to split and stay update into an urgent and non-origin part the transition part the way it works is react will interrupt the transition state updates and update the origin updates first we can use use translation to tell riat what parts of our code is not urgent and therefore has lower priority so react will only execute it once the other actions are done for example if we have a filter component to filter down the products list we can wrap the set state function with the use transition tutorial to prioritize other operations over rendering the new products list this means that the user can select an option from the filter drop down this component will be updated straight away react wont need to block the browser from updating the drop down and will then continue rendering the updated product list this helps us to provide visual feedback to the user for unlocking updates so the user knows that the website is not broken even if the list takes a bit longer to render transitions will help us to keep the app more responsive use the third value words similarly but its mainly useful when we work with external libraries that we dont have control over the set state only kicks in when the user has a bad internet connection in the same way let us postpone the render of a non-merging part of the tree react will delay the render until the first origin render is reflected on the screen the default render is interactable and doesnt block user input react has also introduced a hook called use id that we can use it to generate unique ids on the client and the server really useful for component libraries that need unique ids for accessibility react also recommends any estate management library to use use sync external store to make it easier for them to integrate their library with react im putting together a video where i will dive deep into how some of these new apis work from what i have seen so far i think use transition and use the fair value are my favorites so please hit the subscribe button and ring the bell to dont miss my next video today we talk a lot about new features that riyadh has introduced to improve the performance out of the box but not only that riat is thinking in the future one of the features that they want to introduce in the in the next version is to being able to remove a section of the ui while keeping the state especially in these components that get rendered conditionally thats why from this version the react 18 they are laying the groundwork this is going to be really beneficial for components that render a conditional as i said like if we have tabs at the moment every time we amount a component the state of that component gets lost the only way to prevent this is by using state management libraries like reddos or using the use context or higher order components so what react wants is to give us a way where instead of completely amounting these components we could just hide them and preserve the state amounting and remounting trees using the same component stayed as before so this will work in this way riat will intentionally render the component twice by mounting it and mounting it and mounting again to prevent unsafe side effects so in this version riat already simulates this mounting and mounting but only in this development mode so this is how it works react mounts the component layout effects are created and effect effects are created then react simulates a mounting the component by calling a cleanup function inside use effect or a component will amount large out effects are destroyed effects are destroyed then re-assimilates mounting the component with the previous state by calling use effect or component div mount so layout effect setup code runs affects the tab code runs what automatic batching is automatic batching is already available in react but its just works in some situations but joins multiple set state calls into only one update to improve the performance this means that if we have set functions more than once like with here it only updates at the end of the function so it will go through each of them and only when it reaches the end will update it this is better for performance because it avoids multiple re-renders if we check react documentation we can find this currently re-accessing earlier only updates inside react event handlers are batch by default batch updating also works within use effect the idea behind this is that we dont have to worry if we have more than one set to stay called inside a brienne event handler or synchronous lifecycle method instead riad will bundle this into a single render for us but separate state updates were not but in a synchronous function such as a single way then cut set them out fat and so on the way this work up until now is that riat will take this function and render the first set state set name and then go to the next one and render the set email and so with all set functions that we have here set address and set birthday all of this is done behind the scenes right so now with reactating we have this functionality across all types of function this works everywhere it doesnt matter where we update the function so before it was pressing in all the event handler and use effect now automatic patting also works in all the asynchronous functions inside of promises set amount or any other event is backed by default if we want to render the set of states synchronously and disable the automatic patching we can use the api flash sync so not only do they introduce a performance improvement but they also allow us to have the previous behavior for those components that need it now is the time for the big announcement so from the 15th of june this year 2022 react will stop supporting ie i think this is a tricky one not sure if im thrilled or not on the one hand many people believe it or not still use internet explorers so if your client uses it you still have to maintain it and this will means that you will have to stay with react 17 but on the other hand its good to see react decided to stop supporting it in this new version because thatll make it easier for other companies to do the same as its getting harder and harder to make your code your website work with the same experience as it would in other browsers now that we have upgraded our app to react 18 and we have talked about the new features i think its time for us to talk about how long it will actually take us to migrate our app to react 18 and how hard this would be according to react it shouldnt require too much effort to migrate europe to react 18. their strategy is to get the application up and running on reactanting without breaking existing code and then little by little start adding concurrent features so we will be able to migrate our app without too much effort without needing to rewrite our components even if we use a library not compatible with react team we can still upgrade to this version and gradually use concurrent features if your app doesnt work after upgrading to react the first thing you need to check is whether its wrapped in strict mode because it got stricter it could be the case that some lock issues that were showing us warning before reactivity now are errors that break your code so you can turn off this feature and solve the problem later on a strict mode wont cut everything but it helps prevent common mistakes thank you everyone please dont forget to subscribe and ring the bell to be notified when my next video comes out also leave me a comment in the description box below with your feedback let me know what you think about these new features that react 18 has just released and hit the like button for the algorithm thank you you