問題一覧に戻る
中級カスタムフック
問題54: useLocalStorage

ローカルストレージと連携するカスタムフックの実装を学びます。stateの値を自動的にローカルストレージに保存し、ページをリロードしても値が保持されます。初回レンダリング時はローカルストレージから値を読み込み、値が更新されるたびに保存します。ユーザー設定、フォームの下書き、アプリケーションの状態など、永続化が必要なデータの管理に便利です。JSON形式でのシリアライズ・デシリアライズも含めて実装します。

import React, { useState, useEffect } from 'react';

{/* ローカルストレージフック */}
function useLocalStorage(key, initialValue) {
  {/* 初期値の取得（ストレージ優先） */}
  const [value, setValue] = useState(() => {
    const item = localStorage.getItem();
    return item ? JSON.parse(item) : initialValue;
  });

  {/* ストレージと同期 */}
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify());
  }, [key, value]);

  return [, setValue];
}

function App() {
  {/* 永続化されるstate */}
  const [name, setName] = ("name", "");

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="永続化される"
    />
  );
}

export default App;
···