Boost React UX Instantly with the New useOptimistic Hook

Have you ever clicked a button and waited for something to happen while the page just sat there doing nothing? That delay can make an app feel sluggish. Wouldn’t it be great if the UI responded instantly, even before the actual data was updated?

This is where React’s useOptimistic hook comes in! Introduced in React 18.2, it allows you to provide instant feedback to users by showing an expected result immediately—making your app feel fast and responsive. Instead of waiting for a network request to complete, useOptimistic temporarily updates the UI with a predicted state—a technique known as optimistic UI.

In this blog, we’ll explore how useOptimistic works, why it’s useful, and how you can implement it to improve the user experience in your React applications. Let’s dive in!

Understanding useOptimistic

Syntax:

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

• state – The initial state before any optimistic updates.
• updateFn – A function that takes the current state and an optimistic value, merges them, and returns the new state.
• optimisticState – The state that updates optimistically before the async action is confirmed.
• addOptimistic – A function you call to apply an optimistic update.

Why Use useOptimistic?

When building interactive applications, users expect instant feedback when they take an action. However, network latency can cause delays between user actions and data updates, leading to a frustrating experience.

By using useOptimistic, you can:

• Provide immediate UI feedback without waiting for a response from the server.
• Improve perceived performance and responsiveness.
• Reduce the need for complex loading states in the UI.

A great example of this is a bookmarking feature in a blog application. Let’s see how we can implement it.

Example: Bookmarking Posts

1. Initial Setup

First, we define an array of blog posts and use useState to manage their state:

const [posts, setPosts] = useState([
  { id: 1, title: "React Optimistic UI", bookmarked: false },
  { id: 2, title: "Understanding React Hooks", bookmarked: false },
]);

2. Implementing useOptimistic

We initialize useOptimistic with the current state and define an update function to optimistically toggle the bookmark status:

const [optimisticPosts, addOptimisticPost] = useOptimistic(
  posts,
  (state, postId) => {
    return state.map((post) =>
      post.id === postId ? { ...post, bookmarked: !post.bookmarked } : post
    );
  }
);

This function will toggle the bookmarked status in the UI before making the actual API request.

3. Handling Bookmark Clicks

When a user clicks the bookmark button, we optimistically update the UI before performing the actual update on the server:

const handleBookmark = async (postId) => {
  startTransition(async () => {
    addOptimisticPost(postId);

    try {
      const response = await fetch("/posts/bookmark", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ postId }),
      });

      if (!response.ok) throw new Error("Failed to update bookmark");

      setPosts((currentPosts) =>
        currentPosts.map((post) =>
          post.id === postId ? { ...post, bookmarked: !post.bookmarked } : post
        )
      );
      console.log("Bookmark updated on server");
    } catch (error) {
      console.error("Failed to update bookmark:", error);
      // Revert UI state on failure
      addOptimisticPost(postId);
    }
  });
};

Here’s what happens step by step:

1. The add OptimisticPost(postId) function is called to update the UI instantly.
2. A network request is sent to update the bookmark status in the backend.
3. If the request is successful, the actual state is updated using setPosts().
4. If the request fails, the UI state is reverted to reflect the actual server state.

4. Rendering the Posts

We use optimisticPosts to render the UI, ensuring instant feedback when users interact with the bookmark button:

{optimisticPosts.map((post) => (
  

    
{post.title}
     handleBookmark(post.id)}>
      {post.bookmarked ? "Unbookmark" : "Bookmark"}
    
  
))}

When to Use useOptimistic

Consider using useOptimistic when:

• The user’s action is highly likely to succeed (e.g., liking a post, adding an item to favorites).
• You want to provide instant UI updates without waiting for a backend response.
• The consequences of a temporary incorrect state are minimal (e.g., a failed bookmark update can be retried later).

Limitations of useOptimistic

While useOptimistic is useful, it’s important to be aware of its limitations:

• If the server update fails, you’ll need to handle error states appropriately (e.g., reverting the UI, showing a retry button).
• It is not suitable for cases where strict data accuracy is required (e.g., processing payments).

By leveraging useOptimistic, you can significantly improve the responsiveness of your React applications. Try integrating it into your projects and see the difference it makes! read more