What is the useOptimistic hook?

import { useOptimistic } from 'react';

function TodoList({ todos, addTodo }) {
const [optimisticTodos, addOptimisticTodo] = useOptimistic(
  todos,
  (currentTodos, newTodo) => [...currentTodos, { ...newTodo, pending: true }]
);

async function handleSubmit(formData) {
  const title = formData.get('title');
  
  // Immediately show optimistic update
  addOptimisticTodo({ id: Date.now(), title });
  
  // Send to server
  await addTodo(title);
  // Component re-renders with real data when complete
}

return (
  <>
    <form action={handleSubmit}>
      <input name="title" />
      <button>Add</button>
    </form>
    
    <ul>
      {optimisticTodos.map(todo => (
        <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
          {todo.title}
          {todo.pending && ' ⏳'}
        </li>
      ))}
    </ul>
  </>
);
}

'use client'
import { useOptimistic } from 'react';
import { likePost } from './actions';

export default function Post({ post, likes }) {
const [optimisticLikes, addOptimisticLike] = useOptimistic(
  likes,
  (currentLikes, amount) => currentLikes + amount
);

async function handleLike() {
  addOptimisticLike(1); // Immediate UI update
  await likePost(post.id); // Server update
}

return (
  <div>
    <h2>{post.title}</h2>
    <button onClick={handleLike}>
      ❤️ {optimisticLikes} Likes
    </button>
  </div>
);
}

function ShoppingCart({ items, removeItem }) {
const [optimisticItems, removeOptimistic] = useOptimistic(
  items,
  (current, removedId) => current.filter(item => item.id !== removedId)
);

async function handleRemove(itemId) {
  removeOptimistic(itemId); // Immediate removal from UI
  
  try {
    await removeItem(itemId);
  } catch (error) {
    // Automatic rollback on error!
    toast.error('Failed to remove item');
  }
}

return (
  <ul>
    {optimisticItems.map(item => (
      <li key={item.id}>
        {item.name}
        <button onClick={() => handleRemove(item.id)}>Remove</button>
      </li>
    ))}
  </ul>
);
}