useDeleteTodo Hook

useDeleteTodo #

Similar to the previous lesson, we create a hook that returns a callback that allows us to delete an item.

// ./hooks/useDeleteTodo.js

import { useCallback } from 'react';
import { useSetDraft } from '../store';

export const useDeleteTodo = () => {
  const setDraft = useSetDraft();
  return useCallback(
    id => {
      setDraft(draft => {
        const index = draft.todos.findIndex(todo => todo.id === id);
        if (index >= 0) draft.todos.splice(index, 1);
      });
    },
    [setDraft],
  );
};

Again, we use Immer’s feature here, to show what a mutable update looks like.

We could use an immutable update if we prefer, like the following:

setDraft(draft => draft.filter(todo => todo.id !=== id));

In this case, the code with the immutable update is shorter.

Next #

In the next lesson, we learn about useToggleTodo hook.