Understanding React New Hooks

React 19 introduces several powerful new hooks that revolutionize how we handle forms and manage optimistic updates in our applications. In this blog, we'll explore useFormStatus, useActionState, and useOptimistic - three hooks that make our React applications more responsive and user-friendly.

useFormStatus: Enhanced Form Handling

The useFormStatus hook provides real-time information about form submissions, making it easier to create responsive and accessible forms. Let's explore how this hook improves upon React 18's form handling capabilities.

Example 1: Basic Form Loading State

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button disabled>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}

function SignupForm() {
  return (
    

{ await submitSignupData(formData); }}>

); }

In React 18, you'd need to manually manage loading states using useState. The new useFormStatus hook automatically handles this, reducing boilerplate code.

Example 2: Multiple Form States

function FormStatus() {
  const { pending, data, method } = useFormStatus();

  return (
    <div role="status">
      {pending && <span>Submitting via {method}...</span>}
      {!pending && data && <span>Last submission: {new Date().toLocaleString()}</span>}
    </div>
  );
}

function ContactForm() {
  return (
    

{ await submitContactForm(formData); }}>

); }

Example 3: Form Validation Status

function ValidationStatus() {
  const { pending, validationErrors } = useFormStatus();

  return (
    <div role="alert">
      {validationErrors?.map((error, index) => (
        <p key="{index}" classname="error">{error}</p>
      ))}
    </div>
  );
}

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); }

Example 4: Multi-Step Form Progress

function FormProgress() {
  const { pending, step, totalSteps } = useFormStatus();

  return (
    <div classname="progress-bar">
      <div classname="progress">



<h3>
  
  
  Example 5: File Upload Progress
</h3>



<pre class="brush:php;toolbar:false">function UploadProgress() {
  const { pending, progress } = useFormStatus();

  return (
    <div>
      {pending && progress && (
        <div classname="upload-progress">
          <div classname="progress-bar">



<h2>
  
  
  useActionState: Managing Action Results
</h2>

<p>The useActionState hook provides a way to track the state of form actions and server mutations, making it easier to handle success and error states.</p>

<h3>
  
  
  Example 1: Basic Action State
</h3>



<pre class="brush:php;toolbar:false">function SubmissionStatus() {
  const state = useActionState();

  return (
    <div>
      {state.status === 'success' && <p>Submission successful!</p>}
      {state.status === 'error' && <p>Error: {state.error.message}</p>}
    </div>
  );
}

function CommentForm() {
  return (
    

{ await submitComment(formData); }}>

); }

Example 2: Action History

function ActionHistory() {
  const state = useActionState();

  return (
    <div>
      <h3 id="Recent-Actions">Recent Actions</h3>
      <ul>
        {state.history.map((action, index) => (
          <li key="{index}">
            {action.type} - {action.timestamp}
            {action.status === 'error' && ` (Failed: ${action.error.message})`}
          </li>
        ))}
      </ul>
    </div>
  );
}

Example 3: Retry Mechanism

function RetryableAction() {
  const state = useActionState();

  return (
    <div>
      {state.status === 'error' && (
        <button onclick="{()"> state.retry()}
          disabled={state.retrying}
        >
          {state.retrying ? 'Retrying...' : 'Retry'}
        </button>
      )}
    </div>
  );
}

Example 4: Action Queue

function ActionQueue() {
  const state = useActionState();

  return (
    <div>
      <h3 id="Pending-Actions">Pending Actions</h3>
      {state.queue.map((action, index) => (
        <div key="{index}">
          {action.type} - Queued at {action.queuedAt}
          <button onclick="{()"> action.cancel()}>Cancel</button>
        </div>
      ))}
    </div>
  );
}

Example 5: Action Statistics

function ActionStats() {
  const state = useActionState();

  return (
    <div>
      <h3 id="Action-Statistics">Action Statistics</h3>
      <p>Success Rate: {state.stats.successRate}%</p>
      <p>Average Duration: {state.stats.avgDuration}ms</p>
      <p>Total Actions: {state.stats.total}</p>
    </div>
  );
}

useOptimistic: Smooth UI Updates

The useOptimistic hook enables immediate UI updates while waiting for server responses, creating a more responsive user experience.

Example 1: Optimistic Todo List

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  async function addTodo(formData) {
    const newTodo = {
      id: Date.now(),
      text: formData.get('todo'),
      completed: false
    };

    addOptimisticTodo(newTodo);
    await saveTodo(newTodo);
  }

  return (
    <div>
      <form action="%7BaddTodo%7D">
        <input name="todo">
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key="{todo.id}">{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

Example 2: Optimistic Like Button

function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (state) => state + 1
  );

  async function handleLike() {
    addOptimisticLike();
    await likePost(postId);
  }

  return (
    <button onclick="{handleLike}">
      {optimisticLikes} Likes
    </button>
  );
}

Example 3: Optimistic Comment Thread

function CommentThread({ postId }) {
  const [comments, setComments] = useState([]);
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
  );

  async function submitComment(formData) {
    const comment = {
      id: Date.now(),
      text: formData.get('comment'),
      pending: true
    };

    addOptimisticComment(comment);
    await saveComment(postId, comment);
  }

  return (
    <div>
      <form action="%7BsubmitComment%7D">
        <textarea name="comment"></textarea>
        <button type="submit">Comment</button>
      </form>
      {optimisticComments.map(comment => (
        <div key="{comment.id}">



<h3>
  
  
  Example 4: Optimistic Shopping Cart
</h3>



<pre class="brush:php;toolbar:false">function ShoppingCart() {
  const [cart, setCart] = useState([]);
  const [optimisticCart, updateOptimisticCart] = useOptimistic(
    cart,
    (state, update) => {
      const { type, item } = update;
      switch (type) {
        case 'add':
          return [...state, item];
        case 'remove':
          return state.filter(i => i.id !== item.id);
        case 'update':
          return state.map(i => i.id === item.id ? item : i);
        default:
          return state;
      }
    }
  );

  async function updateCart(type, item) {
    updateOptimisticCart({ type, item });
    await saveCart({ type, item });
  }

  return (
    <div>
      {optimisticCart.map(item => (
        <div key="{item.id}">
          {item.name} - ${item.price}
          <button onclick="{()"> updateCart('remove', item)}>Remove</button>
        </div>
      ))}
    </div>
  );
}

Example 5: Optimistic User Settings

function UserSettings() {
  const [settings, setSettings] = useState({});
  const [optimisticSettings, updateOptimisticSetting] = useOptimistic(
    settings,
    (state, update) => ({
      ...state,
      [update.key]: update.value
    })
  );

  async function updateSetting(key, value) {
    updateOptimisticSetting({ key, value });
    await saveSettings({ [key]: value });
  }

  return (
    <div>
      <div>
        <label>
          Theme:
          <select value="{optimisticSettings.theme}" onchange="{e"> updateSetting('theme', e.target.value)}
          >
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </label>
      </div>
      <div>
        <label>
          Notifications:
          <input type="checkbox" checked onchange="{e"> updateSetting('notifications', e.target.checked)}
          />
        </label>
      </div>
    </div>
  );
}

Remember to check the official React documentation for the most up-to-date information and best practices when using these hooks in your applications.

Happy Coding!