How to Use React’s useOptimistic Hook

Optimistic updates improve user experience by reflecting changes in the UI instantly, even before server confirmation. React’s useOptimistic hook, introduced in React 18, simplifies managing these temporary state updates. This article demonstrates how to leverage useOptimistic to enhance responsiveness and error handling in your applications.

What is useOptimistic?

The useOptimistic hook helps manage temporary states during optimistic updates, providing a declarative way to handle changes while waiting for server responses.

When to Use useOptimistic?

The hook is ideal for:

1. Updating shopping cart items in e-commerce apps.
2. Handling votes or likes in social platforms.
3. Managing temporary edits in collaborative tools.

Syntax of useOptimistic

1 const [state, updateState] = useOptimistic(initialState, reducerFunction);

• initialState: The starting state for your updates.
• reducerFunction: A function defining how actions change the state.

Example: Optimistic Updates for a Voting System

Imagine a voting system where users can upvote posts. Here’s how you can use useOptimistic to handle votes optimistically:

1 import { useOptimistic } from 'react';
2 
3 function VotingApp({ postId, initialVotes }) {
4   const [votes, updateVotes] = useOptimistic(initialVotes, (state, action) => {
5     switch (action.type) {
6       case 'increment':
7         return state + 1;
8       case 'decrement':
9         return state - 1;
10       default:
11         return state;
12     }
13   });
14 
15   const handleVote = async (type) => {
16     updateVotes({ type });
17     try {
18       // Simulate server request
19       await fetch(`/api/vote`, {
20         method: 'POST',
21         body: JSON.stringify({ postId, type }),
22       });
23     } catch {
24       alert('Failed to register your vote. Please try again.');
25       updateVotes({ type: type === 'increment' ? 'decrement' : 'increment' });
26     }
27   };
28 
29   return (
30     <div>
31       <h3>Votes: {votes}</h3>
32       <button onClick={() => handleVote('increment')}>Upvote</button>
33       <button onClick={() => handleVote('decrement')}>Downvote</button>
34     </div>
35   );
36 }

How useOptimistic Works

1. Immediate Feedback: Updates the UI instantly without waiting for server response.
2. Error Handling: Reverts changes or displays a notification if the server call fails.
3. Centralized Logic: The reducer manages state transitions cleanly and predictably.

Benefits of useOptimistic

• Improved UX: Users see instant feedback on actions.
• Simplified Code: Reduces the need for manual state rollback.
• Flexibility: Works for various use cases, from form submissions to interactive updates.

Conclusion

React’s useOptimistic hook simplifies implementing optimistic updates, ensuring a smooth and responsive user experience. Whether handling likes, shopping cart updates, or other interactive features, this hook streamlines state management and error handling, making your applications both efficient and user-friendly.