Jotaiとは
JotaiはReactの状態管理ライブラリです。
Reactの状態管理ライブラリはRedux, Recoil, Zustandなどが有名ですが、Jotaiの作者はOSS開発者の加藤大志（Daishi Kato）さんで日本人の開発者です。
Jotaiはatomを定義し、useAtomで状態を取得・更新できます。
Jotaiの使い方
まず以下のコマンドでReactの環境を作成してください。
npm create vite@latest my-react-jotai -- --template react-swc-ts次にJotaiをインストールしてください。
cd my-react-jotai
npm install
npm i jotai例としてカウンターを作成するので、カウンターの数値の状態を管理するための「atom.ts」ファイルを用意して、以下のコードを書いて保存してください。
atom.ts
import { atom } from 'jotai'
export const countAtom = atom(0)次にCounter.tsxを作成して、ボタンを押したらカウント(countAtom)が増えるコードを書きます。
JotaiからuseStateに似たuseAtomを読み込み、カウント(countAtom)はatom.tsから読み込みます。
Counter.tsx
import { useAtom } from 'jotai'
import { countAtom } from './atoms'
function Counter() {
const [count, setCount] = useAtom(countAtom)
return (
<button onClick={() => setCount(count + 1)}>Increment</button>
)
}
export default Counter最後にApp.tsxでuseAtom, Counter, countAtomを読み込んで以下のようにすれば完成です。
App.tsx
import { useAtom } from 'jotai'
import Counter from './Counter'
import { countAtom } from './atoms'
function App() {
const [count] = useAtom(countAtom)
return (
<div>
<p>Count: {count}</p>
<Counter />
</div>
)
}
export default Appこのようなコードの場合、Jotaiを使用しない場合はCounterにcountをpropsで渡す必要がありますが、Jotaiを使用すればpropsを記述せずに済むので、状態管理が容易になります。
