Reactで作ったタスク管理アプリでローカルストレージの処理が上手くいかなかった話

Reactを使って簡単なタスク管理アプリを作っていて、ローカルストレージの処理が上手くいかなかったので、その時の対処方法を載せておきます。

修正前

App.jsx

const [tasks, setTasks] = useState([]);

useEffect(() => {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    setTasks(JSON.parse(savedTasks));
  }
}, []);

useEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]);

[tasks]が変更された時にローカルストレージにタスクを保存し、ページが読み込まれた時にローカルストレージから読み込んでsetTasksでtasksに格納する処理を組んでいました。

ローカルストレージの保存・読み込み処理自体は正常に動作しましたが、なぜかタスク一覧には表示されませんでした。

修正後

App.jsx

const [tasks, setTasks] = useState(() => {
  const savedTasks = localStorage.getItem('tasks');
  return JSON.parse(savedTasks ?? '[]');
});

useEffect(() => {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]);

ローカルストレージへの保存はそのままで、読み込むときにuseStateの初期値に直接設定するように組み直しました。

最後に

結局原因わからずで先に進んでしまいましたが、色々な方法があるのを知れてよかったです。参考までに。