What's New in React 18

#react #webdev #javascript #frontend

Some exciting new improvements have been launched with React 18. When React 18 was announced a year ago, the team promised a gradual adoption strategy. Now, a year later, this is exactly what they've done and you can upgrade your app to the newest version.

React 18 comes with a few breaking changes, depending on how you use it. But all in all, it also brings out-of-the-box performance improvements including batching more by default, which removes the need to manually batch updates in application or library code.

For some, this is music to their ears, others might need more convincing. So let's dive deeper into some of the most important new changes that Facebook's team has brought us.

Breaking Changes in React 18
What would a major release be without a breaking change? Well, this version of React is a bit different, and you will see why in a second. One of the changes you can make is to alter render to createRoot like so:

// Before
import { render } from "react-dom";

const container = document.getElementById("app");
render(<App tab="home" />, container);

// After
import { createRoot } from "react-dom/client";

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App tab="home" />);

createRoot enables concurrent features from React 18. If you don't use it, your app will behave like it's on React 17, and you won't get to experience sweet out-of-the-box optimization. So for now, you will see a deprecation notice if you're still using render instead of createRoot.

This is a good chance to experiment and see if the new concurrent features improve your production performance. You can run an experiment where one variant has render and the other uses createRoot. Also, you won't break your code by switching to the new API. You can gradually switch to createRoot without the possibility of breaking your app.

To ensure you migrate your app properly, try enabling strict mode. Strict mode will let you know what is happening with components in development, and it will print out any irregularities in the console. Enabling strict mode won't affect production builds. You can do it somewhere in your app like so:

import React from "react";
import { createRoot } from "react-dom/client";

function App() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <Content />
          <SignUpForm />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);

Also, if you're using hydrate for server-side rendering with hydration, you can upgrade to hydrateRoot:

// Before
import { hydrate } from "react-dom";
const container = document.getElementById("app");
hydrate(<App tab="home" />, container);

// After
import { hydrateRoot } from "react-dom/client";
const container = document.getElementById("app");
const root = hydrateRoot(container, <App tab="home" />);
// Unlike with createRoot, you don't need a separate root.render() call here.

Automatic Batching in React 18
React 18 brings us automatic batching. It might sound confusing — you might ask: 'what batching?'. We'll go through it, don't worry. Let's take a look at an example:

// Before: only React events were batched
setTimeout(() => {
  setSize((oldSize) => oldSize + 1);
  setOpen((oldOpen) => !oldOpen);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched
setTimeout(() => {
  setSize((oldSize) => oldSize + 1);
  setOpen((oldOpen) => !oldOpen);
  // React will only re-render once at the end (that is batching)
}, 1000);

Automatic batching means that React will now batch updates you make inside your components. Batching prevents unnecessary renders of your component.

In React 17, if you change the state of the component two times, the component will re-render two times. Now, in React 18, the two updates will be batched, and the component will render only once. And that's only if you're using createRoot instead of render.
Wrap-up: React 18 Brings Great Improvements
A lot of new and exciting announcements have come from the React team about React 18. To sum up, here's an overview:

React.render will warn you that you should replace it with React.createRoot
ReactDOM.hydrate will tell you the same about React.hydrateRoot
Automatic batching is batching state updates and performing them together, thus reducing the re-rendering count.
Transitions let you do more critical state updates and possibly interrupt other non-urgent updates. The API is useTransition and startTransition.
Suspense allows you to SSR your components in a way that doesn't block other components.
Suspense also opens a way for data frameworks to come in and build on it. That way, data fetching with a data framework will make the components suspend out of the box.
A couple of new hooks have come in to save the day. You might not need debounce and throttle in your code if you decide to use useDeferredValue.
Old browsers will be affected, so be sure to add polyfills if you need to support them.
That's it! We've gone through all the major changes. You can read the full React 18 changelog on GitHub.

Thanks for reading.