状態管理

Zustand confirms its lead in terms of positivity, with only the default useState scoring higher. It's also grown in terms of usage, going from 28% to 41% over the past year!

(訳) Zustandは好感度においてその優位性を確固たるものにしており、デフォルトのuseStateのみがこれよりも高いスコアを出しています。また、使用率においても成長しており、この1年で28%から41%に増加しています！

https://2024.stateofreact.com/en-US/libraries/state-management/ より引用

useState による状態管理

React の基本的な状態管理は useState フックで行います。コンポーネント内のローカルな状態を管理するのに適しています。

useState のサンプル

シンプルなカウンターアプリの例です。

import { useState } from 'react';

export default function App() {
const [count, setCount] = useState(0);

return (
  <div style={{ padding: '20px', maxWidth: '400px', margin: '0 auto', textAlign: 'center' }}>
    <h1>useState サンプル</h1>

    <div
      style={{
        fontSize: '64px',
        fontWeight: 'bold',
        margin: '32px 0',
        color: '#007bff'
      }}
    >
      {count}
    </div>

    <div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
      <button
        onClick={() => setCount(count - 1)}
        style={{
          padding: '12px 24px',
          fontSize: '18px',
          backgroundColor: '#dc3545',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        -
      </button>
      <button
        onClick={() => setCount(0)}
        style={{
          padding: '12px 24px',
          fontSize: '18px',
          backgroundColor: '#6c757d',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        リセット
      </button>
      <button
        onClick={() => setCount(count + 1)}
        style={{
          padding: '12px 24px',
          fontSize: '18px',
          backgroundColor: '#28a745',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        +
      </button>
    </div>
  </div>
);

}

Open Sandbox

Zustand を使った状態管理

Zustand は、シンプルで使いやすいグローバル状態管理ライブラリーです。

Zustand のサンプル

複数のコンポーネント間で状態を共有する例です。

import CounterDisplay from './CounterDisplay';
import CounterControls from './CounterControls';

export default function App() {
  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>Zustand サンプル</h1>
      <p style={{ color: '#666', fontSize: '14px', marginBottom: '24px' }}>
        複数のコンポーネントで同じ状態を共有しています
      </p>
      <CounterDisplay />
      <CounterControls />
    </div>
  );
}

Open Sandbox

Zustand の特徴

• シンプルな API: create 関数でストアを作成し、フックとして使用できる
• TypeScript サポート: 型安全な状態管理が可能
• セレクター: 必要な状態だけを取得して、不要な再レンダリングを防ぐ
• ミドルウェア: persist（永続化）、devtools（開発者ツール）などのミドルウェアが利用可能
• 軽量: バンドルサイズが小さく、パフォーマンスに優れている

まとめ

• まずは useState を使えるようになろう
• 複数のコンポーネント間で状態を共有する必要があれば Zustand を試してみるのがいいかも