React 19 Hooks

1
'use client';
2
import { useActionState, useOptimistic } from 'react';
3

4
function TodoForm() {
5
  const [state, action, isPending] = useActionState(async (prev, formData) => {
6
    return await addTodo(formData);
7
  }, null);
8

9
  return (
10
    <form action={action}>
11
      <input name="text" disabled={isPending} />
12
      // !mark
13
      <button disabled={isPending}>{isPending ? 'Adding...' : 'Add'}</button>
14
    </form>
15
  );
16
}

New React 19 Hooks

Demo

1. Add a todo using the form and notice the pending state.
2. Toggle or delete todos and watch instant updates with server sync.
3. Check the server time to see the use() hook reading a promise.
4. Try rapid actions to see optimistic updates in action.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Always handle the rollback case when using useOptimistic.
• Use useFormStatus only inside form children, not the form component itself.
• The use() hook can only be called conditionally, unlike other hooks.
• Combine these hooks with proper error boundaries for robust UX.

Continue Learning

Learn More

• React 19 Blog Post
• useActionState
• useOptimistic
• use Hook