Jotai - Reactの状態管理ライブラリ

Jotaiとは

Jotaiは、Reactアプリケーションのための軽量かつ柔軟な状態管理ライブラリ。
非常にシンプルで使いやすく、必要な機能だけを組み合わせて使える。

基本構成

atom

• 状態の最小単位を表すオブジェクト
• グローバルに状態を共有したいときなどに使える
• 状態の初期値を与えるだけで簡単に定義できる

import { atom } from 'jotai';

const countAtom = atom(0); // atomを作成、初期値は0

useAtom

• useState のように、状態と更新関数を返す
• atomをコンポーネント内で使用可能にするReactフック
• グローバルで定義されたatomにアクセス・更新できるようになる

import { useAtom } from 'jotai';

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>＋</button>
    </div>
  );
};