React 19 has been out for a while, and it brings with it a host of new features and improvements that promise to enhance developer experience and application performance. Many of these features have been present in other frameworks, but their integration into React provides new tools for building dynamic and performant applications. Here’s everything you need to know about React 19.

Key Features in React 19

1. Async Functions in Transitions

React 19 introduces support for asynchronous functions in transitions, allowing developers to manage complex state changes and UI updates more fluidly. This is especially useful when dealing with data fetching or animations that depend on external responses.

import { useTransition } from 'react';

const [isPending, startTransition] = useTransition();

const handleClick = async () => {
  startTransition(async () => {
    const data = await fetchData();
    setState(data);
  });
};

2. useTransition Hook

The useTransition hook has been enhanced to support async transitions. If there are multiple ongoing transitions, React will batch them and only display the final result. This reduces unnecessary renders and improves performance.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setState(newState);
});

3. Actions and useActionState

Functions that trigger transitions are called actions. These actions work closely with new hooks like useActionStateand useFormStatus, enabling developers to track the state of async operations. For example, useActionState provides feedback on whether an action is pending, completed, or encountered an error.

import { useActionState } from 'react';

const [state, formAction] = useActionState(async (prevState, formData) => {
  return await submitForm(formData);
}, initialState);

4. Optimistic UI with useOptimistic

Actions in React 19 trigger transitions that are asynchronous by nature. However, optimistic updates are synchronous, meaning the UI reflects changes immediately. The useOptimistic hook is designed to help developers create snappy and responsive user interfaces by showing expected outcomes before async actions complete.

const [optimisticState, addOptimistic] = useOptimistic(state);

const handleClick = () => {
  addOptimistic(prev => [...prev, newItem]);
};

5. React Server Components (RSC)

Traditionally, React components were either rendered on the client or the server, using SSR (Server Side Rendering) or CSR (Client Side Rendering). RSC offers a new approach by allowing components to be partially rendered on the server and then hydrated on the client. This leads to faster load times and better SEO.

6. The use API

The new use API in React 19 allows developers to handle asynchronous resources—like Promises or Contexts—more seamlessly, especially in Server Components. However, there’s an important distinction: while the use() function is powerful and simplifies async handling, it is currently only supported in Server Components. Attempting to use it inside a Client Component will result in an error.

const data = use(fetchData());

7. Server Actions

Server actions enable developers to offload specific logic to the server without leaving the React ecosystem. This is especially beneficial for operations like data fetching, authentication, or complex processing tasks that might affect the client’s performance.

8. ref as a Prop

React 19 introduces the ability to pass ref as a prop, streamlining the process of accessing component instances or DOM nodes. This enhancement makes it easier to handle scenarios like focus management, animations, or third-party library integrations.

import { useRef } from 'react';

function FancyInput({ ref }: { ref: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} />;
}

export default function RefExample() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      button>
    div>
  );
}

9. Native Metadata Management

React now supports native document metadata management, eliminating the need for third-party libraries or custom solutions for setting page titles, descriptions, and other meta tags dynamically.

export default function MetadataExample() {
  const post = {
  title: 'Understanding React 19 Metadata',
  description: 'Learn how to manage document metadata with React 19 natively.',
  };

  return (
    <article>
      <title>{post.title}title>
      <meta name="description" content={post.description} />
    article>
  );

10. Stylesheet Support and Preloading APIs

The new stylesheet support in React 19 provides an improved way to handle CSS in applications. Additionally, preloading APIs enhance the ability to manage resource loading, improving performance and reducing the time to first paint.

export default function StylesheetExample() {
  return (
    <div>
      <link
        rel="preload"
        as="style"
        href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
      />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
      />
      <style>{`
        .roboto-mono {
          font-family: 'Roboto Mono', monospace;
        }
      `}style>
      <p className="roboto-mono">
        This paragraph uses <strong>Roboto Monostrong>, a monospaced font loaded natively in React 19.
      p>
    div>
  );
}

Conclusion

React 19 is a substantial update that not only introduces new features but also refines existing patterns to make development smoother and more efficient.

If you’d like to see these features in action, you can check out my GitHub repo with practical examples:

👉 react19-examples