【Next.js】 Zustandを用いた状態管理について

概要
本文
Zustandとは
useState + localStorage
Zustand
参考文献
おわりに

概要

この記事では、Zustand とは何で、用いると何が良いのかを自分の最近得た知識として残しておきます。

本文

こちらの章では、本文を記述していきます。

Zustandとは

Zustand は、主にReactで利用される小さくてシンプルな状態管理ライブラリです。

Zustand を利用することによって、状態管理に関連するコードの複雑さを大幅に解消できます。

また、HookベースのAPIを提供しているため、React Hooksに慣れている開発者にとっては直感的に使うことが可能です。

リロード可能なカウンターアプリを作成し、「localStorageとuseState」で記述した場合と、「Zustand」のみで記述した場合の記述の違いを見ていきます。

useState + localStorage

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

export function App() {
  const [count, setCount] = useState(() => {
    const savedCount = localStorage.getItem('count');
    return savedCount ? parseInt(savedCount, 10) : 0;
  });

  useEffect(() => {
    localStorage.setItem('count', count.toString());
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default App;

Zustand

使用感はReduxに近いものだと感じました。

わざわざuseEffectを書くことがない点や、状態値と更新用関数をまとめて管理できるのも運用が楽だしコード量が増えないので良いなと思いました。

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useCounterStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      decrement: () => set((state) => ({ count: state.count - 1 })),
    }),
    { name: 'counter', getStorage: () => localStorage }
  )
);

export function App() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default App;