Reactで、元に戻す・やり直すの機能を作る方法

import { useCallback, useReducer } from 'react';

type History<T> = { past: T[]; present: T; future: T[] };
type Action<T> =
  | { type: 'set'; next: (prev: T) => T; limit: number }
  | { type: 'undo' }
  | { type: 'redo' };

export function historyReducer<T>(state: History<T>, action: Action<T>): History<T> {
  switch (action.type) {
    case 'set': {
      const next = action.next(state.present);
      // 変わっていなければ、履歴を積まない
      if (Object.is(next, state.present)) return state;
      return {
        // 古いものから捨てて、limit 件までにする
        past: [...state.past, state.present].slice(-action.limit),
        present: next,
        // 新しい変更をしたら、やり直しの履歴は消す
        future: [],
      };
    }
    case 'undo': {
      if (state.past.length === 0) return state;
      return {
        past: state.past.slice(0, -1),
        present: state.past[state.past.length - 1],
        future: [state.present, ...state.future],
      };
    }
    case 'redo': {
      if (state.future.length === 0) return state;
      return {
        past: [...state.past, state.present],
        present: state.future[0],
        future: state.future.slice(1),
      };
    }
  }
}

export function useUndoable<T>(initial: T, limit = 100) {
  const [history, dispatch] = useReducer(historyReducer<T>, {
    past: [],
    present: initial,
    future: [],
  });

  const set = useCallback(
    (next: (prev: T) => T) => dispatch({ type: 'set', next, limit }),
    [limit],
  );
  const undo = useCallback(() => dispatch({ type: 'undo' }), []);
  const redo = useCallback(() => dispatch({ type: 'redo' }), []);

  return {
    value: history.present,
    set,
    undo,
    redo,
    undoCount: history.past.length,
    redoCount: history.future.length,
  };
}

const todos = useUndoable<Todo[]>([], limit);

// 追加
todos.set((prev) => [...prev, { id, text, done: false }]);
// チェックの切り替え
todos.set((prev) =>
  prev.map((x) => (x.id === t.id ? { ...x, done: !x.done } : x)),
);
// 削除
todos.set((prev) => prev.filter((x) => x.id !== t.id));

<button type="button" onClick={todos.undo} disabled={todos.undoCount === 0}>
  元に戻す（<span data-testid="undo-count">{todos.undoCount}</span>）
</button>
<button type="button" onClick={todos.redo} disabled={todos.redoCount === 0}>
  やり直す（<span data-testid="redo-count">{todos.redoCount}</span>）
</button>

3件追加: [[ ] 牛乳を買う, [ ] 本を返す, [ ] 部屋を片付ける] 元に戻す 3 / やり直す 0
「本を返す」をチェック: [[ ] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける] 元に戻す 4 / やり直す 0
「部屋を片付ける」を削除: [[ ] 牛乳を買う, [x] 本を返す] 元に戻す 5 / やり直す 0
元に戻す: [[ ] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける] 元に戻す 4 / やり直す 1
元に戻す: [[ ] 牛乳を買う, [ ] 本を返す, [ ] 部屋を片付ける] 元に戻す 3 / やり直す 2
やり直す: [[ ] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける] 元に戻す 4 / やり直す 1
新しく追加: [[ ] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける, [ ] 花に水をやる] 元に戻す 5 / やり直す 0
やり直すボタンの disabled: true

5件追加: [[ ] A, [ ] B, [ ] C, [ ] D, [ ] E] 元に戻す 3 / やり直す 0
元に戻すを4回押そうとした: [[ ] A, [ ] B] 元に戻す 0 / やり直す 3

import { useEffect } from 'react';

// 文字を入力する欄では、ブラウザの「元に戻す」に任せる
function isTextField(target: EventTarget | null) {
  if (!(target instanceof HTMLElement)) return false;
  if (target.isContentEditable || target instanceof HTMLTextAreaElement) return true;
  if (!(target instanceof HTMLInputElement)) return false;
  return !['checkbox', 'radio', 'button', 'submit', 'reset', 'range', 'color', 'file'].includes(target.type);
}

export function useUndoShortcuts(undo: () => void, redo: () => void) {
  useEffect(() => {
    function handleKeyDown(e: KeyboardEvent) {
      if (!(e.ctrlKey || e.metaKey) || e.altKey || isTextField(e.target)) return;
      const key = e.key.toLowerCase();
      if (key === 'z' && !e.shiftKey) {
        e.preventDefault();
        undo();
      } else if ((key === 'z' && e.shiftKey) || (key === 'y' && !e.shiftKey)) {
        e.preventDefault();
        redo();
      }
    }
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [undo, redo]);
}

  [ページ] keydown key=Control ctrl=true meta=false shift=false defaultPrevented=false
  [ページ] keydown key=z ctrl=true meta=false shift=false defaultPrevented=true
Control+z: [[ ] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける] 元に戻す 4 / やり直す 1
  [ページ] keydown key=Control ctrl=true meta=false shift=false defaultPrevented=false
  [ページ] keydown key=Shift ctrl=true meta=false shift=true defaultPrevented=false
  [ページ] keydown key=Z ctrl=true meta=false shift=true defaultPrevented=true
Control+Shift+Z（大文字）: [[ ] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける, [ ] 花に水をやる] 元に戻す 5 / やり直す 0

フォーカス: INPUT type=checkbox
「牛乳を買う」をチェック: [[x] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける, [ ] 花に水をやる] 元に戻す 6 / やり直す 0
  [ページ] keydown key=Control ctrl=true meta=false shift=false defaultPrevented=false
  [ページ] keydown key=z ctrl=true meta=false shift=false defaultPrevented=true
Control+z: [[ ] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける, [ ] 花に水をやる] 元に戻す 5 / やり直す 1

入力欄: 洗濯をする
入力欄に「洗濯をする」と入力: [[ ] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける, [ ] 花に水をやる] 元に戻す 5 / やり直す 1
  [ページ] keydown key=Control ctrl=true meta=false shift=false defaultPrevented=false
  [ページ] keydown key=z ctrl=true meta=false shift=false defaultPrevented=false
入力欄: 洗濯をす
入力欄で Control+z: [[ ] 牛乳を買う, [x] 本を返す, [ ] 部屋を片付ける, [ ] 花に水をやる] 元に戻す 5 / やり直す 1

setTodos((prev) => {
  setPast((p) => [...p, prev]); // 更新用の関数の中で、別の state を更新している
  return [...prev, { id: prev.length + 1, text: `項目${prev.length + 1}`, done: false }];
});

--- うまくいかない書き方（本番ビルド、StrictMode あり） ---
更新用の関数の中で履歴を積む: 1回追加 → 項目 1 件、履歴 1 件
更新用の関数の中で履歴を積む: 2回追加 → 項目 2 件、履歴 2 件
...
--- うまくいかない書き方（開発ビルド、StrictMode あり） ---
...
更新用の関数の中で履歴を積む: 1回追加 → 項目 1 件、履歴 2 件
更新用の関数の中で履歴を積む: 2回追加 → 項目 2 件、履歴 4 件

todos.set((prev) => {
  prev[0].done = !prev[0].done; // 前の値のオブジェクトを直接書き換えている
  return [...prev];
});

--- うまくいかない書き方（本番ビルド、StrictMode あり） ---
...
オブジェクトを書き換える: 最初 → done false、履歴 0 件
オブジェクトを書き換える: 切り替え → done true、履歴 1 件
オブジェクトを書き換える: 元に戻す → done true、履歴 0 件
--- うまくいかない書き方（開発ビルド、StrictMode あり） ---
...
オブジェクトを書き換える: 最初 → done false、履歴 0 件
オブジェクトを書き換える: 切り替え → done false、履歴 1 件
オブジェクトを書き換える: 元に戻す → done false、履歴 0 件