What's new in React 18?

ReactJunior~5 min read

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)	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)	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)	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)	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)	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)	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)	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)	This applies only in development - this behavior is not enabled in production.
Other "minor" changes and improvements	For example: • a component can now return `undefined` (without an error) (blog.appsignal.com) • fixed a memory leak on unmount (React clears more internal fields) • 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.

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) 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)
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)

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) 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)
Improved hydration logic and interaction with third-party scripts / extensions - React 19 makes client-side hydration more resilient. (dev.to)
The Context API got some optimizations: performance and usage patterns became more convenient. (dev.to)

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)
New APIs for loading / preloading resources: preload, preinit, plus improved support for assets, styles, and asynchronous scripts. (dev.to)
Improvements to Suspense, Server Components, and streaming rendering - React 19 strengthens the capabilities laid down in React 18. (dev.to)

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What's new in React 18?