import { useActionState } from "react";

function UpdateNameForm() {
  const [error, submitAction, isPending] = useActionState(
    async (prevState, formData) => {
      const name = formData.get("name");
      const error = await updateName(name);
      if (error) {
        return error;
      }
      redirect("/profile");
      return null;
    },
    null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

Hier verwaltet useActionState den übermittlungsstatus und die Fehlerbehandlung für Sie, wodurch der Code sauberer und einfacher zu warten ist.

2. Optimistische Updates mit useOptimistic

Optimistische UI-Updates erm?glichen Benutzern, ?nderungen sofort zu sehen, w?hrend eine asynchrone Anfrage ausgeführt wird. Der neue useOptimistic-Hook macht dieses Muster unkompliziert.

Beispiel: Optimistische Namens?nderung

import { useOptimistic } from "react";

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName); // Show optimistic state
    const updatedName = await updateName(newName); // Wait for the async request
    onUpdateName(updatedName); // Update the actual state
  };

  return (
    <form action={submitAction}>
      <p>Your name: {optimisticName}</p>
      <input type="text" name="name" />
      <button type="submit">Change Name</button>
    </form>
  );
}

useOptimistic sorgt für ein nahtloses Benutzererlebnis, indem Updates angezeigt werden, noch bevor der Server antwortet.

3. Verbesserte Fehlerberichterstattung bei Trinkfehlstellungen

React 19 verbessert die Fehlerbehandlung, insbesondere bei Flüssigkeitszufuhrfehlern. Anstelle vager Fehler erhalten Sie jetzt detaillierte Unterschiede zu nicht übereinstimmenden Inhalten zwischen Server und Client.

Beispiel: Hydration Error Diff

Uncaught Error: Hydration failed because the server-rendered HTML didn’t match the client.
Tree mismatch:
+ Client: <span>Welcome</span>
- Server: <span>Hello</span>

Diese klaren Nachrichten helfen Entwicklern, Probleme schnell und effizient zu beheben.

4. Serverkomponenten und Serveraktionen

React Server Components (RSCs) erm?glichen das Rendern von Komponenten auf dem Server und verbessern so die Leistung. Serveraktionen erm?glichen den Aufruf asynchroner Funktionen auf dem Server direkt von Clientkomponenten aus.

Beispiel: Verwendung von Serveraktionen

// Server Component
export const fetchComments = async () => {
  const response = await fetch("/api/comments");
  return await response.json();
};

// Client Component
import { use } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // Suspends until resolved
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  );
}

// Usage
function App() {
  return (
    <Suspense fallback={<p>Loading comments...</p>}>
      <Comments commentsPromise={fetchComments()} />
    </Suspense>
  );
}

Serveraktionen optimieren das Abrufen und Rendern serverseitiger Daten innerhalb von Clientkomponenten.

5. Native Metadaten- und Stylesheet-Verwaltung

React 19 unterstützt jetzt