Everything New In React 18

React 18 Alpha is here there are many things that got added in react 18 as react 17 who was a bit of a bore for developers there really wasn't much added But it's definitely not a case with react 18 In this article we will look at some of the top updates.

What's new?

1.The New Root API :

Here’s what we’re used to seeing

ReactDOM.render(<App/>, document.getElementById(“root”))

We pass reactDOM.render our App component and then document.getElementById and our root element. So we’re rendering our app component into our root element on the page pretty simple.

Here’s the new way

Const root = ReactDOM.createRoot(document.getElementById(“root”))
root.render(<App />)

We have a root variable which is equal to the new method called create root. This is being passed our root element and then we call root.render and pass our app component.

Our app component it’s accomplishing the same thing but in a different way. The old way called the legacy root API and it’s still going to work in react 18 but will be deprecated at some point by using the new root API you’re going to get access to all of the react 18 improvements including the concurrent features that we’re going to talk about in this article.

2. Suspense :

In this update, we’re going to get full support for suspense. Now, what is suspense as the name implies it suspends something until it’s ready to be rendered.

<Suspense fallback={<h1>Loading….</h1>}>
   <ComponentFetchingData /> 
   <AnotherComponent />
</Suspense>

In this example, we have a component that needs time to fetch data before it’s ready to be rendered suspense will use the fallback until the data is returned and the components are rendered.

It's important to note here that the random component here is not waiting on data but it’s still going to be suspended until everything inside the suspense is ready to be rendered.

Now suspense is going to be extremely useful with server-side rendering currently with ssr you’re going to get fully rendered HTML but your browser still has to load the javascript and hydrate the entire page before it can become interactive suspense could speed up this load time dramatically using the example from the react 18.

<Layout>
   <NavBar />
   <Sidebar />
   <RightPane>
        <Post />
        <Suspense fallback={<Spinner />}>
    <Comment />
        </Suspense>
   </RightPane>
<Layout />

Above we have a page loading a navbar, a sidebar, a post, and a comment. Now we really don’t need the comments to load before the site becomes interactive so we’re going to suspend the comments so that the viewer can start reading the article and then we’ll load the comments in the background.

3. Automatic Batching :

In React 17 and earlier react with batch re-render updates during a browser event like a click.

React 17 will not batch the re-renders if you need to fetch data and then update the state. With react 18 if you use the new create root API all state updates will automatically be batched no matter when they happen.

If there is some critical component you don’t want to batch. You can opt-out of this using ReactDOM.flushSync().

4. startTransition API :

This is a new API introduced with this release, which helps in keeping the current webpage responsive and being able to do heavy non-blocking UI updates at the same time.

This will tell react which updates are urgent and which can wait this will help the UI remain responsive.

For urgent updates like typing, hover, clicking, we call props/functions usually like this :

setText(input)

For non-urgent or heavy UI updates, we can wrap it in a startTransition API as :

startTransition(() => {

  setText(input);
});

5. Suspense List :

A <SuspenseList /> takes in revealOrder prop with values forward, backward or together

<SuspenseList revealOrder="forwards">
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={1} />
  </Suspense>
  <Suspense fallback={<LoadingSpinner />}>
    <CardComponent id={2} />
  </Suspense>
 </SuspenseList>

Here the card component will be revealed in a forward direction(until the data is fetched, will fell back to LoadingSpinner Component). Similarly, backward will reveal Cards in reverse order, and together prop will render everything "together".

6. useDeferredValue

const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });

useDeferredValue takes in the state value and a timeout in ms and Returns a deferred version of the value that may “lag behind” it for most timeoutMs.

This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch.

We can install React 18 and reactDOM right away using:

npm install react@alpha reactDOM@alpha

Wrapping Up

React 18 is an alpha release right now and not suitable for production but it is always better to start learning about these features now.

React 18 will go into public beta in a few months.

Thank You for reading. Signing off 🙌.

Feel free to reach out 👇

GitHub: github.com/Push9828
Twitter: twitter.com/PushkarThakur28
LinkedIn: linkedin.com/in/pushkarthakur28

Pushkar's Blog