typescript 49 lines · 8 steps

Optimistic UI updates in a React hook

A custom hook toggles a todo instantly, then reconciles or rolls back based on the server's response.

Explained by highlit

React Intermediate optimistic-updates custom-hooks error-handling rollback async

1import { useState, useCallback } from 'react';
2 
3type Todo = {
id: string;
title: string;
completed: boolean;
7};
8 
9export function useToggleTodo(initial: Todo[]) {
const [todos, setTodos] = useState(initial);
const [error, setError] = useState<string | null>(null);
12 
const toggle = useCallback(async (id: string) => {
  const previous = todos;
  const target = todos.find((t) => t.id === id);
  if (!target) return;
17 
  const nextCompleted = !target.completed;
19 
  setTodos((current) =>
    current.map((t) =>
      t.id === id ? { ...t, completed: nextCompleted } : t,
    ),
  );
  setError(null);
26 
  try {
    const res = await fetch(`/api/todos/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ completed: nextCompleted }),
    });
33 
    if (!res.ok) {
      throw new Error(`Request failed: ${res.status}`);
    }
37 
    const saved: Todo = await res.json();
    setTodos((current) =>
      current.map((t) => (t.id === id ? saved : t)),
    );
  } catch (err) {
    setTodos(previous);
    setError(err instanceof Error ? err.message : 'Update failed');
  }
}, [todos]);
47 
return { todos, error, toggle };
49}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Optimistic updates apply the change immediately and treat the network round-trip as confirmation, not a prerequisite.
2Capturing prior state before mutating gives you a clean rollback path when the request fails.
3Returning both data and error from a hook lets components render success and failure from one source of truth.

Related explainers

typescript

import {
  CanActivate,
  ExecutionContext,
  Injectable,

How guards chain auth in NestJS

guards authentication authorization

Intermediate 8 steps

ruby

require "net/http"
require "json"
 
class UrlFetcher

A thread-pool URL fetcher in Ruby

concurrency thread-pool queues

Intermediate 8 steps

package auth
 
import (
	"errors"

Hashing and verifying passwords with bcrypt in Go

password-hashing bcrypt error-handling

Intermediate 7 steps

rust

use std::fs::File;
use std::io::{self, Read};
use std::path::Path;

Streaming a SHA-256 hash of a file in Rust

hashing buffered-io streaming

Intermediate 5 steps

package fsutil
 
import (
	"io/fs"

Walking a directory tree to find large files in Go

filesystem recursion closures

Intermediate 7 steps

typescript

import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { toObservable } from '@angular/core/rxjs-interop';