React 19 Changes

React 19 just came out a few weeks ago. It doesn’t introduce a whole lot of new features, but APIs introduced in 18 are now stable, along with some incremental updates.

I made a simple vanilla react todo app to test out the APIs: Website / Repository

React Server Components

RSC API is finally stable. My understanding of RSC is that it’s a static HTML payload for a component or series of components that’s sent through the web server directly rather than the full HTML in the case of SSR or SSG, which needs to be hydrated. And Because the Server components are not reactive, they don’t need hydration (yay!)

The client-server boundaries are still a bit weird to me but the way I see it is that the server component is rendered before the client components so it can pass the data to client components by serializing it in JSON format but the client components can’t do the same because once client component is rendered on the client and the server is in the past which makes it impossible to render it in the client.

Note: The revalidation of the server component probably works by rendering the whole tree again through calling an endpoint internally (My guess).

*It actually uses JSON to send the server component payload which is then converted to HTML on the client (I think).

Things to know:

• use server is only used for server functions.
• use client is use for client components when nesting a client component in server component.

Framework Support

• NextJS: Full Support
• React Router v7(Remix 3.0) --- (I know it’s messed up) has a support for RSC through their loader functions but that’s limited to RouteModule. I saw that in a talk so not sure if that’s even in beta because There’s no mention of it in their docs. But I’m following the project.
• Expo / RN: I think they’re also working on their beta in expo.

use API

It has two purposes:

1. Use a context without the annoying useContext hook.
2. Wait for a promise in a Suspense boundary.

Things to know:

• Don’t use it in server components.
• For promise-based use: needs a Suspense & ErrorBoundary to show fallbacks & errors.
• It’s an API not a hook which means that it needs to be called inside a component or hook but it can be called conditionally unlike a hook.

// Context use:

const themeContext = use(ThemeContext);

// Promise use:

// App.tsx

export default function App() {
  const messagePromise = fetchMessage();

  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

// Message.tsx

("use client");

import { use } from "react";

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);

  return <p>Here is the message: {messageContent}</p>;
}

useActionState hook

Let’s you use an action to get the transition pending status, send a data object back and trigger that action through the new form action & formAction apis.

Things to know:

1. Action: Any function (client or server) that gets called with FormData through the action or formAction property.
2. action & formAction: property for submission available on form, input & button elements.

Here’s a simple example from the reference docs:

// MyComponent.tsx

function action(currentState, formData) {
  // logic here
  return "next state";
}

function MyComponent() {
  const [state, formAction] = useActionState(action, null);

  return <form action={formAction}>{/* ... */}</form>;
}

useFormStatus hook

Simple hook that let’s you see the form state:

// Child Component
const { pending, data, method, action } = useFormStatus();
return <button type="submit" disabled={pending} />;

Things to know:

• Only call inside the child component like context.

useOptimistic hook

Let’s us set optimistic values before a form action resolves. Can be used in conjunction with useActionState. Example:

const [optimisticMessages, addOptimisticMessage] = useOptimistic(
  messages,
  (state, newMessage) => [
    ...state,
    {
      text: newMessage,
      sending: true,
    },
  ]
);

async function formAction(formData) {
  addOptimisticMessage(formData.get("message"));
  formRef.current.reset();
  await sendMessage(formData);
}

Refs

Refs can now be directly passed rather than doing React.forwardRef.

Other Improvements

There’s other stuff like improvements to error logging, first-class support for meta-data, stylesheets and more.