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.0is the latest stable release, and theuseOptimistichook 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)
-
Ais the optimistic state, it will default to whatCis. -
Bis the dispatching function to call that will run what we define inD. -
Cis the source of truth, ifCis ever changed i.e. we get a new value in from the server,Awill be set the that too since it will always treatCas the final source of truth. -
Dis the mutation that will occur toAwhenBis called. -
Tis 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!
Top comments (12)
Wow. Thanks for sharing!
I’m glad you found this interesting! Hopefully this prepares you for when it is properly ready! 🥳
Yesss. Thank you.
Looks awesome, thanks for the clear and consise explanation 😀
It's such a pleasure and thank you for the encouraging feedback!
Thank you @barrymichaeldoyle for this great explanation.
How do we handle errors? What to do when network request fails? Is there any mechanism to undo the optimistic update?
Sorry I've taken so long to get back to you.
The way the useOptimistic hook works is that the optimistic update resets when the the asynchronous form action is completed and the actual rendered value gets replaced by the new todos. It's not really shown in my example code in this post.
So in the case of an error - which will be handled in
createTodo- the optimistic value will be cleared when the promise rejects because todos doesn't change. The way you decide to handle an error specifically is up to you e.g. you could render a toast, or show an error message under the todos list, up to you.Why useOptimistic is undefined in my app after I installed like so
npm install react@experimental react-dom@experimental
I tried import { useOptimistic } from 'react' as well but does not work.
It keeps erroring out saying
0__.useOptimistic) is not a function or its return value is not iterableWhat if you mutate your data somewhere else? How would you use useOptimistic hook then? Perhaps, with state management libraries such as zustand?
You can wrap your action into a transition
`const [isPending, startTransition] = useTransition();
const onUpdate = () => {
startTransition(()=> {
optimisticUpdate();
})
}
`
In that scenario I'd recommend going with something like zustand yes.
Thanks for sharing!