Introduction to React 18

Meet React 18

For years, React has helped developers build fast, interactive user interfaces. With version 18, the focus shifts to making those interfaces feel even more responsive, especially in complex applications. The big idea behind this update is something called concurrency.

The Magic of Concurrency

Imagine a chef in a busy kitchen. In previous versions of React, the chef would have to finish one entire dish before starting the next. If a big, complex dish (like rendering a large list) was in progress, a small, quick order (like a user clicking a button) would have to wait. This could make the app feel sluggish.

React 18 introduces concurrency, which is like giving our chef the ability to pause a long task, handle a quick one, and then return to the first task without losing their place. It allows React to work on multiple state updates at once—like rendering a large data visualization while also responding instantly to user input. This makes for a much smoother and more fluid user experience.

This concurrent rendering model is the foundation for most of React 18's new features. It's not something you always control directly; much of it happens automatically behind the scenes. However, you enable it through a new way of starting your app.

Key Changes

So, what actually changed? While concurrency is the underlying theme, it enables several practical improvements.

Feature	How it worked before (React 17)	What's new in React 18
State Updates	Updates were only batched inside event handlers (like clicks). Updates inside promises or timeouts would each cause a re-render.	Automatic batching is now the default. Multiple state updates are grouped into a single re-render, no matter where they happen.
Rendering	Once rendering started, it couldn't be interrupted. A large component update could block the main thread, making the UI unresponsive.	Rendering is interruptible. React can pause rendering to handle more urgent updates, like user input.
Root API	The app was mounted to the DOM using `ReactDOM.render()`.	A new `ReactDOM.createRoot()` API is used. This is what enables all the new concurrent features.

Let's look at a couple of these improvements more closely.

Automatic Batching

Batching is when React groups multiple state updates into a single re-render for better performance. Imagine telling a waiter you want water, then a menu, then an appetizer, all in separate requests. It’s inefficient. It's much better to give them your entire order at once.

Previously, React only did this for updates inside browser events like clicks. If you updated state after fetching data or within a timeout, each setState would trigger a separate re-render. Now, it's automatic everywhere.

function handleClick() {
  fetchSomething().then(() => {
    // In React 18, these two updates are batched
    // into a single re-render automatically.
    setCount(c => c + 1);
    setIsLoading(false);
  });
}

This small change leads to better performance out-of-the-box and prevents your components from re-rendering more often than necessary.

Transitions

Concurrency also allows us to tell React that some updates are less urgent than others. This is done using a new feature called startTransition.

Think about a search input that filters a long list. As you type, you want the input field itself to update immediately. But the list of results might take a moment to filter, and you don't want that heavy work to make your typing feel laggy.

With startTransition, you can wrap the less important state update (filtering the list) and tell React, "Hey, handle this when you have a free moment, but don't let it block the user from typing." This keeps the UI snappy while the heavy lifting happens in the background.

React 18 is fundamentally about improving the user experience by making applications feel more responsive, even when they're busy.

Upgrading is straightforward for most apps. It mainly involves switching from the old ReactDOM.render to the new ReactDOM.createRoot. This one change opts your entire application into the new concurrent features, letting you take advantage of these improvements right away.

Quiz Questions 1/5

What is the core concept introduced in React 18 that allows the UI to remain responsive even during large rendering tasks?

Quiz Questions 2/5

How did the behavior of 'batching' state updates change in React 18?

Mastering React 18 Features