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
Time to Code
Youtube Blogger

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

Time to Code: REACT 18 - WHATS New & how to upgrade ? - Web Development