Suggest an edit

Improve this article

Refine the answer for “What's new in React 18?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What's new in React 18

Here are the main changes and additions React 18 introduced:

| Feature / change | What it gives / why it's needed | Details / what to watch for |
| --- | --- | --- |
| **Concurrent Rendering (the underlying mechanism)** | Lets React "pause", "resume", or "discard" the rendering of parts of the UI tree depending on task priority, which helps the interface stay responsive. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | This capability does not "turn on everywhere" right away - many features (Transitions, server-side Suspense, and others) rely on it. |
| **Automatic Batching** | React can now automatically batch state updates even in asynchronous contexts (for example, inside `setTimeout`, promises, and so on), not just inside event handlers. This reduces unnecessary renders. ([freecodecamp.org](https://www.freecodecamp.org/news/react-18-new-features/)) | If for some reason you need to opt out of batching, you can use `flushSync`. |
| **Transitions / useTransition / startTransition** | Let you mark updates as "non-urgent" (transitions), for example, when a UI change can be delayed slightly to avoid blocking user input. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | Updates inside `startTransition` can be interrupted if more urgent updates appear (for example, text input). |
| **useDeferredValue** | A hook that lets you "defer" part of the UI when it is not critical - useful when some data or components can be updated a bit later without hurting the main interactivity. ([simplilearn.com](https://www.simplilearn.com/tutorials/reactjs-tutorial/react-eighteen-new-features)) | Good for lists, filters, and similar scenarios. |
| **New hooks and APIs** | For example: `useId` (for unique IDs consistent between client and server), `useSyncExternalStore`, `useInsertionEffect`, and others. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | These hooks are especially useful for libraries or cases that need precise behavior under concurrent rendering. |
| **The new Root API:** `createRoot`**,** `hydrateRoot`**, and so on** | To enable React 18's capabilities (concurrency, automatic batching, and so on), you need to create the root via `createRoot` (instead of `ReactDOM.render`) and use `hydrateRoot` to hydrate server rendering. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | The old APIs still work, but they do not use the new capabilities. |
| **Suspense / server-side rendering / streaming** | React 18 extends `Suspense` (previously used mainly for code-splitting) and adds support for streaming HTML on the server, which lets it send parts of the HTML as they become ready. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | These capabilities are especially relevant for frameworks like Next.js, Remix, and so on. |
| **Behavior changes in** `StrictMode` **(development mode)** | In strict mode React will mount → unmount → mount components again, to surface potential problems (effects, cleanup, and so on). ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | This applies only in development - this behavior is not enabled in production. |
| **Other "minor" changes and improvements** | For example: <br>• a component can now return `undefined` (without an error) ([blog.appsignal.com](https://blog.appsignal.com/2022/04/13/whats-new-in-react-18.html)) <br>• fixed a memory leak on unmount (React clears more internal fields) <br>• dropped support for very old browsers (React now assumes modern capabilities like `Promise`, `Symbol`, and so on) | When migrating, check whether your app depends on behavioral quirks of the old APIs or old browsers. |

Overall, moving from React 17 to React 18 is less of a radical "API break" and more of a fundamental strengthening of rendering, which opens the door to new capabilities and a more responsive UI.

## What's new in React 19

### 1. Actions

React 19 introduces the concept of *Actions* - asynchronous functions that can run inside transitions, and that automatically manage pending state, errors, and optimistic updates. ([react.dev](https://react.dev/blog/2024/12/05/react-19))
Example:

```javascript
const [error, submitAction, isPending] = useActionState(
  async (prev, formData) => {
    const error = await updateName(formData.get("name"));
    if (error) return error;
    redirect("/path");
    return null;
  },
  null
);
```

This approach replaces manually written management of `isPending`, `error`, form updates, and so on.

---

### 2. A new set of hooks and APIs around Actions and forms

- `useOptimistic` - for optimistic updates (for example: update the UI immediately, before the request finishes, with the ability to roll back)
- `useFormStatus` - for tracking a form's status (whether it is submitting, done, or has an error) ([telerik.com](https://www.telerik.com/blogs/whats-new-react-19))
- `useActionState` - for working with Actions (see above)
- The experimental (or gradually rolling out) `use()` API - a hook that lets you "await" a Promise directly in a component's body / inside render, simplifying asynchronous logic. ([kellton.com](https://www.kellton.com/kellton-tech-blog/react-19-latest-features-and-updates))

---

### 3. The new React Compiler

React 19 includes a new compilation / transformation of React code that optimizes the code at build time: it reduces bundle size, optimizes rendering, and removes the need to manually use optimizations like `useMemo`, `useCallback`, `memo`. ([freecodecamp.org](https://www.freecodecamp.org/news/new-react-19-features-you-should-know-with-code-examples/))
In other words: many optimizations will now happen "automatically" thanks to the compiler.

---

### 4. Support for new ref and context usage patterns

- Function components can now receive `ref` as a regular prop, with no need for `forwardRef`. ([freecodecamp.org](https://www.freecodecamp.org/news/new-react-19-features-you-should-know-with-code-examples/))
- Improved hydration logic and interaction with third-party scripts / extensions - React 19 makes client-side hydration more resilient. ([dev.to](https://dev.to/gladiatorsbattle/react-19-stable-release-whats-new-and-how-to-upgrade-299d))
- The Context API got some optimizations: performance and usage patterns became more convenient. ([dev.to](https://dev.to/mukhilpadmanabhan/react-19-the-features-you-need-to-know-55h6))

---

### 5. Improved support for forms, metadata, and resources

- The ability to write document metadata (for example, `<title>`, `<meta>`, and others) inside components (for example: `<title>{post.title}</title>` inside a component) - simplifies SEO and integration with server rendering. ([react.dev](https://react.dev/blog/2024/12/05/react-19))
- New APIs for loading / preloading resources: `preload`, `preinit`, plus improved support for assets, styles, and asynchronous scripts. ([dev.to](https://dev.to/gladiatorsbattle/react-19-stable-release-whats-new-and-how-to-upgrade-299d))
- Improvements to Suspense, Server Components, and streaming rendering - React 19 strengthens the capabilities laid down in React 18. ([dev.to](https://dev.to/hamzakhan/react-19-beyond-whats-new-and-whats-next-in-2025-fh6))

---

## Why this matters and how it affects development

- Boilerplate is reduced: less explicit management of form submission state, errors, pending. Actions plus the new hook give a more declarative approach.
- Better performance thanks to the compiler: less need to manually optimize with `useCallback`, `useMemo`.
- Better DX (developer experience): the code becomes cleaner, with less boilerplate.
- SEO / server rendering become more powerful: metadata, resources, hydration are all improved.
- Migration and compatibility: it is important to check the libraries you use, since some legacy APIs may be deprecated / changed.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts1007 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.