What's new in react 18?

What's new in react 18?

concurrency is at focus but with an opt-in option

Featured on Hashnode

React 18 plan is out and now we know that what we can expect in upcoming updates. The majority of all updates are focused on concurrency and giving you more control over the DOM re-rendering events.

React 18 is backward compatible, so don't worry. Students can continue to learn react in whatever the course they are learning from.

If you prefer to watch video, here is one for you.

What's new that will get in react 18

There are 3 major API update in core react that is going to be available to us and all three are going to impress you.

  • Transition
  • Batching
  • Suspense

Let's talk about them one by one.

Transition

To understand the transition, let's take a simple scenario, where there are 2 components. 1 to enter data and 2nd to get the search result back.

a.png

setInput(input);
setSearchResult(searchResult)

These 2 components are managed by 2 states. Now the question is that which one should get more priority? It is clear that setInput() should get more priority as users should get immediate feedback to update the component. What you type should be immediately there, the search result component can come in after some time.

Now you can control the priority of component update in such situation.

// Case if an instant search result 
// or instant username check

// Priority 1
setInput(input);

// Priority 2
startTransition( () => {
    setSearchResult(searchResult)  
})

Batching

Batching is the process in which react holds to send a DOM re-render call. They collect a few state update events that are happening in same function call and sends just 1 call to update the DOM.

function myApp() {
  const [buttonOne, setButtonOne] = useState('green');
  const [buttonTwo, setButtonTwo] = useState('Orange');
  const [buttonThree, setButtonThree] = useState('pink');

  function changeColorToWhite(){
    setButtonOne('white'); //NOT YET
    setButtonTwo('white');  // NOT YET
    setButtonThree('white')
    //Now rerender
  }

  return(
      <>
    <MyButton onClick={changeColorToWhite}></MyButton>
    </>
  )
}

Here in the function, changeColorToWhite DOM re-render will not be pushed on 1st state change or 2nd state change. It will be fired at the end of all state changes. This process is known as batching and this improves performance a lot in react.

But this batching is not consistent. It breaks it's consistency when data is fetched from online requests.

function myApp() {
  const [buttonOne, setButtonOne] = useState('green');
  const [buttonTwo, setButtonTwo] = useState('Orange');
  const [buttonThree, setButtonThree] = useState('pink');

  function changeColorToWhite(){
    bringDataFromAPI().then(() => {

          setButtonOne('white'); // Re render
          setButtonTwo('white');  // Re render
        setButtonThree('white')  //re render



    })
  }

  return(
      <>
    <MyButton onClick={changeColorToWhite}></MyButton>
    </>
  )
}

When we bring data from the web, as soon as the state is changed, DOM re-render is triggered.

In react 18 version, this is being addressed and now we get more consistency in batching the DOM re-rendering. Not only that we can control the re-rendering with methods available to us.

function myApp() {
  const [buttonOne, setButtonOne] = useState('green');
  const [buttonTwo, setButtonTwo] = useState('Orange');
  const [buttonThree, setButtonThree] = useState('pink');

  function changeColorToWhite(){
    bringDataFromAPI().then(() => {
          changeAnotherState(true)
          setButtonOne('white');
          // Just 1 rerender

      flushSync( () => {
        setButtonTwo('white');  
        setButtonThree('white') 
      })
      // A render here

    })
  }

  return(
      <>
    <MyButton onClick={changeColorToWhite}></MyButton>
    </>
  )
}

Here we get just 1 re-render of DOM for all the state changed. Also, we can use flushSync to manually trigger a re-render, if we need it.

Suspense

Suspense update is all about improving server-side rendering. One of the major issues that we face while server-side rendering is that not all of the data is sent at once to the user. First HTML is sent, then CSS and in the meantime, JS is still getting processed in the server. This is also known as Hydrating time. Buttons are great but until event handlers are attached to them, they are just visual elements.

b.png

One solution that react 18 providers us is the suspense element. Instead of sending HTML and CSS of those elements that are very dependent on JS, we can send an alternate component for some time. As soon as the component is ready to be sent, it will automatically get changed by the main component.

c.png In this case, we are sending a spinner component in the blue web page (in the diagram).

import { lazy } from 'react';

const SearchResults = lazy(() => import('./SearchResults.js'));

// ...

<Suspense fallback={<Loader />}>
  <SearchResults />
</Suspense>

There are many other minor features that I am sure are coming up but these are the major ones that will take all the light in this release.

Be in touch and I will post more videos/posts to keep you updated with all that is happening in the programming world.

Did you find this article valuable?

Support Learn Code Online by becoming a sponsor. Any amount is appreciated!