-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating

Learn React with TypeScript
By :

In this section, we will learn what optimistic UI updates are and how to use React’s useOptimistic
Hook to implement them. We will then use this pattern on a new page in our app that allows users to mark a contact item as done.
An optimistic UI update is when the UI is updated immediately after a user action is invoked, before the action is fully complete. The pattern makes the app faster and more responsive. The useOptimistic
Hook can be used to manage a variable that is expected to change during an action. Typically, the variable will hold some data from the server. Here’s the syntax:
const [optimisticValue, setOptimisticValue] = useOptimistic(initialValue);
The variable we want to set optimistically is passed into useOptimistic
. A tuple containing the optimistic value and a setter function is returned. Here’s a component that uses useOptimistic
:
export function Name() { ...