React: What is useOptimistic?

useOptimistic is a React 19 hook for optimistic UI updates: you show the result immediately, and if the server returns an error — you roll back.

Simple analogy: Imagine you are liking a post on Instagram.

• Without optimism: you press "❤️" → request is sent to server → server responds "OK" → heart lights up. 300ms delay, you see "lag".
• Optimistically: you press "❤️" → heart lights up IMMEDIATELY (while request is flying) → if server returns error — heart goes out. User sees instant reaction.

How it works:

1import { useOptimistic } from 'react';
2
3function LikeButton({ postId, initialLikes }) {
4    const [optimisticLikes, addOptimisticLike] = useOptimistic(
5        initialLikes,  // Current state
6        (state, newLike) => state + 1  // Optimistic update function
7    );
8    
9    async function handleLike() {
10        addOptimisticLike();  // Immediately show +1
11        
12        try {
13            await api.likePost(postId);
14        } catch (error) {
15            // If error — React will automatically roll back the optimistic update
16            showError('Failed to like');
17        }
18    }
19    
20    return <button onClick={handleLike}>❤️ {optimisticLikes}</button>;
21}

Where it is used:

1. Likes, reposts, subscriptions.
2. Sending messages in chat (show immediately, send in background).
3. Adding item to cart.
4. Any actions where the user wants to see instant reaction.

Important: Always handle errors and roll back changes if the server did not respond successfully.