-
Book Overview & Buying
-
Table Of Contents
Learn React with TypeScript - Third Edition
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() {
...