useOptimistic - optimistic UI updates

A message to the Mars base takes several minutes to arrive, but the crew does not want to stare at a spinner. They want to see their message on the list right away, marked "sending". If the transmission fails, the message should disappear. That is an optimistic update: we assume success, and on failure we go back to the real state.

The useOptimistic hook allows you to instantly update the user interface before receiving a response from the server. This is a key tool for creating responsive applications that give the user the impression of instantaneous reaction.

useOptimistic Basics

1. Syntax and basic usage

The hook takes the real state and an update function, and returns the optimistic state plus a function that changes it. The most important rule from react.dev: that function must be called inside an Action, meaning in startTransition or in a form action. Outside an Action, React prints a warning and the change flashes and disappears at once. First, the task list logic:

1import { useOptimistic, useState, startTransition } from 'react';
2
3function TodoList() {
4  const [todos, setTodos] = useState([
5    { id: 1, text: 'Learn React', completed: false },
6    { id: 2, text: 'Build an app', completed: false }
7  ]);
8
9  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
10    todos,
11    // Function updating optimistic state
12    (currentTodos, newTodo) => [...currentTodos, newTodo]
13  );
14
15  async function handleAddTodo(text) {
16    const newTodo = {
17      id: Date.now(),
18      text,
19      completed: false,
20      pending: true // Mark as pending
21    };
22
23    // Optimistic update
24    addOptimisticTodo(newTodo);
25
26    try {
27      // Actual API call
28      const response = await fetch('/api/todos', {
29        method: 'POST',
30        body: JSON.stringify({ text })
31      });
32
33      const savedTodo = await response.json();
34
35      // Update actual state
36      startTransition(() => {
37        setTodos(current => [...current, savedTodo]);
38      });
39    } catch (error) {
40      // On error, optimistic state will be automatically rolled back
41      console.error('Error adding todo:', error);
42    }
43  }
44

The optimistic task exists only while the Action is running. When it ends, React shows the plain todos state. If saving succeeded, setTodos has already added the real task, and if it failed, the state is what it was before, so the change "rolls back" on its own. We wrap the update after await in another startTransition, as the examples in the docs do. Here is the view:

1  return (
2    <div style={{ maxWidth: '500px', margin: '0 auto', padding: '20px' }}>
3      <h2>Task List</h2>
4
5      <form
6        onSubmit={(e) => {
7          e.preventDefault();
8          const text = e.target.todo.value;
9          if (text) {
10            startTransition(() => handleAddTodo(text));
11            e.target.reset();
12          }
13        }}
14        style={{ marginBottom: '20px' }}
15      >
16        <input
17          name="todo"
18            style={{
19            width: '70%',
20            padding: '8px',
21            marginRight: '10px',
22            border: '1px solid #ddd',
23            borderRadius: '4px'
24          }}
25        />
26        <button
27          type="submit"
28          style={{
29            padding: '8px 16px',
30            backgroundColor: '#007bff',
31            color: 'white',
32            border: 'none',
33            borderRadius: '4px',
34            cursor: 'pointer'
35          }}
36        >
37          Add
38        </button>
39      </form>
40
41      <ul style={{ listStyle: 'none', padding: 0 }}>
42        {optimisticTodos.map(todo => (
43          <li
44            key={todo.id}
45            style={{
46              padding: '10px',
47              marginBottom: '5px',
48              backgroundColor: todo.pending ? '#f0f8ff' : '#f8f9fa',
49              border: '1px solid #ddd',
50              borderRadius: '4px',
51              opacity: todo.pending ? 0.7 : 1,
52              transition: 'all 0.3s'
53            }}
54          >
55            <input
56              type="checkbox"
57              checked={todo.completed}
58              readOnly
59              style={{ marginRight: '10px' }}
60            />
61            <span style={{
62              textDecoration: todo.completed ? 'line-through' : 'none'
63            }}>
64              {todo.text}
65            </span>
66            {todo.pending && (
67              <span style={{
68                marginLeft: '10px',
69                color: '#007bff',
70                fontSize: '12px'
71              }}>
72                (saving...)
73              </span>
74            )}
75          </li>
76        ))}
77      </ul>
78    </div>
79  );
80}

The form calls handleAddTodo inside startTransition, so the optimistic entry marked "(saving...)" stays on screen until the server responds.

2. Optimistic toggle with error handling

A like button is the classic case: the reaction must be instant, and the server confirms it in the background. Here the update function simply returns the new value:

1import { useOptimistic, useState, startTransition } from 'react';
2
3function LikeButton({ postId, initialLikes, initialIsLiked }) {
4  const [likes, setLikes] = useState(initialLikes);
5  const [isLiked, setIsLiked] = useState(initialIsLiked);
6
7  const [optimisticLikes, updateOptimisticLikes] = useOptimistic(
8    { count: likes, isLiked },
9    (current, optimisticValue) => optimisticValue
10  );
11
12  async function handleLikeToggle() {
13    const newIsLiked = !optimisticLikes.isLiked;
14    const newCount = optimisticLikes.count + (newIsLiked ? 1 : -1);
15
16    // Optimistic update
17    updateOptimisticLikes({
18      count: newCount,
19      isLiked: newIsLiked
20    });
21
22    try {
23      const response = await fetch(`/api/posts/${postId}/like`, {
24        method: newIsLiked ? 'POST' : 'DELETE'
25      });
26
27      if (!response.ok) {
28        throw new Error('Update error');
29      }
30
31      const data = await response.json();
32
33      // Update actual state
34      setLikes(data.likes);
35      setIsLiked(data.isLiked);
36    } catch (error) {
37      // Optimistic state will be automatically rolled back
38      alert('Failed to update like');
39    }
40  }
41
42  return (
43    <button
44      onClick={() => startTransition(handleLikeToggle)}
45      style={{
46        display: 'flex',
47        alignItems: 'center',
48        gap: '8px',
49        padding: '8px 16px',
50        backgroundColor: optimisticLikes.isLiked ? '#dc3545' : '#fff',
51        color: optimisticLikes.isLiked ? '#fff' : '#dc3545',
52        border: '1px solid #dc3545',
53        borderRadius: '20px',
54        cursor: 'pointer',
55        transition: 'all 0.3s',
56        fontSize: '16px'
57      }}
58    >
59      <span>{optimisticLikes.isLiked ? 'Liked' : 'Like'}</span>
60      <span>{optimisticLikes.count}</span>
61    </button>
62  );
63}
64
65// Example usage in a post component
66function Post({ post }) {
67  return (
68    <article style={{
69      padding: '20px',
70      marginBottom: '20px',
71      backgroundColor: '#fff',
72      borderRadius: '8px',
73      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
74    }}>
75      <h3>{post.title}</h3>
76      <p>{post.content}</p>
77
78      <div style={{
79        display: 'flex',
80        justifyContent: 'space-between',
81        alignItems: 'center',
82        marginTop: '15px'
83      }}>
84        <LikeButton
85          postId={post.id}
86          initialLikes={post.likes}
87          initialIsLiked={post.isLiked}
88        />
89
90        <span style={{ color: '#6c757d', fontSize: '14px' }}>
91          {new Date(post.createdAt).toLocaleDateString('en-US')}
92        </span>
93      </div>
94    </article>
95  );
96}

A click runs handleLikeToggle inside startTransition. When the server returns an error, the catch block shows a message, and the counter goes back to the value from likes, because the real state did not change.

3. Optimistic sorting and filtering

The update function works like a reducer: it receives the current state and a description of the change. That way one call handles both the checkbox and the priority change:

1import { useOptimistic, useState, startTransition } from 'react';
2
3function OptimisticTaskList() {
4  const [tasks, setTasks] = useState([
5    { id: 1, title: 'Task 1', priority: 'low', completed: false },
6    { id: 2, title: 'Task 2', priority: 'high', completed: false },
7    { id: 3, title: 'Task 3', priority: 'medium', completed: true }
8  ]);
9
10  const [optimisticTasks, updateOptimisticTask] = useOptimistic(
11    tasks,
12    (currentTasks, { id, updates }) =>
13      currentTasks.map(task =>
14        task.id === id ? { ...task, ...updates, updating: true } : task
15      )
16  );
17
18  async function handleTaskUpdate(taskId, updates) {
19    // Optimistic update
20    updateOptimisticTask({ id: taskId, updates });
21
22    try {
23      const response = await fetch(`/api/tasks/${taskId}`, {
24        method: 'PATCH',
25        headers: { 'Content-Type': 'application/json' },
26        body: JSON.stringify(updates)
27      });
28
29      const updatedTask = await response.json();
30
31      // Update actual state
32      setTasks(current =>
33        current.map(task => task.id === taskId ? updatedTask : task)
34      );
35    } catch (error) {
36      console.error('Error updating task:', error);
37    }
38  }
39
40  const priorityColors = {
41    low: '#28a745',
42    medium: '#ffc107',
43    high: '#dc3545'
44  };
45

React runs this function again if the real tasks changes during the Action, so the change is always applied on top of current data. Here is the view with statistics:

1  return (
2    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
3      <h2>Task Management</h2>
4
5      <div style={{ marginBottom: '20px' }}>
6        <h3>Statistics:</h3>
7        <div style={{ display: 'flex', gap: '20px', fontSize: '14px' }}>
8          <span>
9            Completed: {optimisticTasks.filter(t => t.completed).length}
10          </span>
11          <span>
12            In progress: {optimisticTasks.filter(t => !t.completed).length}
13          </span>
14          <span>
15            High priority: {optimisticTasks.filter(t => t.priority === 'high').length}
16          </span>
17        </div>
18      </div>
19
20      <div style={{ display: 'grid', gap: '10px' }}>
21        {optimisticTasks.map(task => (
22          <div
23            key={task.id}
24            style={{
25              padding: '15px',
26              backgroundColor: task.updating ? '#f0f8ff' : '#fff',
27              border: '1px solid #ddd',
28              borderRadius: '8px',
29              opacity: task.updating ? 0.8 : 1,
30              transition: 'all 0.3s'
31            }}
32          >
33            <div style={{
34              display: 'flex',
35              justifyContent: 'space-between',
36              alignItems: 'center'
37            }}>
38              <div style={{ flex: 1 }}>
39                <input
40                  type="checkbox"
41                  checked={task.completed}
42                  onChange={(e) =>
43                    startTransition(() => handleTaskUpdate(task.id, { completed: e.target.checked }))
44                  }
45                  style={{ marginRight: '10px' }}
46                />
47                <span style={{
48                  textDecoration: task.completed ? 'line-through' : 'none',
49                  color: task.completed ? '#6c757d' : '#000'
50                }}>
51                  {task.title}
52                </span>
53              </div>
54
55              <select
56                value={task.priority}
57                onChange={(e) =>
58                  startTransition(() => handleTaskUpdate(task.id, { priority: e.target.value }))
59                }
60                style={{
61                  padding: '4px 8px',
62                  border: `1px solid ${priorityColors[task.priority]}`,
63                  borderRadius: '4px',
64                  color: priorityColors[task.priority],
65                  backgroundColor: 'transparent',
66                  cursor: 'pointer'
67                }}
68              >
69                <option value="low">Low</option>
70                <option value="medium">Medium</option>
71                <option value="high">High</option>
72              </select>
73
74              {task.updating && (
75                <span style={{
76                  marginLeft: '10px',
77                  color: '#007bff',
78                  fontSize: '12px'
79                }}>
80                  Saving...
81                </span>
82              )}
83            </div>
84          </div>
85        ))}
86      </div>
87    </div>
88  );
89}

We compute the statistics from optimisticTasks, so the counters change together with the checkbox, without waiting for the server.

Advanced patterns with useOptimistic

1. Optimistic deletion with animation

This time the optimistic state does not remove the item, it marks it with a deleting flag, which leaves time for an animation:

1import { useOptimistic, useState, startTransition } from 'react';
2
3function OptimisticDeleteList() {
4  const [items, setItems] = useState([
5    { id: 1, name: 'Item 1', createdAt: new Date() },
6    { id: 2, name: 'Item 2', createdAt: new Date() },
7    { id: 3, name: 'Item 3', createdAt: new Date() }
8  ]);
9
10  const [optimisticItems, removeOptimisticItem] = useOptimistic(
11    items,
12    (currentItems, removedId) =>
13      currentItems.map(item =>
14        item.id === removedId ? { ...item, deleting: true } : item
15      )
16  );
17
18  async function handleDelete(itemId) {
19    // Optimistically mark as deleting
20    removeOptimisticItem(itemId);
21
22    // Animation before deletion
23    await new Promise(resolve => setTimeout(resolve, 300));
24
25    try {
26      const response = await fetch(`/api/items/${itemId}`, {
27        method: 'DELETE'
28      });
29
30      if (!response.ok) {
31        throw new Error('Deletion error');
32      }
33
34      // Actually remove from state
35      setItems(current => current.filter(item => item.id !== itemId));
36    } catch (error) {
37      // Rollback optimistic change
38      alert('Failed to delete item');
39    }
40  }
41
42  return (
43    <div style={{ maxWidth: '500px', margin: '0 auto', padding: '20px' }}>
44      <h2>List with optimistic deletion</h2>
45
46      <div style={{ display: 'grid', gap: '10px' }}>
47        {optimisticItems
48          .map(item => (
49            <div
50              key={item.id}
51              style={{
52                padding: '15px',
53                backgroundColor: '#fff',
54                border: '1px solid #ddd',
55                borderRadius: '8px',
56                display: 'flex',
57                justifyContent: 'space-between',
58                alignItems: 'center',
59                opacity: item.deleting ? 0 : 1,
60                transform: item.deleting ? 'translateX(-100%)' : 'translateX(0)',
61                transition: 'all 0.3s ease-out',
62                overflow: 'hidden'
63              }}
64            >
65              <div>
66                <h4 style={{ margin: '0 0 5px 0' }}>{item.name}</h4>
67                <small style={{ color: '#6c757d' }}>
68                  Created: {item.createdAt.toLocaleString('en-US')}
69                </small>
70              </div>
71
72              <button
73                onClick={() => startTransition(() => handleDelete(item.id))}
74                disabled={item.deleting}
75                style={{
76                  padding: '5px 10px',
77                  backgroundColor: '#dc3545',
78                  color: 'white',
79                  border: 'none',
80                  borderRadius: '4px',
81                  cursor: item.deleting ? 'not-allowed' : 'pointer',
82                  opacity: item.deleting ? 0.5 : 1
83                }}
84              >
85                {item.deleting ? 'Deleting...' : 'Delete'}
86              </button>
87            </div>
88          ))}
89      </div>
90    </div>
91  );
92}

The animation delay is now a plain await inside the Action. If the request sat inside setTimeout, the Action would end immediately and the deleting flag would vanish before the deletion.

2. Optimistic real-time collaboration

The shared editor combines two optimistic states with a WebSocket connection. Treat it as an architecture sketch:

1import { useOptimistic, useState, useEffect, startTransition } from 'react';
2
3function CollaborativeEditor({ documentId, userId }) {
4  const [content, setContent] = useState('');
5  const [collaborators, setCollaborators] = useState([]);
6
7  const [optimisticContent, updateOptimisticContent] = useOptimistic(
8    content,
9    (_, newContent) => newContent
10  );
11
12  const [optimisticCollaborators, updateOptimisticCollaborators] = useOptimistic(
13    collaborators,
14    (currentCollaborators, update) => {
15      if (update.type === 'cursor') {
16        return currentCollaborators.map(c =>
17          c.id === update.userId ? { ...c, cursor: update.position } : c
18        );
19      }
20      return currentCollaborators;
21    }
22  );
23
24  // WebSocket or other real-time connection
25  useEffect(() => {
26    const ws = new WebSocket(`ws://localhost:8080/doc/${documentId}`);
27
28    ws.onmessage = (event) => {
29      const data = JSON.parse(event.data);
30
31      if (data.type === 'content-update' && data.userId !== userId) {
32        setContent(data.content);
33      } else if (data.type === 'cursor-update') {
34        setCollaborators(data.collaborators);
35      }
36    };
37
38    return () => ws.close();
39  }, [documentId, userId]);
40
41  async function handleContentChange(newContent) {
42    // Optimistic update
43    updateOptimisticContent(newContent);
44
45    try {
46      await fetch(`/api/documents/${documentId}`, {
47        method: 'PATCH',
48        headers: { 'Content-Type': 'application/json' },
49        body: JSON.stringify({ content: newContent, userId })
50      });
51
52      setContent(newContent);
53    } catch (error) {
54      console.error('Error saving:', error);
55    }
56  }
57
58  function handleCursorMove(position) {
59    updateOptimisticCollaborators({
60      type: 'cursor',
61      userId,
62      position
63    });
64
65    // Send cursor update via WebSocket
66    // ws.send(JSON.stringify({ type: 'cursor', position }));
67  }
68
69  return (
70    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
71      <h2>Shared Editor</h2>
72
73      <div style={{ marginBottom: '10px' }}>
74        <h4>Active users:</h4>
75        <div style={{ display: 'flex', gap: '10px' }}>
76          {optimisticCollaborators.map(collaborator => (
77            <div
78              key={collaborator.id}
79              style={{
80                padding: '5px 10px',
81                backgroundColor: collaborator.color,
82                color: 'white',
83                borderRadius: '15px',
84                fontSize: '12px'
85              }}
86            >
87              {collaborator.name}
88              {collaborator.cursor && (
89                <span style={{ marginLeft: '5px' }}>
90                  (line {collaborator.cursor.line})
91                </span>
92              )}
93            </div>
94          ))}
95        </div>
96      </div>
97
98      <textarea
99        value={optimisticContent}
100        onChange={(e) => startTransition(() => handleContentChange(e.target.value))}
101        onSelect={(e) => {
102          const position = {
103            line: e.target.value.substring(0, e.target.selectionStart).split('\n').length,
104            column: e.target.selectionStart
105          };
106          startTransition(() => handleCursorMove(position));
107        }}
108        style={{
109          width: '100%',
110          height: '400px',
111          padding: '15px',
112          border: '1px solid #ddd',
113          borderRadius: '8px',
114          fontSize: '16px',
115          fontFamily: 'monospace'
116        }}
117      />
118
119      <div style={{
120        marginTop: '10px',
121        fontSize: '12px',
122        color: '#6c757d'
123      }}>
124        Last sync: {new Date().toLocaleTimeString('en-US')}
125      </div>
126    </div>
127  );
128}

The cursor reacts to the onSelect event, because React has no onSelectionChange event for a text field. Two warnings: react.dev advises against controlling a text field through transitions, so text typed by the user is better kept in plain state. The cursor position, in turn, does not wait for the server, so a plain useState fits it better than optimistic state.

3. Batch updates with queuing

A chat can send messages in batches of five. First the queue and its processing:

1import { useOptimistic, useState, useRef, startTransition } from 'react';
2
3function BatchedUpdatesDemo() {
4  const [messages, setMessages] = useState([]);
5  const updateQueue = useRef([]);
6  const isProcessing = useRef(false);
7
8  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
9    messages,
10    (currentMessages, newMessage) => [...currentMessages, newMessage]
11  );
12
13  async function processBatch() {
14    if (isProcessing.current || updateQueue.current.length === 0) return;
15
16    isProcessing.current = true;
17    const batch = updateQueue.current.splice(0, 5); // Max 5 at a time
18
19    try {
20      const response = await fetch('/api/messages/batch', {
21        method: 'POST',
22        headers: { 'Content-Type': 'application/json' },
23        body: JSON.stringify({ messages: batch })
24      });
25
26      const savedMessages = await response.json();
27
28      setMessages(current => [
29        ...current,
30        ...savedMessages.map(msg => ({ ...msg, sent: true }))
31      ]);
32    } catch (error) {
33      console.error('Error sending batch:', error);
34      // Return to queue
35      updateQueue.current.unshift(...batch);
36    } finally {
37      isProcessing.current = false;
38      // Process next batch if there are items
39      if (updateQueue.current.length > 0) {
40        setTimeout(processBatch, 100);
41      }
42    }
43  }
44
45  async function sendMessage(text) {
46    const newMessage = {
47      id: Date.now(),
48      text,
49      timestamp: new Date(),
50      sent: false,
51      pending: true
52    };
53
54    // Optimistic update
55    addOptimisticMessage(newMessage);
56
57    // Add to queue
58    updateQueue.current.push(newMessage);
59
60    // Start processing if not active
61    await processBatch();
62  }
63

useRef keeps the queue outside of state, so changing it does not trigger a render. Now sending and the view:

1  return (
2    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
3      <h2>Chat with batch updates</h2>
4
5      <div style={{
6        height: '400px',
7        overflowY: 'auto',
8        border: '1px solid #ddd',
9        borderRadius: '8px',
10        padding: '15px',
11        marginBottom: '15px',
12        backgroundColor: '#f8f9fa'
13      }}>
14        {optimisticMessages.map(message => (
15          <div
16            key={message.id}
17            style={{
18              marginBottom: '10px',
19              padding: '10px',
20              backgroundColor: message.pending ? '#e3f2fd' : '#fff',
21              borderRadius: '8px',
22              opacity: message.pending ? 0.8 : 1,
23              transition: 'all 0.3s'
24            }}
25          >
26            <div style={{ marginBottom: '5px' }}>{message.text}</div>
27            <div style={{
28              fontSize: '12px',
29              color: '#6c757d',
30              display: 'flex',
31              justifyContent: 'space-between'
32            }}>
33              <span>{message.timestamp.toLocaleTimeString('en-US')}</span>
34              <span>
35                {message.pending ? 'Sending...' : 'Sent'}
36              </span>
37            </div>
38          </div>
39        ))}
40      </div>
41
42      <form
43        onSubmit={(e) => {
44          e.preventDefault();
45          const input = e.target.message;
46          if (input.value) {
47            startTransition(() => sendMessage(input.value));
48            input.value = '';
49          }
50        }}
51        style={{ display: 'flex', gap: '10px' }}
52      >
53        <input
54          name="message"
55            style={{
56            flex: 1,
57            padding: '10px',
58            border: '1px solid #ddd',
59            borderRadius: '4px'
60          }}
61        />
62        <button
63          type="submit"
64          style={{
65            padding: '10px 20px',
66            backgroundColor: '#007bff',
67            color: 'white',
68            border: 'none',
69            borderRadius: '4px',
70            cursor: 'pointer'
71          }}
72        >
73          Send
74        </button>
75      </form>
76
77      <div style={{
78        marginTop: '10px',
79        fontSize: '12px',
80        color: '#6c757d'
81      }}>
82        In queue: {updateQueue.current.length} |
83        Processing: {isProcessing.current ? 'Yes' : 'No'}
84      </div>
85    </div>
86  );
87}

sendMessage waits for processBatch, so the message stays optimistic until it is sent. Note: when a batch is already on its way, processBatch returns immediately, and the next message may disappear before it is sent. The queue counter also reads a ref, so it does not refresh by itself.

Practical applications of useOptimistic

1. Comment system with reactions

One reducer handles three kinds of changes: adding a comment, a reaction and a reply. First the logic:

1import { useOptimistic, useState, startTransition } from 'react';
2
3function CommentSystem({ postId }) {
4  const [comments, setComments] = useState([]);
5
6  const [optimisticComments, updateOptimisticComment] = useOptimistic(
7    comments,
8    (currentComments, action) => {
9      switch (action.type) {
10        case 'add':
11          return [...currentComments, action.comment];
12        case 'react':
13          return currentComments.map(comment =>
14            comment.id === action.commentId
15              ? {
16                  ...comment,
17                  reactions: {
18                    ...comment.reactions,
19                    [action.reaction]: (comment.reactions[action.reaction] || 0) + 1
20                  },
21                  userReacted: action.reaction
22                }
23              : comment
24          );
25        case 'reply':
26          return currentComments.map(comment =>
27            comment.id === action.parentId
28              ? {
29                  ...comment,
30                  replies: [...(comment.replies || []), action.reply]
31                }
32              : comment
33          );
34        default:
35          return currentComments;
36      }
37    }
38  );
39
40  async function addComment(text) {
41    const newComment = {
42      id: Date.now(),
43      text,
44      author: 'You',
45      timestamp: new Date(),
46      reactions: {},
47      replies: [],
48      pending: true
49    };
50
51    updateOptimisticComment({ type: 'add', comment: newComment });
52
53    try {
54      const response = await fetch(`/api/posts/${postId}/comments`, {
55        method: 'POST',
56        headers: { 'Content-Type': 'application/json' },
57        body: JSON.stringify({ text })
58      });
59
60      const savedComment = await response.json();
61      setComments(current => [...current, savedComment]);
62    } catch (error) {
63      console.error('Error adding comment:', error);
64    }
65  }
66
67  async function reactToComment(commentId, reaction) {
68    updateOptimisticComment({
69      type: 'react',
70      commentId,
71      reaction
72    });
73
74    try {
75      await fetch(`/api/comments/${commentId}/react`, {
76        method: 'POST',
77        headers: { 'Content-Type': 'application/json' },
78        body: JSON.stringify({ reaction })
79      });
80
81      // Update actual state
82      const response = await fetch(`/api/posts/${postId}/comments`);
83      const updatedComments = await response.json();
84      setComments(updatedComments);
85    } catch (error) {
86      console.error('Error reacting:', error);
87    }
88  }
89
90  const reactionLabels = {
91    like: 'Like',
92    love: 'Love',
93    laugh: 'Haha',
94    wow: 'Wow',
95    sad: 'Sad'
96  };
97

Every change goes through updateOptimisticComment with a type field, just like actions in useReducer. Now the view:

1  return (
2    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
3      <h3>Comments</h3>
4
5      <form
6        onSubmit={(e) => {
7          e.preventDefault();
8          const text = e.target.comment.value;
9          if (text) {
10            startTransition(() => addComment(text));
11            e.target.reset();
12          }
13        }}
14        style={{ marginBottom: '20px' }}
15      >
16        <textarea
17          name="comment"
18            rows="3"
19          style={{
20            width: '100%',
21            padding: '10px',
22            border: '1px solid #ddd',
23            borderRadius: '4px',
24            marginBottom: '10px'
25          }}
26        />
27        <button
28          type="submit"
29          style={{
30            padding: '8px 16px',
31            backgroundColor: '#007bff',
32            color: 'white',
33            border: 'none',
34            borderRadius: '4px',
35            cursor: 'pointer'
36          }}
37        >
38          Add comment
39        </button>
40      </form>
41
42      <div style={{ display: 'grid', gap: '15px' }}>
43        {optimisticComments.map(comment => (
44          <div
45            key={comment.id}
46            style={{
47              padding: '15px',
48              backgroundColor: comment.pending ? '#f0f8ff' : '#fff',
49              border: '1px solid #ddd',
50              borderRadius: '8px',
51              opacity: comment.pending ? 0.8 : 1
52            }}
53          >
54            <div style={{ marginBottom: '10px' }}>
55              <strong>{comment.author}</strong>
56              <span style={{
57                marginLeft: '10px',
58                color: '#6c757d',
59                fontSize: '14px'
60              }}>
61                {comment.timestamp.toLocaleString('en-US')}
62              </span>
63              {comment.pending && (
64                <span style={{
65                  marginLeft: '10px',
66                  color: '#007bff',
67                  fontSize: '12px'
68                }}>
69                  (sending...)
70                </span>
71              )}
72            </div>
73
74            <p style={{ margin: '10px 0' }}>{comment.text}</p>
75
76            <div style={{ display: 'flex', gap: '10px' }}>
77              {Object.entries(reactionLabels).map(([reaction, label]) => (
78                <button
79                  key={reaction}
80                  onClick={() => startTransition(() => reactToComment(comment.id, reaction))}
81                  style={{
82                    padding: '4px 8px',
83                    backgroundColor: comment.userReacted === reaction ? '#e3f2fd' : '#f8f9fa',
84                    border: '1px solid #ddd',
85                    borderRadius: '15px',
86                    cursor: 'pointer',
87                    fontSize: '14px',
88                    display: 'flex',
89                    alignItems: 'center',
90                    gap: '4px'
91                  }}
92                >
93                  <span>{label}</span>
94                  {comment.reactions[reaction] > 0 && (
95                    <span>{comment.reactions[reaction]}</span>
96                  )}
97                </button>
98              ))}
99            </div>
100
101            {comment.replies && comment.replies.length > 0 && (
102              <div style={{
103                marginTop: '15px',
104                marginLeft: '20px',
105                paddingLeft: '15px',
106                borderLeft: '2px solid #e9ecef'
107              }}>
108                {comment.replies.map(reply => (
109                  <div key={reply.id} style={{ marginBottom: '10px' }}>
110                    <strong>{reply.author}:</strong> {reply.text}
111                  </div>
112                ))}
113              </div>
114            )}
115          </div>
116        ))}
117      </div>
118    </div>
119  );
120}