The New `use()` Hook

React 19's most exciting addition: the use() hook lets you read resources (Promises, Context) directly inside render. It replaces many useEffect data-fetching patterns:

import { use, Suspense } from 'react';

// Create a promise OUTSIDE the component (or in a cache)
const conversationsPromise = fetch('/api/conversations').then(r => r.json());

function ConversationList() {
  // use() suspends the component until the promise resolves
  const conversations = use(conversationsPromise);

  return (
    <ul>
      {conversations.map((c: Conversation) => (
        <li key={c.id}>{c.title}</li>
      ))}
    </ul>
  );
}

// Wrap with Suspense for the loading state
function Sidebar() {
  return (
    <Suspense fallback={<SkeletonList />}>
      <ConversationList />
    </Suspense>
  );
}

Important: use() does NOT replace useEffect for side effects (event listeners, timers, subscriptions). It's specifically for reading async data. Also, do NOT create promises inside render — that creates a new promise on every render.

Actions & Form Handling

React 19 introduces Actions — async functions that handle form submissions with built-in pending state:

import { useActionState } from 'react';

function RenameConversation({ id, currentTitle }: Props) {
  const [error, submitAction, isPending] = useActionState(
    async (_prevState: string | null, formData: FormData) => {
      const title = formData.get('title') as string;
      try {
        await fetch(\`/api/conversations/\${id}\`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ title }),
        });
        return null; // No error
      } catch (err) {
        return 'Failed to rename conversation';
      }
    },
    null // Initial error state
  );

  return (
    <form action={submitAction}>
      <input name="title" defaultValue={currentTitle} disabled={isPending} />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Saving...' : 'Rename'}
      </button>
      {error && <p className="error">{error}</p>}
    </form>
  );
}

useOptimistic — Instant Feedback

import { useOptimistic, startTransition } from 'react';

function ConversationList({ conversations, onDelete }: Props) {
  const [optimistic, removeOptimistic] = useOptimistic(
    conversations,
    (current, idToRemove: string) =>
      current.filter(c => c.id !== idToRemove)
  );

  const handleDelete = (id: string) => {
    startTransition(async () => {
      removeOptimistic(id);      // Instantly remove from UI
      await onDelete(id);         // Then actually delete on server
    });
  };

  return optimistic.map(c => (
    <ConversationItem key={c.id} {...c} onDelete={() => handleDelete(c.id)} />
  ));
}

Why We Don't Need Redux or Zustand

For a medium-complexity SPA like our chat app, React's built-in tools are sufficient:

Local state (useState) — component-specific data (input values, open/close)
Lifting state up — share state between siblings via parent
Custom hooks — reusable stateful logic (useChat, useSettings)
Context (if needed) — truly global values (theme, auth user)
URL state — current conversation ID lives in the URL

When DO you need Redux/Zustand? When you have deeply nested state that changes frequently from many places, complex state machines (multi-step wizards), or need time-travel debugging. A chat app doesn't have these problems.