Jotai基礎

Jotai基礎

Jotaiは、アトミックな状態管理を提供するミニマリストなライブラリです。

インストール

npm install jotai

Atomの定義

import { atom } from 'jotai';

export const countAtom = atom(0);

派生Atom

import { atom } from 'jotai';
import { countAtom } from './atoms';

export const doubleCountAtom = atom((get) => get(countAtom) * 2);

コンポーネントでの使用

import { useAtom } from 'jotai';
import { countAtom, doubleCountAtom } from './atoms';

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubleCount] = useAtom(doubleCountAtom);

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