Essential Guide to What's New in React 19 Features and Updates

React 19, released on December 5, 2024, introduces a host of features and updates aimed at enhancing performance, simplifying development, and giving developers more control.

React 19 marks a significant milestone in the evolution of React, bringing forth features that streamline the development process and enhance application performance. Understanding these updates is crucial for developers building modern, efficient, scalable applications.

This blog delves into the key changes, offering detailed insights and practical examples to help you leverage React 19's full potential in your projects.

Actions and New Hooks

Actions

In React 19, Actions provide a streamlined approach to handle data mutations and state updates. They automatically manage pending states, errors, and optimistic updates, reducing the need for boilerplate code.

Example: Using Actions

1function UpdateName() {
2  const [name, setName] = useState("");
3  const [error, setError] = useState(null);
4  const [isPending, startTransition] = useTransition();
5
6  const handleSubmit = () => {
7    startTransition(async () => {
8      const error = await updateName(name);
9      if (error) {
10        setError(error);
11        return;
12      }
13      redirect("/path");
14    });
15  };
16
17  return (
18    <div>
19      <input value={name} onChange={(e) => setName(e.target.value)} />
20      <button onClick={handleSubmit} disabled={isPending}>
21        Update
22      </button>
23      {error && <p>{error}</p>}
24    </div>
25  );
26}

​

In this example, startTransition handles the pending state during the asynchronous operation of updating the name.

useActionState Hook

The useActionState hook complements Actions by managing form states, handling validation, and providing loading indicators during asynchronous operations.

Example: Using useActionState

1function ChangeName({ name, setName }) {
2  const [error, submitAction, isPending] = useActionState(
3    async (previousState, formData) => {
4      const error = await updateName(formData.get("name"));
5      if (error) {
6        return error;
7      }
8      redirect("/path");
9      return null;
10    },
11    null
12  );
13
14  return (
15    <form action={submitAction}>
16      <input type="text" name="name" />
17      <button type="submit" disabled={isPending}>
18        Update
19      </button>
20      {error && <p>{error}</p>}
21    </form>
22  );
23}

​

UseActionState simplifies form state management by handling the asynchronous update process and providing feedback on the operation's status.

useFormStatus Hook

The useFormStatus hook manages the status of form submissions, making it easier to handle multiple forms or create shared form components.

Example: Using useFormStatus

1function FormComponent() {
2  const { status, inProgress, error } = useFormStatus();
3
4  return (
5    <form>
6      {/* Form fields */}
7      <button type="submit" disabled={inProgress}>
8        Submit
9      </button>
10      {status && <p>{status}</p>}
11      {error && <p>{error}</p>}
12    </form>
13  );
14}

​

This hook provides a straightforward way to access and display the current status of form submissions.

useOptimistic Hook

The useOptimistic hook enhances user experience by allowing optimistic UI updates during data mutations. It provides immediate feedback while awaiting server responses.

Example: Using useOptimistic

1function ChangeName({ currentName, onUpdateName }) {
2  const [optimisticName, setOptimisticName] = useOptimistic(currentName);
3
4  const handleChange = (e) => {
5    setOptimisticName(e.target.value);
6  };
7
8  const handleSubmit = async (e) => {
9    e.preventDefault();
10    await onUpdateName(optimisticName);
11  };
12
13  return (
14    <form onSubmit={handleSubmit}>
15      <input
16        type="text"
17        value={optimisticName}
18        onChange={handleChange}
19      />
20      <button type="submit">Update</button>
21    </form>
22  );
23}

​

In this example, useOptimistic allows the UI to reflect changes immediately, providing a responsive experience while the data update is processed.

Server Components and Actions

Server Components

Server Components enable components to run on the server, improving performance and SEO by rendering content server-side before sending it to the client.

Example: Defining a Server Component

1// ServerComponent.server.js
2export default function ServerComponent() {
3  // Server-side logic
4  return <div>Server-rendered content</div>;
5}

​

This approach allows for efficient server-side rendering, reducing the amount of JavaScript sent to the client and improving load times.

Server Actions

Server Actions enable client components to invoke asynchronous functions executed on the server, simplifying data mutations and interactions without needing separate API endpoints.

Example: Using Server Actions

1// Server Component
2export default function Page() {
3  async function createNote() {
4    'use server';
5    // Server-side logic to create a note
6  }
7
8  return (
9    <div>
10      <button onClick={createNote}>Create Note</button>
11    </div>
12  );
13}

​

In this example, the createNote function is marked with the 'use server' directive, indicating it's a Server Action callable from client components. When the button is clicked, React sends a request to the server to execute the createNote function.

New API: use

React 19 introduces the use API, allowing components to read values from resources like promises or contexts directly within the render function. This simplifies data fetching and context consumption.

Example: Using the use API

1import { use } from 'react';
2
3function MessageComponent({ messagePromise }) {
4  const message = use(messagePromise);
5
6  return <div>{message}</div>;
7}

​

Here, the use function retrieves the resolved value from messagePromise, integrating seamlessly with Suspense and error boundaries for efficient asynchronous data handling.

Ref Handling Improvements

React 19 simplifies ref handling by allowing refs to be passed as props in function components, reducing the need for forwardRef.

Example: Passing Refs as Props

1function CustomInput({ inputRef, ...props }) {
2  return <input ref={inputRef} {...props} />;
3}
4
5// Usage
6const inputRef = useRef();
7<CustomInput inputRef={inputRef} />;

​

This approach streamlines ref management, making code more concise and readable.

Hydration and Error Reporting Enhancements

React 19 improves hydration diffs and error reporting during hydration, providing more informative messages to debug mismatches between server-rendered and client-rendered content.

Example: Handling Hydration Errors

1function App() {
2  if (typeof window === 'undefined') {
3    // Server-side rendering
4    return <div>Loading...</div>;
5  }
6
7  // Client-side rendering
8  return <div>App Content</div>;
9}

​

This pattern ensures consistent rendering behavior across server and client, reducing potential hydration errors.

Removal of Deprecated APIs

React 19 phases out older APIs like ReactDOM.render and ReactDOM.hydrate, encouraging the use of modern alternatives such as createRoot and hydrateRoot.

Example: Using createRoot

1import { createRoot } from 'react-dom/client';
2import App from './App';
3
4const root = createRoot(document.getElementById('root'));
5root.render(<App />);

​

Adopting these modern APIs aligns with current best practices and ensures future compatibility.

New Features in React DOM

React DOM introduces features like support for document metadata tags, stylesheet and script management, and improved error boundaries, enhancing SEO, performance, and error handling.

Example: Rendering Document Metadata Tags

1function DocumentMetadata() {
2  return (
3    <>
4      <title>My React App</title>
5      <meta name="description" content="A React application" />
6    </>
7  );
8}

​

This component allows for dynamic rendering of document metadata, improving SEO and document management.

TypeScript and Internal Changes

React 19 refines TypeScript types to align with updated APIs, simplifying type management and reducing potential errors. It modifies internal APIs to discourage reliance on undocumented features, promoting more stable and predictable codebases.

Example: Using Updated TypeScript Types

1import { FC } from 'react';
2
3interface Props {
4  message: string;
5}
6
7const MessageComponent: FC<Props> = ({ message }) => {
8  return <div>{message}</div>;
9};

​

Here, the FC (FunctionComponent) type provides implicit typing for props like children, aligning with React's updated TypeScript definitions.

The Bottom Line!

React 19 introduces features and improvements that streamline development and enhance application performance. Developers can build more efficient, scalable, and maintainable applications by adopting these updates.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.