11 New React 19 Features You Shouldn’t Miss Out

React applications often accumulate the same patterns: separate state variables for loading and errors, custom form-submission handlers, optimistic updates that are difficult to roll back, and wrapper components created only to forward a ref.

After working with these patterns across React projects, the most noticeable thing about React 19 is not one dramatic API. It is how many everyday workflows now require less coordination code.

React 19 became stable in December 2024, and the React 19 release line has since added further capabilities through React 19.1 and 19.2. This guide focuses first on the React 19 features most developers can use immediately, followed by the important additions available in React 19.2.

What Is React 19?

React 19 is a major version of the React library that expands React’s support for asynchronous operations, forms, resource loading, document metadata, refs, Server Components, and rendering diagnostics.

Its most significant change is the introduction of Actions. An Action is an asynchronous function that React can coordinate as part of a user interaction or form submission. React can track the pending state, manage optimistic updates, handle submission errors, and reset uncontrolled forms after successful submissions.

React 19 does not replace state management libraries, data-fetching frameworks, or form libraries in every application. It gives React stronger built-in primitives so simpler workflows no longer require as much custom infrastructure.

React 19 Features at a Glance

1. Actions Simplify Asynchronous Updates

Before React 19, updating data usually meant coordinating several pieces of state manually.

function UpdateProfile() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault();
    setIsPending(true);
    setError(null);

    try {
      await updateProfile({ name });
    } catch (error) {
      setError(error.message);
    } finally {
      setIsPending(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
      />

      <button disabled={isPending}>
        {isPending ? "Saving..." : "Save profile"}
      </button>

      {error && <p>{error}</p>}
    </form>
  );
}

There is nothing fundamentally wrong with this implementation. The problem is repetition. Every mutation needs pending-state handling, error handling and protection against repeated submissions.

React 19 allows asynchronous functions to run inside transitions:

import { useState, useTransition } from "react";

function UpdateProfile() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  function handleSubmit() {
    startTransition(async () => {
      const result = await updateProfile({ name });

      if (!result.success) {
        setError(result.message);
        return;
      }

      setError(null);
    });
  }

  return (
    <>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
      />

      <button onClick={handleSubmit} disabled={isPending}>
        {isPending ? "Saving..." : "Save profile"}
      </button>

      {error && <p>{error}</p>}
    </>
  );
}

React refers to functions executed inside an asynchronous transition as Actions. Actions coordinate asynchronous work while React manages the transition’s pending state.

The concept also powers React 19’s form APIs. According to the official release documentation, Actions are intended to simplify pending states, errors, optimistic updates, and sequential requests that previously had to be managed separately.

2. useActionState Brings Submission Logic and State Together

useActionState Runs an Action and stores the value returned by that Action.

Its basic signature is:

const [state, formAction, isPending] = useActionState(
  action,
  initialState
);

The Action receives the previous state as its first argument. When used as a form Action, it receives FormData as its second argument.

import { useActionState } from "react";

async function updateAccount(previousState, formData) {
  const email = formData.get("email");

  if (!email) {
    return {
      success: false,
      message: "Email is required."
    };
  }

  const response = await fetch("/api/account", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ email })
  });

  if (!response.ok) {
    return {
      success: false,
      message: "We could not update your account."
    };
  }

  return {
    success: true,
    message: "Account updated successfully."
  };
}

export default function AccountForm() {
  const [state, formAction, isPending] = useActionState(
    updateAccount,
    {
      success: false,
      message: ""
    }
  );

  return (
    <form action={formAction}>
      <label htmlFor="email">Email address</label>
      <input id="email" name="email" type="email" required />

      <button type="submit" disabled={isPending}>
        {isPending ? "Updating..." : "Update account"}
      </button>

      {state.message && (
        <p aria-live="polite">{state.message}</p>
      )}
    </form>
  );
}

This component no longer needs separate state variables for:

• Whether the request is running
• The latest validation error
• The server response message
• Whether the previous submission succeeded

The state returned by the Action becomes the first value returned by useActionState.

Why the previous state is passed to the Action

Because the Action receives the preceding state, it can build upon earlier submissions.

async function increment(previousCount) {
  await saveIncrement();
  return previousCount + 1;
}

function Counter() {
  const [count, incrementAction, isPending] =
    useActionState(increment, 0);

  return (
    <form action={incrementAction}>
      <p>Total submissions: {count}</p>
      <button disabled={isPending}>Increment</button>
    </form>
  );
}

In most forms, returning a structured object is more useful than returning a single error string. The object can hold field errors, a general message, submitted data, or a success flag.

return {
  success: false,
  fieldErrors: {
    email: "Enter a valid email address"
  },
  message: "Please correct the highlighted field."
};

When useActionState may not be enough

A complex form may still benefit from a dedicated form library when it needs:

• Client-side validation across many dependent fields
• Dynamic field arrays
• Schema-based validation
• Field-level dirty and touched states
• Multi-step workflows
• Highly controlled inputs

useActionState is most compelling when a form submits data, receives a response, and needs a small amount of state around that process.

3. useFormStatus Gives Child Components Access to Form State

useFormStatus reads the status of the nearest parent form submission.

It comes from react-dom, not react:

import { useFormStatus } from "react-dom";

A reusable submit button can use it to display progress without receiving an isPending prop.

import { useFormStatus } from "react-dom";

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? "Sending..." : "Send message"}
    </button>
  );
}

Use the button inside a form:

import { useActionState } from "react";

async function sendMessage(previousState, formData) {
  const message = formData.get("message");

  const response = await fetch("/api/messages", {
    method: "POST",
    body: JSON.stringify({ message }),
    headers: {
      "Content-Type": "application/json"
    }
  });

  if (!response.ok) {
    return "The message could not be sent.";
  }

  return "Message sent successfully.";
}

function ContactForm() {
  const [message, formAction] = useActionState(
    sendMessage,
    ""
  );

  return (
    <form action={formAction}>
      <textarea name="message" required />

      <SubmitButton />

      <p aria-live="polite">{message}</p>
    </form>
  );
}

useFormStatus returns more than pending:

const {
  pending,
  data,
  method,
  action
} = useFormStatus();

• pending indicates whether the form is being submitted.
• data contains the submitted FormData.
• method identifies the HTTP method.
• action identifies the function or URL handling the submission.

An important placement rule

useFormStatus only reads the status of a parent <form>. Calling it in the same component that renders the form will not give that component the status of its own form.

This will not behave as expected:

function IncorrectForm() {
  const { pending } = useFormStatus();

  return (
    <form>
      <button disabled={pending}>Submit</button>
    </form>
  );
}

Move the hook into a child component rendered inside the form, as we did with SubmitButton.

4. useOptimistic Makes Interfaces Feel Immediate

A user should not always have to wait for the server before seeing the probable result of an action.

If someone adds a comment, likes a post, renames a task or changes an item quantity, the interface can display the expected outcome immediately. The application then confirms or reverses that state after the server responds.

React 19 formalizes this pattern with useOptimistic.

import { useOptimistic } from "react";

function CommentList({ comments, addCommentAction }) {
  const [optimisticComments, addOptimisticComment] =
    useOptimistic(
      comments,
      (currentComments, newComment) => [
        ...currentComments,
        {
          ...newComment,
          sending: true
        }
      ]
    );

  async function submitAction(formData) {
    const text = formData.get("comment");

    const optimisticComment = {
      id: crypto.randomUUID(),
      text
    };

    addOptimisticComment(optimisticComment);
    await addCommentAction(text);
  }

  return (
    <>
      <form action={submitAction}>
        <input name="comment" required />
        <button type="submit">Add comment</button>
      </form>

      <ul>
        {optimisticComments.map((comment) => (
          <li key={comment.id}>
            {comment.text}
            {comment.sending && <small> Sending...</small>}
          </li>
        ))}
      </ul>
    </>
  );
}

While the Action is pending, React displays the optimistic state. After it completes, the component returns to the canonical state supplied through comments.

Optimistic updates still need failure design

useOptimistic Reduces state-management code, but it does not decide how your product should respond to failure.

You still need to choose whether to:

• Remove the optimistic item
• Restore the previous value
• Mark the item as failed
• Display a retry control
• Preserve the user’s input
• Show a global or inline error

Optimistic UI is suitable when an operation usually succeeds and the probable result is easy to reverse. It is less suitable for payment confirmation, permission changes, inventory guarantees, or other actions where displaying unconfirmed success could mislead the user.

5. The New use API Reads Promises and Context

React 19 introduces use, an API that can read a resource such as a Promise or Context during rendering.

const value = use(resource);

When use receives a pending Promise, the component suspends. React displays the nearest Suspense fallback until the Promise resolves.

import { Suspense, use } from "react";

function Profile({ profilePromise }) {
  const profile = use(profilePromise);

  return (
    <section>
      <h1>{profile.name}</h1>
      <p>{profile.bio}</p>
    </section>
  );
}

function ProfilePage({ profilePromise }) {
  return (
    <Suspense fallback={<p>Loading profile...</p>}>
      <Profile profilePromise={profilePromise} />
    </Suspense>
  );
}

If the Promise rejects, the nearest Error Boundary handles the error.

use does not mean “fetch anywhere during rendering”

This is unsafe:

function Profile({ userId }) {
  const profile = use(
    fetch(`/api/users/${userId}`).then((response) =>
      response.json()
    )
  );

  return <h1>{profile.name}</h1>;
}

A new Promise may be created every time the component renders. That can cause repeated requests, uncached-Promise warnings, or a component that keeps suspending.

The Promise should come from a Suspense-enabled framework, a Server Component, or a cache that returns the same Promise for the same resource.

A small client-side cache might look like this:

const profileCache = new Map();

function getProfile(userId) {
  if (!profileCache.has(userId)) {
    const profilePromise = fetch(`/api/users/${userId}`)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Unable to load profile");
        }

        return response.json();
      });

    profileCache.set(userId, profilePromise);
  }

  return profileCache.get(userId);
}

function ProfilePage({ userId }) {
  const profilePromise = getProfile(userId);

  return (
    <Suspense fallback={<p>Loading profile...</p>}>
      <Profile profilePromise={profilePromise} />
    </Suspense>
  );
}

The React documentation recommends using a Suspense-enabled framework or a cached Promise rather than creating a fresh Promise during render.

Does use replace useEffect for data fetching?

Not universally.

use provides a Suspense-compatible way to read an existing asynchronous resource. It does not automatically provide:

• Request caching
• Deduplication
• Cache invalidation
• Pagination
• Refetching policies
• Background synchronization
• Mutation management

Framework data APIs and libraries such as TanStack Query may still be better for applications requiring those capabilities.

Effects also remain appropriate for synchronizing with systems outside React, including browser APIs, subscriptions, analytics services, and third-party widgets.

Reading Context conditionally

Unlike Hooks such as useContext, use can be called conditionally.

import { use } from "react";
import { ThemeContext } from "./ThemeContext";

function Heading({ useTheme }) {
  if (!useTheme) {
    return <h1>Default heading</h1>;
  }

  const theme = use(ThemeContext);

  return (
    <h1 style={{ color: theme.textColor }}>
      Themed heading
    </h1>
  );
}

use still has rules. It must be called within a component or Hook, and it cannot be placed inside arbitrary functions or try/catch blocks.

6. Function Components Can Receive ref as a Prop

Before React 19, passing a ref through a function component required forwardRef.

import { forwardRef } from "react";

const SearchInput = forwardRef(function SearchInput(
  { label, ...props },
  ref
) {
  return (
    <label>
      {label}
      <input ref={ref} {...props} />
    </label>
  );
});

React 19 allows function components to receive ref directly:

function SearchInput({ label, ref, ...props }) {
  return (
    <label>
      {label}
      <input ref={ref} {...props} />
    </label>
  );
}

The parent uses it normally:

import { useRef } from "react";

function SearchBar() {
  const inputRef = useRef(null);

  function focusSearch() {
    inputRef.current?.focus();
  }

  return (
    <>
      <SearchInput
        ref={inputRef}
        label="Search"
        type="search"
      />

      <button onClick={focusSearch}>
        Focus search
      </button>
    </>
  );
}

This removes a wrapper that often existed only because React treated ref differently from ordinary props.

Existing forwardRef components continue to work, so applications do not need to rewrite every component immediately.

7. Callback Refs Can Return Cleanup Functions

Callback refs are useful when a component needs to perform setup as soon as a DOM node becomes available.

Before React 19, developers typically handled cleanup when React invoked the callback with null.

React 19 allows the callback to return a cleanup function:

function ResizablePanel() {
  return (
    <section
      ref={(element) => {
        const observer = new ResizeObserver(([entry]) => {
          console.log(entry.contentRect.width);
        });

        observer.observe(element);

        return () => {
          observer.disconnect();
        };
      }}
    >
      Resize this panel
    </section>
  );
}

The returned function runs when the element is removed or the ref changes.

This is especially useful for:

• ResizeObserver
• IntersectionObserver
• DOM event listeners
• Third-party UI libraries
• Canvas initialization
• Imperative animation tools

Be careful with concise arrow functions that implicitly return the assigned element:

// Avoid this pattern:
<div ref={(node) => (instance = node)} />

Use a block instead:

<div
  ref={(node) => {
    instance = node;
  }}
/>

React 19 interprets a returned function as cleanup, so callback-ref return values should be intentional.

8. Context Providers Have a Cleaner Syntax

Before React 19, Context values were provided through .Provider:

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Dashboard />
    </ThemeContext.Provider>
  );
}

In React 19, the Context object itself can act as the provider:

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext value="dark">
      <Dashboard />
    </ThemeContext>
  );
}

Consumers can still use useContext:

function Dashboard() {
  const theme = useContext(ThemeContext);

  return <main className={theme}>Dashboard</main>;
}

Or they can read it with use when conditional consumption is genuinely needed:

function Dashboard({ themed }) {
  if (!themed) {
    return <main>Dashboard</main>;
  }

  const theme = use(ThemeContext);
  return <main className={theme}>Dashboard</main>;
}

This is primarily a readability improvement. It does not change how Context updates propagate, and it does not solve unnecessary re-renders caused by frequently changing provider values.

Memoize object values when appropriate:

const themeValue = useMemo(
  () => ({
    theme,
    setTheme
  }),
  [theme]
);

return (
  <ThemeContext value={themeValue}>
    <Dashboard />
  </ThemeContext>
);

9. Built-In Document Metadata Support

React 19 allows components to render document metadata such as <title>, <meta> and <link>.

function ProductPage({ product }) {
  return (
    <>
      <title>{product.name} | Example Store</title>

      <meta
        name="description"
        content={product.summary}
      />

      <link
        rel="canonical"
        href={`https://example.com/products/${product.slug}`}
      />

      <main>
        <h1>{product.name}</h1>
        <p>{product.description}</p>
      </main>
    </>
  );
}

React recognizes these elements and moves them into the document’s <head>.

This keeps metadata close to the component responsible for the page content and reduces the need for a separate metadata library in simpler applications.

Does this automatically improve SEO?

It improves metadata management, but it does not automatically make an application search-friendly.

Search visibility still depends on factors such as:

• Whether meaningful HTML is server-rendered or pre-rendered
• Crawlability
• Canonical URL accuracy
• Internal linking
• Metadata quality
• Page speed
• Structured data
• Duplicate-content handling

Client-rendered metadata may still be processed by major search engines, but server-rendered metadata is generally more dependable for crawlers, link previews, and other consumers that do not execute the full application.

Also confirm how your framework manages metadata. Next.js, Remix, React Router and other frameworks may provide their own metadata conventions with routing, deduplication and streaming behavior.

10. Better Stylesheet and Script Management

Reusable components sometimes depend on their own stylesheets. Previously, developers had to ensure those resources were loaded in the correct location and order.

React 19 supports stylesheet precedence:

function ProductGallery() {
  return (
    <Suspense fallback={<p>Loading gallery...</p>}>
      <link
        rel="stylesheet"
        href="/styles/gallery.css"
        precedence="default"
      />

      <GalleryContent />
    </Suspense>
  );
}

React can coordinate the stylesheet with Suspense and delay revealing the boundary until the required CSS is ready. This helps reduce unstyled flashes when streamed content becomes visible.

React 19 also improves handling of asynchronous scripts:

function AnalyticsWidget() {
  return (
    <>
      <script
        async
        src="https://example.com/widget.js"
      />

      <div id="analytics-widget" />
    </>
  );
}

If multiple components render the same asynchronous script, React can deduplicate it and place it appropriately in the document.

React 19 additionally introduces resource-hint APIs such as:

import {
  preconnect,
  prefetchDNS,
  preload,
  preinit
} from "react-dom";

Example:

preconnect("https://api.example.com");

preload("/fonts/inter.woff2", {
  as: "font",
  crossOrigin: "anonymous"
});

These APIs allow applications and frameworks to begin loading important resources before they are discovered through normal rendering.

11. Better Hydration Error Messages

Hydration errors in earlier React versions could produce several warnings for what was effectively one mismatch.

React 19 provides a consolidated message with a diff that helps developers identify how the server-rendered output differs from the client output.

A common hydration mistake is rendering unstable values:

function Timestamp() {
  return <p>{Date.now()}</p>;
}

The server and browser will almost certainly produce different timestamps.

Another example is environment-dependent rendering:

function DeviceMessage() {
  return (
    <p>
      {window.innerWidth < 768
        ? "Mobile layout"
        : "Desktop layout"}
    </p>
  );
}

window is unavailable during server rendering, and the server cannot reliably know the browser width.

React 19’s improved diagnostic output does not remove the mismatch, but it makes its source considerably easier to locate.

What React 19.2 Adds

React 19.2, released in October 2025, extends the React 19 release line with <Activity>, useEffectEventperformance tracks and improvements to server rendering.

<Activity> Preserves Hidden Interface State

Conditional rendering normally removes a component:

{activeTab === "settings" && <Settings />}

When Settings unmounts, its local state is lost.

React 19.2 provides <Activity>:

import { Activity } from "react";

function Dashboard({ activeTab }) {
  return (
    <>
      <Activity
        mode={
          activeTab === "overview"
            ? "visible"
            : "hidden"
        }
      >
        <Overview />
      </Activity>

      <Activity
        mode={
          activeTab === "settings"
            ? "visible"
            : "hidden"
        }
      >
        <Settings />
      </Activity>
    </>
  );
}

In hidden mode, React hides the children, cleans up their effects, and defers their updates. Their state can remain available for when the Activity becomes visible again.

This is useful for:

• Tab interfaces
• Route transitions
• Returning to partially completed forms
• Pre-rendering a likely next view
• Preserving scroll or input state

Keeping everything mounted can consume memory, so <Activity> should be used where preserved state or background preparation provides a measurable experience improvement.

useEffectEvent Separates Events From Effect Synchronization

An Effect may need the latest value of a prop without reconnecting every time that value changes.

Consider a chat connection:

useEffect(() => {
  const connection = connect(roomId);

  connection.on("connected", () => {
    showNotification("Connected", theme);
  });

  return () => connection.disconnect();
}, [roomId, theme]);

Changing the theme reconnects the chat because theme is an Effect dependency.

With useEffectEvent:

import { useEffect, useEffectEvent } from "react";

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification("Connected", theme);
  });

  useEffect(() => {
    const connection = connect(roomId);

    connection.on("connected", onConnected);
    connection.connect();

    return () => connection.disconnect();
  }, [roomId]);

  return <p>Connected to {roomId}</p>;
}

The connection responds to roomId. The notification still reads the latesttheme, but changing the theme does not reconnect the room.

useEffectEvent should not be used to hide genuine dependencies. It is intended for event-like logic called from an Effect, not as a general replacement for dependency arrays.

React Performance Tracks Improve Profiling

React 19.2 adds React-specific tracks to the browser Performance panel. These tracks help developers understand scheduling, component work and rendering alongside network activity and other browser events.

This is useful when a performance problem depends on the relationship between:

• React rendering
• Browser painting
• JavaScript execution
• Network activity
• Suspense boundaries
• User interactions

It does not automatically optimize an application, but it provides better evidence for finding where time is actually being spent.

React 19 Features That Need Framework Support

Some React 19 features are more useful through frameworks than in a client-only React application.

These include:

• React Server Components
• Server Actions or Server Functions
• Streaming server rendering
• Static React DOM APIs
• Suspense-enabled data caching
• Request-level cache management
• Partial pre-rendering

React exposes the underlying capabilities, but frameworks decide how routing, bundling, server execution, caching, deployment and serialization work together.

Check the documentation for your framework before copying a Server Component or server-Action example into a client-only Vite application.

How to Upgrade to React 19

For a standard React application, update React and React DOM together:

npm install react@latest react-dom@latest

If the project uses TypeScript, update the React type packages as well:

npm install --save-dev \
  @types/react@latest \
  @types/react-dom@latest

Then test:

• Application rendering
• Forms and controlled inputs
• Ref behavior
• Hydration
• Suspense boundaries
• Server rendering
• Third-party React libraries
• Test utilities
• Type errors

React 19 includes breaking and notable changes, even though many applications can upgrade with limited modification. Review the official upgrade guide instead of assuming that changing the package version is sufficient.

Important React Server Components security note

Several earlier React 19 Server Component package versions contained serious security vulnerabilities. Fixed releases were published for the affected release lines.

If your application or framework uses React Server Components or React Server Functions, upgrade React and the relevant react-server-dom-* packages to the latest patched versions supported by your framework. Client-only React applications without RSC-capable packages were not affected by the original RSC issue.

Should Every Existing App Adopt the New APIs?

No. React 19 makes several patterns cleaner, but an upgrade does not require rewriting every working component.

A practical migration strategy is:

1. Upgrade React and resolve compatibility issues.
2. Leave stable forms and ref implementations alone initially.
3. Use the new APIs in newly developed components.
4. Replace older patterns when a component is already being modified.
5. Measure whether optimistic updates or Activity improve the experience.
6. Follow framework conventions for data loading and metadata.

For applications with large React codebases, experienced React JS developers can also help audit library compatibility, modernize high-maintenance components, and introduce the new APIs without turning the upgrade into an unnecessary rewrite.

Frequently Asked Questions

What are the main new features in React 19?

React 19 introduces Actions, useActionState, useFormStatus, useOptimistic, use, ref props, callback-ref cleanup, simpler Context providers, document metadata support, resource loading improvements and clearer hydration errors.

What is an Action in React 19?

An Action is an asynchronous function coordinated by React during a transition or form submission. It can work with pending states, errors, optimistic updates and the final result of a mutation.

Does use replace useEffect for data fetching?

No. use reads a cached Promise and integrates it with Suspense. It does not provide caching or invalidation by itself, while Effects remain appropriate for synchronizing with external systems.

What is the difference between useActionState and useFormStatus?

useActionState executes an Action and stores its returned state. useFormStatus reads whether a parent form is submitting and exposes information about that current submission.

Can I stop using forwardRef in React 19?

Yes, new function components can receive ref as a prop. Existing forwardRef components still work, so they can be migrated gradually instead of being rewritten during the initial upgrade.

Does React 19 remove the need for form libraries?

Not entirely. Built-in Actions handle many straightforward forms well, but dedicated libraries remain valuable for large forms, schema validation, field arrays, touched states and complex client-side interactions.

Does React 19 improve SEO?

React 19 improves metadata placement by moving title, meta and link elements into the document head. Effective SEO still depends on rendering strategy, crawlability, content quality, speed and correct metadata.

What is new in React 19.2?

React 19.2 adds <Activity>, useEffectEvent, React Performance Tracks, partial pre-rendering APIs, Node.js Web Streams support and several improvements to Suspense and server-side rendering.

Is React 19 backward compatible?

Many React 18 applications can upgrade without a major rewrite, but React 19 includes breaking changes and new ref, rendering and TypeScript behavior. Test third-party packages and follow the official upgrade guide.

Our Final Words

React 19 is most valuable where React applications previously needed coordination code rather than rendering code.

Actions and the new form hooks make submissions easier to model. useOptimistic Improves responsiveness without maintaining a second permanent state system. use connects asynchronous resources to Suspense, while ref props and Context shorthand remove wrappers that no longer add value.

Metadata, stylesheets and scripts can now live closer to the components that need them. React 19.2 extends that direction with state-preserving Activities, Effect Events and better performance diagnostics.

Not every component needs to be rewritten around these APIs. The better approach is to understand the problem each feature solves and adopt it when it makes the application easier to reason about, not simply because it is new.