optimistic-ui-todos-item.js

import React from 'react'

const markAsDone = async (todoId) => {
  // Send a request to mark a todo as done
}

export default function Todo({ todo }) {
  const handleMarkAsDone = async (todo) => {
    // Optimistically update local state to mark this task as done
    setState(prevState => ({
      ...prevState,
      todos: prevState.todos.map(item => {
        if (item.id === todo.id) {
          return {
            ...item,
            done: true
          }
        }
        return item
      })
    }))

    try {
      // Send the actual API request to the server
      await markAsDone(todo.id)

    } catch (error) {
      // Rollback if the API request fails
      setState(prevState => ({
        ...prevState,
        todos: prevState.todos.map(item => {
          if (item.id === todo.id) {
            return {
              ...item,
              done: false
            }
          }
          return item
        })
      }))
    }
  }

  return (
    <li>
      <p>{todo.title}</p>
      {todo.done ? (
        <strong>Done</strong>
      ) : (
        <button onClick={() => handleMarkAsDone(todo)}>
          Mark as Done
        </button>
      )}
    </li>
  );
}