A checkbox toggle should feel instant. But when that toggle needs to persist to a server, you face a choice: wait for the response and feel sluggish, or update immediately and handle the fallout. The second option — optimistic UI — is better for users, but the manual implementation adds state, flags, and try/catch blocks that pile up fast. For a simple checkbox the difference is small — a few lines. For anything more complex, the gap widens quickly.
The manual way: state + pending + rollback
Here's a typical TODO checkbox that optimistically updates the UI before the server responds. No libraries — just React's built-in hooks:
function TodoItem({ todo, onToggle }) {
const [checked, setChecked] = useState(todo.completed);
