> ## Content Index
> Fetch the complete content index at: https://madewithlove.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Instant feedback using the useOptimistic hook in React
- URL: https://madewithlove.com/blog/instant-feedback-using-the-useoptimistic-hook-in-react/
- Published: 2024-10-03T14:52:10.000Z
- Updated: 2025-02-25T08:16:01.000Z
- Description: Implement optimistic updates in React with the useOptimistic hook for instant UI feedback. This technique enhances user experience by updating the interface immediately while the server processes actions in the background, creating a faster and more responsive app.
- Author: Geoffrey Dhuyvetters
- Tags: Engineering, Code quality, Tooling, Tutorials, JavaScript, React, Frontend

In the previous [two](https://madewithlove.com/blog/crossing-boundaries-passing-server-data-to-client-components-in-react/) [articles](https://madewithlove.com/blog/crossing-boundaries-handling-data-mutations-in-client-components/), we explored fetching data in a client component In React using the use() hook during rendering and mutating data with server actions. To further enhance the user experience, we can also introduce **optimistic updates**.

Optimistic updates is a **technique** where the UI is updated immediately in response to a **user action**. This occurs before the server confirms that the action has been successfully processed. 

## The `useOptimistic` hook

The `useOptimistic` hook improves user experience by providing **instant UI feedback**, making the app feel faster and more responsive. It also simplifies handling asynchronous server actions by updating the UI immediately and ensuring **smooth transitions**.

To expand on the previous example, we can implement it like this.

```javascript
"use client";

import { useActionState, useOptimistic, use } from "react"; 
import { createComment } from "../actions/createComment";
import { useRouter } from "next/navigation";

export default function Comments({ getCommentsPromise }) {
  
  const initialComments = use(getCommentsPromise);
  
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    initialComments,
    (prevComments, optimisticComment) => 
      [...prevComments, optimisticComment]
  );
  
  const [, createCommentAction, isCreatingComment] =
    useActionState(createComment, null);
  
  const router = useRouter();
  
  return (
    <div>
      <h2>Existing Comments</h2>
      <ul>
        {optimisticComments.map((comment) => (
          <li key={comment.id}>
            <p>{comment.message}</p>
          </li>
        ))}
      </ul>
      <h2>Add a new comment</h2>
      <form
        action={async (formData) => {
          addOptimisticComment({ 
            id: Math.round(Math.random() * 100), 
            message: formData.get("message"),
          });
          await createCommentAction(formData);
          router.refresh();
        }}
      >
        <div>
          <label htmlFor="message">Message:</label>
          <textarea id="message" name="message" required />
        </div>
        <button type="submit" disabled={isCreatingComment}>
          {isCreatingComment ? "Submitting..." : "Submit"}
        </button>
      </form>
    </div>
  );

}
```

To summarise; `useOptimistic` initialises with both `initialComments` , which are fetched on render, and an updater function, which appends new comments to the current list. 

When a user submits a comment, `addOptimisticComment` adds it to the UI immediately, giving the comment a temporary id and displaying it as if it were already saved. This makes the app feel more responsive, the user sees their comment appear **instantly** while the form data is sent to the server in the background. 

Finally, the `router.refresh()` call ensures the route is refreshed, fetching the latest data from the server to ensure that the displayed comments are up-to-date with the server's state.

**Also read:**

- [Passing server data to client components in React](https://madewithlove.com/blog/crossing-boundaries-passing-server-data-to-client-components-in-react/)
- [Handling data mutations in client components](https://madewithlove.com/blog/crossing-boundaries-handling-data-mutations-in-client-components/)