Exploring the New useOptimistic Hook in React: Enhancing UI with Optimistic Updates
Tags: react, javascript, typescript, nextjs
Published: 2023-10-19 15:57:55

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:

```bash
npm install react@experimental react-dom@experimental
```

And then import it like this:

```tsx
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:

```json
{
  "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:

```tsx
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:

```tsx
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:

```tsx
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!