React 19’s useOptimistic and useActionState: Changing 80% of Your State Boilerplate

Combining Each Hooks: Full-Stack Todo Instance

Venture Setup

The next instance makes use of React 19 on the shopper and a minimal Specific/Node.js API endpoint at POST /api/todos. The server simulates a 1-second community delay and randomly returns a 500 error roughly 30% of the time (in non-production environments), which makes it simple to watch rollback habits.

Guarantee categorical.json() middleware is registered earlier than the path to parse the JSON request physique.

Server endpoint (server.js):

const categorical = require('categorical');
const app = categorical();

const ALLOWED_ORIGIN = course of.env.ALLOWED_ORIGIN || 'http://localhost:5173';

app.use(categorical.json()); 

app.use((req, res, subsequent) => {
  res.header('Entry-Management-Enable-Origin', ALLOWED_ORIGIN);
  res.header('Entry-Management-Enable-Headers', 'Content material-Sort');
  res.header('Entry-Management-Enable-Strategies', 'POST, OPTIONS');

  if (req.methodology === 'OPTIONS') return res.sendStatus(204);

  subsequent();
});

app.publish('/api/todos', async (req, res, subsequent) => {
  attempt {
    const { textual content } = req.physique;

    if (typeof textual content !== 'string' || textual content.trim().size === 0 || textual content.size > 500) {
      return res.standing(400).json({ error: 'Invalid textual content' });
    }

    await new Promise((resolve) => setTimeout(resolve, 1000));

    if (course of.env.NODE_ENV !== 'manufacturing' && Math.random() < 0.3) {
      return res.standing(500).json({ error: 'Random server failure' });
    }

    const todo = { id: Date.now(), textual content: textual content.trim() };
    res.json(todo);
  } catch (err) {
    subsequent(err);
  }
});

app.hear(3000, () => console.log('Server working on port 3000'));

Observe: In case your React dev server runs on a distinct port (e.g., 5173 for Vite), set the ALLOWED_ORIGIN surroundings variable to match your dev server’s origin. The CORS middleware above restricts entry to a single allowed origin slightly than utilizing a wildcard, which is vital for safety on mutation endpoints.

Set up the server dependency individually:

npm set up categorical

Constructing the Element

The part beneath makes use of useOptimistic for fast UI suggestions and useActionState for managing the submission lifecycle, together with pending state and error show. The motion perform returns the up to date todos listing as a part of the motion state, avoiding the concurrency hazard of calling setTodos from inside a useActionState motion.

Name addOptimisticTodo earlier than any await expression within the motion. React’s transition system solely captures optimistic updates issued synchronously earlier than the primary suspension level.

import { useOptimistic, useActionState } from 'react';

export default perform TodoList() {
  
  async perform todoAction(prevState, formData) {
    const textual content = formData.get('textual content');
    const tempTodo = { id: crypto.randomUUID(), textual content, pending: true };

    
    addOptimisticTodo(tempTodo);

    let res;
    attempt {
      res = await fetch('/api/todos', {
        methodology: 'POST',
        headers: { 'Content material-Sort': 'software/json' },
        physique: JSON.stringify({ textual content }),
      });
    } catch {
      return { error: 'Community error. Please attempt once more.', todos: prevState.todos };
    }

    if (!res.okay) {
      const errBody = await res.textual content();
      console.error('Todo API error:', res.standing, errBody);
      
      return { error: 'Failed so as to add todo. Please attempt once more.', todos: prevState.todos };
    }

    const savedTodo = await res.json();
    
    return { error: null, todos: [...prevState.todos, savedTodo] };
  }

  
  const [state, formAction, isPending] = useActionState(todoAction, {
    error: null,
    todos: [],
  });

  
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    state.todos,
    (present, newTodo) => [...current, newTodo]
  );

  return (
    <div>
      {state.error && !isPending && (
        <p className="error" function="alert">{state.error}p>
      )}
      <ul>
        {optimisticTodos.map((t) => (
          <li key={t.id} fashion={{ opacity: t.pending ? 0.5 : 1 }}>{t.textual content}li>
        ))}
      ul>
      <kind motion={formAction}>
        <enter title="textual content" required />
        <button kind="submit" disabled={isPending}>
          {isPending ? 'Including...' : 'Add Todo'}
        button>
      kind>
    div>
  );
}

What Occurs on Failure: Step by Step

The sequence is: the person submits the shape. useActionState wraps the motion in a React transition robotically. The optimistic todo seems immediately within the listing at lowered opacity (pending: true). One second later, the server returns a 500 error. The motion perform returns { error: 'Failed so as to add todo. Please attempt once more.', todos: prevState.todos } with the earlier todos listing unchanged. When the transition completes, React reconciles optimisticState again to the unchanged todos, and the optimistic merchandise disappears from the listing. The error message renders. Zero handbook rollback code.

Implementation Guidelines and Migration Information

When to Attain for Every Hook

Migration Guidelines

Audit

1. Verify React 19.0.0 or later in bundle.json (npm set up react@19 react-dom@19).
2. Determine parts with handbook isLoading / error / information state trios.
3. Determine optimistic replace patterns the place code snapshots state earlier than mutation and reverts on failure.

Change

4. Change submit handlers with useActionState motion features utilizing the async (prevState, formData) => nextState signature. Import useActionState from react.
5. Change onSubmit with (React DOM solely).
6. Take away e.preventDefault() calls.
7. Change snapshot-and-rollback patterns with useOptimistic, passing the canonical state as the primary argument and at all times offering an updateFn.
8. Wrap optimistic calls contained in the motion perform or startTransition. If utilizing useActionState, the motion is already wrapped in a transition. Solely use specific startTransition when calling addOptimistic outdoors of a useActionState motion or kind handler.
9. Take away handbook rollback catch blocks.