Exploring the New useOptimistic Hook in React: Enhancing UI with Optimistic Updates

If you're as excited about React's new features as I am, you've probably been keeping an eye on the experimental builds. In this post, we're going to take an early look at an intriguing new feature that's not yet part of the official release: the useOptimistic hook. This hook promises to simplify the way we handle optimistic updates in our React applications, making them feel snappier and more responsive. Let's explore how to use this experimental feature and consider the potential it has to enhance our user experience.

Experimental Disclaimer

Please note, at the time of writing, React 18.2.0 is the latest stable release, and the useOptimistic hook we're about to explore hasn't been officially released. The functionality is experimental, and there may be changes before its final release.

To experiment with the useOptimistic hook, you'll need to install the experimental builds of react and react-dom. You can do this by running:

npm install react@experimental react-dom@experimental

And then import it like this:

import { experimental_useOptimistic as useOptimistic } from 'react';

If you're using TypeScript, remember to include "react/experimental" in your tsconfig.json file to ensure proper type recognition:

{
  "compilerOptions": {
    "types" ["react/experimental"]
  }
}

Understanding Optimistic Updates

Optimistic updates aren't a new concept in web development, but they play a crucial role in enhancing user experience. This technique involves immediately updating the UI with expected changes, assuming that the corresponding server request will succeed. This creates the perception of a faster, more responsive application.

Here's how it typically works:

Imagine you have a list of todo items fetched from a server. When a user adds a new item, it requires a round trip to the server - which takes time. To make the UI feel faster, we can optimistically add the item to the list, making it appear as though the server has already confirmed the action. This is great in a perfect world, but we know network requests aren't always reliable. Handling potential errors and syncing state can become complex, which is where useOptimistic comes in, simplifying this process for React developers.

useOptimistic in Action

This example could be used in both an NextJS SSR app and a traditional client-side React application.

Imagine we had a TodoList component that contains a list of todo items and an input with a button to create a new todo item that gets added to the list.

Assume the TodoList component has a todos prop which is provided by data fetched from a server. We implement useOptimistic to optimistically update the UI as follows:

import { experimental_useOptimistic as useOptimistic } from 'react'
import { v4 as uuid } from 'uuid'
import { createTodo } from './actions'
 
type TodoItem = {
  id: string;
  item: string;
}
 
export function TodoList({ todos }: { todos: TodoItem[] }) {
  const [optimisticTodos, addOptimisticTodoItem] = useOptimistic<TodoItem[]>(
    todos,
    (state: TodoItem[], newTodoItem: string) => [
      ...state,
      { id: uuid(), item: newTodoItem },
    ]
  )
 
  return (
    <div>
      {optimisticTodos.map((todo) => (
        <div key={todo.id}>{todo.item}</div>
      ))}
      <form
        action={async (formData: FormData) => {
          const item = formData.get('item')
          addOptimisticTodoItem(item)
          await createTodo(item)
        }}
      >
        <input type="text" name="item" />
        <button type="submit">Add Item</button>
      </form>
    </div>
  )
}

Breaking down the useOptimistic hook

Let's look at the hook on its own with placeholder elements:

const [A, B] = useOptimistic<T>(C, D)

• A is the optimistic state, it will default to what C is.
• B is the dispatching function to call that will run what we define in D.
• C is the source of truth, if C is ever changed i.e. we get a new value in from the server, A will be set the that too since it will always treat C as the final source of truth.
• D is the mutation that will occur to A when B is called.
• T is an optional property for TypeScript users to define the type for the source of truth.

Additional Optimistic Properties

You can further leverage the useOptimistic hook by including additional properties in the mutation.

For example, let's say we want a way to indicate that an update is optimistic to the user. We can do so by adding a pending: true property to the optimistic update and render the todo item a gray color until the update has properly occurred on the server.

We can do that by updating our initial example to this:

export function TodoList({ todos }: { todos: TodoItem[] }) {
  const [optimisticTodos, addOptimisticTodoItem] = useOptimistic<TodoItem[]>(
    todos,
    (state: TodoItem[], newTodoItem: string) => [
      ...state,
      { item: newTodoItem, pending: true },
    ]
  )
 
  return (
    <div>
      {optimisticTodos.map((todo) => (
        <div
          key={todo.id}
          style={{ color: todo.pending ? "gray" : "inherit" }}
        >
          {todo.item}
        </div>
      ))}
      <form
        action={async (formData: FormData) => {
          const item = formData.get('item')
          addOptimisticTodoItem(item)
          await createTodo(item)
        }}
      >
        <input type="text" name="item" />
        <button type="submit">Add Item</button>
      </form>
    </div>
  )
}

Now when we submit a new todo item, optimistically our UI will update to the initial todo list plus one new todo item with the pending property as true. In our render method the pending todo item will be styled to have a gray color. Once the server update has occurred, the todos prop - which is the source of truth - would have changed which will cause the optimisticTodos value to update to the new source of truth. This new source of truth will include the optimistically updated value without the pending property, so the new item will no longer have a gray color.

Conclusion

While still experimental, the useOptimistic hook offers an exciting glimpse into the future of state management in React applications. It aims to simplify the implementation of optimistic UI updates, contributing to faster, more responsive user experiences. This feature seems particularly promising when combined with NextJS's SSR capabilities, though it remains experimental at this stage.

As the React community anticipates the official release of this feature, I'm interested to hear your thoughts. Have you tried the useOptimistic hook in your projects? What potential do you see for this feature in real-world applications? Share your experiences and insights in the comments below!