React 19

Welcome to React 19

React 19 brings a suite of powerful features that streamline form handling, enhance server-side rendering, and simplify asynchronous operations. This release marks a significant step forward in React's evolution, focusing on developer experience and performance.

Released on December 5, 2024, React 19 introduces several key features:

Actions

Actions are asynchronous functions that can be passed directly to form elements, replacing traditional event handlers. They simplify form submissions by handling the logic server-side or client-side, depending on the use case.

// server-side action
'use server';

export async function createUser(formData) {
  const name = formData.get('name');
  // Perform server-side operations
}

// client-side component
'use client';

import { createUser } from './actions';

export default function UserForm() {
  return (
    <form action={createUser}>
      <input name="name" />
      <button type="submit">Create User</button>
    </form>
  );
}

This approach enhances code readability and maintains a clear separation of concerns.

New Hook: useActionState

The useActionState hook manages the state of an action, providing insights into pending states and results. It’s particularly useful for handling form submissions and displaying feedback to users.

'use client';
import { useActionState } from 'react';
import { createUser } from './actions';

export default function UserForm() {
  const [state, formAction, isPending] = useActionState(createUser, {
    message: '',
  });

  return (
    <form action={formAction}>
      <input name="name" />
      <button type="submit" disabled={isPending}>
        Create User
      </button>
      {state.message && <p>{state.message}</p>}
    </form>
  );
}

This hook simplifies the management of asynchronous operations within forms.

React DOM: <form> Actions

React 19 allows forms to accept functions directly as their action prop. This enables seamless integration of server or client-side logic without additional event handlers.

<form
  action={async formData => {
    const name = formData.get('name');
    await createUser(name);
  }}>
  <input name="name" />
  <button type="submit">Create User</button>
</form>

This feature streamlines form handling by embedding logic directly within the form’s structure.

React DOM: New Hook: useFormStatus

The useFormStatus hook provides real-time status of a form submission, such as pending state, method, and action. It’s useful for displaying loading indicators or disabling inputs during submission.

'use client';

import { useFormStatus } from 'react-dom';

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

  return (
    <button type="submit" disabled={pending}>
      Submit
    </button>
  );
}

This hook enhances user experience by providing immediate feedback during form interactions.

New Hook: useOptimistic

useOptimistic allows for optimistic UI updates by rendering a temporary state while an asynchronous operation is in progress. This improves perceived performance and responsiveness.

'use client';
import { useOptimistic } from 'react';

function CommentForm({ addComment }) {
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    [],
    (state, newComment) => [...state, newComment]
  );

  const handleSubmit = async formData => {
    const comment = formData.get('comment');

    addOptimisticComment(comment);
    await addComment(comment);
  };

  return (
    <form action={handleSubmit}>
      <input name="comment" />
      <button type="submit">Add Comment</button>
      <ul>
        {optimisticComments.map((c, i) => (
          <li key={i}>{c}</li>
        ))}
      </ul>
    </form>
  );
}

This hook provides a smoother user experience by updating the UI immediately.

New API: use

The use API enables reading of resources like promises or contexts during render. It suspends rendering until the resource is ready, simplifying data fetching in components.

import { use } from 'react';

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);

  return comments.map(comment => <p key={comment.id}>{comment.text}</p>);
}

This API enhances server-side rendering and data fetching strategies.

New React DOM Static APIs

React 19 introduces prerender and prerenderToNodeStream in react-dom/static for improved static site generation. These APIs wait for data to load before generating HTML, enhancing performance in streaming environments.

import { prerender } from 'react-dom/static';

const html = await prerender(<App />);

These APIs facilitate better integration with server-side rendering workflows.

React Server Components and Server Actions

React 19 stabilizes Server Components and introduces Server Actions, allowing for seamless server-side logic within components. This reduces the need for API endpoints and enhances performance.

// server action
'use server';
export async function createUser(data) {
  // server-side logic
}

// client component
'use client';
import { createUser } from './actions';

export default function UserForm() {
  return (
    <form action={createUser}>
      <input name="name" />
      <button type="submit">Create User</button>
    </form>
  );
}

This approach simplifies full-stack development by integrating server logic directly into React components.

Conclusion

React 19 introduces a range of features that enhance developer experience, streamline form handling, and improve performance. By leveraging Actions, new hooks, and Server Components, developers can build more responsive and maintainable applications.

‘Till next time!