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 { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

rust

use serde::Deserialize;
 
#[derive(Debug, Deserialize)]
#[serde(untagged)]

Parsing flexible JSON shapes with serde

deserialization enums json

Intermediate 6 steps

ruby

require "shellwords"
require "open3"
 
module Backup

Building safe shell commands in Ruby

shell-out subprocess command-injection

Intermediate 7 steps

python

from fastapi import FastAPI, WebSocket, WebSocketDisconnect
 
app = FastAPI()

Building a WebSocket chat with FastAPI

websockets broadcast connection-management

Intermediate 9 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';