React の usePersistedState フックをマスターする

はじめに

この実験では、React のusePersistedStateフックについて学びます。このフックを使うことで、状態値をlocalStorageに永続化することができます。ここでは、保存された値の初期化と更新方法、キー名の変更に対応する方法を調べます。この実験を終えると、React アプリケーションでこのフックを使って、特定のデータを保存し、ページをリフレッシュした後でも取得できるようにすることができるようになります。

React の usePersistedState フック

VM 内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

このフックは、localStorageに永続化された状態付きの値と、それを更新するために使用できる関数を返します。これを使用するには、次の手順に従います。

useState()フックを使用して、valueをdefaultValueに初期化します。
useRef()フックを使用して、Window.localStorage内の値のnameを保持する ref を作成します。
それぞれ初期化、valueの変更、およびnameの変更に対して、useEffect()フックのインスタンスを 3 つ使用します。
コンポーネントが最初にマウントされたとき、保存された値があればStorage.getItem()を使用してvalueを更新し、そうでなければStorage.setItem()を使用して現在の値を永続化します。
valueが更新されたとき、Storage.setItem()を使用して新しい値を保存します。
nameが更新されたとき、Storage.setItem()を使用して新しいキーを作成し、nameRefを更新し、Storage.removeItem()を使用してWindow.localStorageから以前のキーを削除します。
このフックは、プリミティブ値（つまりオブジェクトではない値）に対して使用することを想定しており、他のコードによるWindow.localStorageの変更には対応していません。これらの問題はどちらも簡単に対処できます（たとえば、JSON シリアル化と'storage'イベントの処理）。

以下はコードです。

const usePersistedState = (name, defaultValue) => {
  const [value, setValue] = React.useState(defaultValue);
  const nameRef = React.useRef(name);

  React.useEffect(() => {
    try {
      const storedValue = localStorage.getItem(name);
      if (storedValue !== null) {
        setValue(storedValue);
      } else {
        localStorage.setItem(name, defaultValue);
      }
    } catch {
      setValue(defaultValue);
    }
  }, []);

  React.useEffect(() => {
    try {
      localStorage.setItem(nameRef.current, value);
    } catch {}
  }, [value]);

  React.useEffect(() => {
    const lastName = nameRef.current;
    if (name !== lastName) {
      try {
        localStorage.setItem(name, value);
        nameRef.current = name;
        localStorage.removeItem(lastName);
      } catch {}
    }
  }, [name]);

  return [value, setValue];
};

const MyComponent = ({ name }) => {
  const [value, setValue] = usePersistedState(name, 10);

  const handleInputChange = (event) => {
    setValue(event.target.value);
  };

  return <input value={value} onChange={handleInputChange} />;
};

const MyApp = () => {
  const [name, setName] = React.useState("my-value");

  const handleInputChange = (event) => {
    setName(event.target.value);
  };

  return (
    <>
      <MyComponent name={name} />
      <input value={name} onChange={handleInputChange} />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

React の usePersistedState フック

はじめに

React の usePersistedState フック

まとめ