#11useToDo & useLocalStorage Hooks

Overview

Refactor the existing ToDo app by moving all task-related logic into a custom hook useTodo, and persist tasks in localStorage through a separate useLocalStorage hook.

Requirements

• Move the current ToDo logic (state, handlers, etc.) into a custom hook called useTodo.
• Implement a useLocalStorage hook responsible for synchronizing the ToDo list with localStorage.
• The ToDo list must:
  • Load saved tasks from localStorage on mount.
  • Save updated tasks to localStorage whenever the list changes.
• The useTodo hook should expose:
  • The list of tasks.
  • The current input value and a setter.
  • Functions to:
    • Add a task.
    • Delete a task.
    • Toggle a task’s completion status.
    • Clear completed tasks.

Notes

• The main goal is to separate responsibilities:
  • useTodo handles app logic.
  • useLocalStorage handles persistence.
• Keep your hooks pure and reusable — avoid ToDo-specific logic in useLocalStorage.
• When initializing state from localStorage, remember to handle missing or malformed data safely.
• The UI code should not change beyond using useTodo instead of local state.

Tests

1. adds a task when submitting the form
2. toggles task completion and apply line-through when checkbox is clicked
3. deletes a task when delete button is clicked
4. shows only 'Clear complete' button when there is at least one completed task
5. clears completed tasks when 'Clear complete' is clicked
6. persists tasks in localStorage across mounts