Save Changes Automatically

Loading solves only half of persistence. The app also needs to write the latest task list whenever React state changes.

Import useEffect in src/App.jsx:

import { useEffect, useState } from "react";

Then add an effect inside App:

useEffect(() => {
  saveTasks(tasks);
}, [tasks]);

The dependency array tells React when the effect should run. Whenever tasks receives a new array, the effect saves that current array.

This works with all of the actions you already built:

• adding a task changes tasks → it is saved
• deleting a task changes tasks → it is saved
• moving a task changes tasks → it is saved

You do not need separate localStorage.setItem calls inside every button handler.

Checkpoint

Create a task, refresh the page, and confirm it remains. Then delete a task, refresh again, and confirm the deletion remains. Finally, move a task to another column and refresh to verify its new status is preserved.