typescript 51 lines · 7 steps

A debounced auto-save hook in React

A custom hook debounces form changes, cancels stale saves, and flushes on unload so no draft is lost.

Explained by highlit

React Advanced debouncing request-cancellation refs cleanup idempotency

1import { useEffect, useRef, useCallback } from "react";
2 
3type DraftPayload = Record<string, unknown>;
4 
5async function persistDraft(id: string, payload: DraftPayload, signal: AbortSignal) {
const res = await fetch(`/api/drafts/${id}`, {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(payload),
  signal,
});
if (!res.ok) throw new Error(`Draft save failed: ${res.status}`);
13}
14 
15export function useAutoSaveDraft(draftId: string, values: DraftPayload, delay = 800) {
const timer = useRef<ReturnType<typeof setTimeout>>();
const controller = useRef<AbortController>();
const lastSaved = useRef<string>("");
19 
const flush = useCallback(async () => {
  const snapshot = JSON.stringify(values);
  if (snapshot === lastSaved.current) return;
23 
  controller.current?.abort();
  controller.current = new AbortController();
26 
  try {
    await persistDraft(draftId, values, controller.current.signal);
    lastSaved.current = snapshot;
  } catch (err) {
    if ((err as Error).name !== "AbortError") {
      console.error("Auto-save error", err);
    }
  }
}, [draftId, values]);
36 
useEffect(() => {
  clearTimeout(timer.current);
  timer.current = setTimeout(flush, delay);
  return () => clearTimeout(timer.current);
}, [flush, delay]);
42 
useEffect(() => {
  const onLeave = () => {
    clearTimeout(timer.current);
    navigator.sendBeacon(`/api/drafts/${draftId}`, JSON.stringify(values));
  };
  window.addEventListener("beforeunload", onLeave);
  return () => window.removeEventListener("beforeunload", onLeave);
}, [draftId, values]);
51}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Debouncing plus a saved-snapshot comparison avoids redundant network writes on every keystroke.
2AbortController lets a new save cancel the in-flight one so responses never arrive out of order.
3sendBeacon on beforeunload rescues data the debounce timer never got to flush.

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

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';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';