Undoable Delete with a Snackbar and useReducer Timeout Controller in React

import React, { useState, useCallback } from 'react';
import { useUndoableAction } from './useUndoableAction';
import { UndoSnackbar } from './UndoSnackbar';
import { deleteTodo } from './api';

export function TodoList({ initialTodos }) {
  const [todos, setTodos] = useState(initialTodos);
  const { pending, schedule, undo } = useUndoableAction({ timeout: 5000 });

  const handleDelete = useCallback(
    (todo) => {
      const index = todos.findIndex((t) => t.id === todo.id);
      setTodos((prev) => prev.filter((t) => t.id !== todo.id));

      schedule({
        item: todo,
        label: `"${todo.title}" deleted`,
        restore: (item) =>
          setTodos((prev) => {
            const next = prev.slice();
            next.splice(index, 0, item);
            return next;
          }),
        commit: (item) => deleteTodo(item.id),
      });
    },
    [todos, schedule]
  );

  return (
    <>
      <ul className="todo-list">
        {todos.map((todo) => (
          <li key={todo.id} className="todo-list__item">
            <span>{todo.title}</span>
            <button type="button" onClick={() => handleDelete(todo)}>
              Delete
            </button>
          </li>
        ))}
      </ul>
      <UndoSnackbar pending={pending} onUndo={undo} />
    </>
  );
}

import { useReducer, useRef, useEffect, useCallback } from 'react';

const initialState = { pending: null };

function reducer(state, action) {
  switch (action.type) {
    case 'queue':
      return { pending: action.payload };
    case 'commit':
    case 'cancel':
      return { pending: null };
    default:
      return state;
  }
}

export function useUndoableAction({ timeout = 5000 } = {}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  const timerRef = useRef(null);

  const clearTimer = useCallback(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  }, []);

  const schedule = useCallback(
    ({ item, commit, restore, label }) => {
      clearTimer();
      dispatch({ type: 'queue', payload: { item, commit, restore, label } });
      timerRef.current = setTimeout(async () => {
        timerRef.current = null;
        try {
          await commit(item);
        } finally {
          dispatch({ type: 'commit' });
        }
      }, timeout);
    },
    [clearTimer, timeout]
  );

  const undo = useCallback(() => {
    if (!state.pending) return;
    clearTimer();
    state.pending.restore(state.pending.item);
    dispatch({ type: 'cancel' });
  }, [state.pending, clearTimer]);

  useEffect(() => clearTimer, [clearTimer]);

  return { pending: state.pending, schedule, undo };
}