What is useOptimistic in react 19?

React 19 has introduced some new cool features to make coding easier and faster. And one of these features is the useOptimistic hook. This hook helps solving a very common problem for the react developers: how to show changes in the app immediately while waiting for the server to confirm them. In this article you will learn about what is useOptimistic in React 19 and the problems and benefits around it.

What is useOptimistic and What Problem Does It Solve?

Wit the use of the useOptimistic hook the updates can be shown right away on the screen, even before the server gives a response. This is called optimistic UI updates. It makes your app feel faster and more responsive.

For example, think about a to-do list app. If you add a new task, without optimistic updates, the app would wait for the server to add the task and confirm and only after the the task will be visible on the UI. This can feel slow for users. With useOptimistic, the new task appears immediately, making the app more enjoyable to use. The optimistic update can be done without using the useOptimistic hook, but that approach has its own bad sides will we will discuss next.

Problems Without useOptimistic

When not using useOptimistic, developers have to handle these updates manually i.e. they have to manually keep track of the actual values and the optimistic value in the code. This can cause a lot of problems, such as:

1. Hard-to-Manage Code: Developers have to write extra code to show updates right away and remove them if the server request failed.
2. Repetitive Work: A lot of the code for these updates looked the same, which made it time-consuming to write and maintain.
3. Errors in Handling Failures: Reverting changes when the server responded with an error can be tricky and can lead to bugs.
4. More Effort for Developers: Writing and managing all this code can take some extra time and could make the complete development process harder.

Benefits of useOptimistic

The useOptimistic hook makes it much simpler to show updates instantly. Here are some of the benefits:

1. Better User Experience: Users see changes right away, so the app feels faster.
2. Simpler Code: Less code is required to make things work, which makes it easier to read and maintain.
3. Handles Errors Easily: It’s easier to undo changes if something goes wrong with the server.
4. Saves Time: Developers can focus on building new features instead of worrying about managing updates manually.

Example Code with Explanation

Here’s a simple example of how to use useOptimistic in a to-do list app:

import React from 'react';
import { useOptimistic } from 'react';

function TodoList({ initialTodos }) {
  // Set up the optimistic state
  // Here 'initialTodos' are the actual todos and the 'todos' below are the optimistic todos
  const [todos, updateTodos] = useOptimistic(initialTodos, (prevTodos, newTodo) => {
    return [...prevTodos, newTodo];
  });

  const addTodo = async (newTodo) => {
    // Show the new task immediately
    updateTodos(newTodo);

    try {
      // Simulate sending the new task to the server
      await saveToServer(newTodo);
    } catch (error) {
      // Remove the task if there was an error
      updateTodos((prevTodos) => prevTodos.filter((todo) => todo !== newTodo));
      console.error("Failed to save todo:", error);
    }
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={() => addTodo("New Task")}>Add Todo</button>
    </div>
  );
}

async function saveToServer(todo) {
  // Simulate a delay for the server response
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Success"), 1000);
  });
}

Explanation:

1. Set Up Optimistic State: The useOptimistic hook initializes the list of tasks and defines how new tasks should be added. It takes two arguments, a original todo list and a function with the direction to update the todo list.
2. Show Updates Instantly: Since the optimistic todos are used in the code to render tasks on screen, when a new task is added, the UI updates right away.
3. Handle Errors: If saving the task to the server fails, the app removes it from the list.
4. Better Experience: Users see changes immediately, so the app feels quick and smooth.

Final Thoughts

The useOptimistic hook is a great addition to React 19. It makes it much easier to show updates instantly in the app while still handling server errors properly. With useOptimistic, the code will be simpler, and the app will feel faster and more responsive. If you’re just starting with React 19, give useOptimistic a try—it’s a great way to make your apps more user-friendly.