Reactで、入力を自動で保存して「保存しました」と表示する方法

import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';

export type SaveStatus = 'saved' | 'unsaved' | 'saving' | 'error';

export function useAutoSave<T>(value: T, save: (value: T) => Promise<void>, delay = 1000) {
  const [status, setStatus] = useState<SaveStatus>('saved');
  const [savedAt, setSavedAt] = useState<Date | null>(null);
  const latest = useRef(value); // いちばん新しい値
  const saved = useRef(value); // 保存できた値
  const saving = useRef(false); // 保存のリクエストを送っている最中か
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const saveRef = useRef(save);

  // 毎回の描画で渡された save を覚えておく（保存するときは最新の関数を使う）
  useLayoutEffect(() => {
    saveRef.current = save;
  });

  // 待たずにいますぐ保存する。保存中に呼ばれたら、いまの保存が終わってから続けて保存する
  const flush = useCallback(async (): Promise<void> => {
    if (timer.current) {
      clearTimeout(timer.current);
      timer.current = null;
    }
    if (saving.current) return;
    const v = latest.current;
    if (Object.is(v, saved.current)) {
      setStatus('saved');
      return;
    }
    saving.current = true;
    setStatus('saving');
    try {
      await saveRef.current(v);
      saved.current = v;
      setSavedAt(new Date());
    } catch {
      setStatus('error');
      return;
    } finally {
      saving.current = false;
    }
    if (Object.is(latest.current, v)) setStatus('saved');
    else if (timer.current) setStatus('unsaved'); // 入力が続いている。待ちが終わったら保存する
    else void flush(); // 保存中に入力が止まっていた。続けて保存する
  }, []);

  // 値が変わったら、delay ミリ秒待ってから保存する。待っているあいだに変わったら、待ち直す
  useEffect(() => {
    latest.current = value;
    const changed = !Object.is(value, saved.current);
    // 保存中は「保存中」の表示のままにする（終わったあとで表示を決め直す）
    if (!saving.current) setStatus(changed ? 'unsaved' : 'saved');
    if (!changed) return;
    timer.current = setTimeout(() => {
      timer.current = null;
      void flush();
    }, delay);
    return () => {
      if (timer.current) clearTimeout(timer.current);
      timer.current = null;
    };
  }, [value, delay, flush]);

  // コンポーネントが画面から消えるときは、待たずに保存する
  useEffect(() => () => void flush(), [flush]);

  // 保存が終わっていないあいだは、タブを閉じる前に確認を出す
  useEffect(() => {
    if (status === 'saved') return;
    const onBeforeUnload = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = true; // preventDefault() に対応していない古いブラウザ向け
    };
    window.addEventListener('beforeunload', onBeforeUnload);
    return () => window.removeEventListener('beforeunload', onBeforeUnload);
  }, [status]);

  return { status, savedAt, saveNow: flush };
}

// メモを保存する。fetch は 500 などでも失敗にならないので、res.ok を見て投げる
export async function saveNote(text: string): Promise<void> {
  const res = await fetch('/api/note', {
    method: 'PUT',
    headers: { 'content-type': 'text/plain; charset=utf-8' },
    body: text,
  });
  if (!res.ok) throw new Error(`保存に失敗しました（${res.status}）`);
}

import type { SaveStatus } from './useAutoSave';

type Props = { status: SaveStatus; savedAt: Date | null; onRetry: () => void };

const timeFormat = new Intl.DateTimeFormat('ja-JP', { hour: '2-digit', minute: '2-digit' });

export function SaveStatusText({ status, savedAt, onRetry }: Props) {
  let text = '';
  if (status === 'unsaved') text = '未保存の変更があります';
  else if (status === 'saving') text = '保存中…';
  else if (status === 'error') text = '保存できませんでした';
  else if (savedAt) text = `${timeFormat.format(savedAt)} に保存しました`;

  return (
    <div className="save-status">
      {/* 文字が変わると、スクリーンリーダーが読み上げる */}
      <p role="status" data-status={status}>{text}</p>
      {status === 'error' && (
        <button type="button" onClick={onRetry}>
          もう一度保存する
        </button>
      )}
    </div>
  );
}

import { useState } from 'react';
import { useAutoSave } from './useAutoSave';
import { SaveStatusText } from './SaveStatusText';
import { saveNote } from './api';

export function NoteEditor({ initialText }: { initialText: string }) {
  const [text, setText] = useState(initialText);
  const { status, savedAt, saveNow } = useAutoSave(text, saveNote, 1000);

  return (
    <div>
      <label htmlFor="note">メモ</label>
      <textarea id="note" rows={4} value={text} onChange={(e) => setText(e.target.value)} />
      <SaveStatusText status={status} savedAt={savedAt} onRetry={saveNow} />
    </div>
  );
}