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 consumer and a minimal Categorical/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 easy to watch rollback conduct.

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

Server endpoint (server.js):

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

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

app.use(specific.json()); 

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

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

  subsequent();
});

app.put up('/api/todos', async (req, res, subsequent) => {
  strive {
    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'));

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

Set up the server dependency individually:

npm set up specific

Constructing the Part

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;
    strive {
      res = await fetch('/api/todos', {
        methodology: 'POST',
        headers: { 'Content material-Kind': 'utility/json' },
        physique: JSON.stringify({ textual content }),
      });
    } catch {
      return { error: 'Community error. Please strive 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 strive 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" position="alert">{state.error}p>
      )}
      <ul>
        {optimisticTodos.map((t) => (
          <li key={t.id} type={{ opacity: t.pending ? 0.5 : 1 }}>{t.textual content}li>
        ))}
      ul>
      <type motion={formAction}>
        <enter identify="textual content" required />
        <button sort="submit" disabled={isPending}>
          {isPending ? 'Including...' : 'Add Todo'}
        button>
      type>
    div>
  );
}

What Occurs on Failure: Step by Step

The sequence is: the consumer submits the shape. useActionState wraps the motion in a React transition routinely. 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 strive 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.

Substitute

4. Substitute submit handlers with useActionState motion capabilities utilizing the async (prevState, formData) => nextState signature. Import useActionState from react.
5. Substitute onSubmit with (React DOM solely).
6. Take away e.preventDefault() calls.
7. Substitute 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 express startTransition when calling addOptimistic outdoors of a useActionState motion or type handler.
9. Take away handbook rollback catch blocks.