概要
Jotaiは、stateを小さなatomとして定義し、componentが必要なatomだけを購読するReact向けstate management libraryです。primitive atomからderived、async、write-only atomまで同じmodelで組み合わせられます。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日:
primitive atomをuseAtomで読み書きする
atom(0)のようにstate単位を作り、useAtomでvalueとsetterを取得してcomponentから更新できます。
derived・async atomでstate間の関係を表現する
他のatomをgetして計算するderived atomや、Promiseを返すasync atomを作り、依存関係を宣言的に表現できます。
React stateを小さな単位へ分割して再利用したい場合に
巨大なglobal storeではなく、featureごとに小さなstate unitを作り、必要なcomponentだけが購読する構成に向きます。
出典:[2]
v3のruntime・TypeScript要件を確認する
現在のpackageはNode.js 22.12以上、React 18以上を前提とし、型定義はTypeScript 5.5以上向けです。既存projectのtoolchain要件を確認してから更新してください。
出典:[4]
参考にした公式資料
- [1]pmndrs/jotai repository(2026-09-21)
- [2]Jotai README(2026-09-21)
- [3]Jotai documentation(2026-09-21)
- [4]jotai package(2026-09-21)
- [5]Jotai MIT license(2026-09-21)
編集部からの補足
現在のJotaiは3.0.0です。packageはReact 18以上をpeer dependencyとし、型定義はTypeScript 5.5以上を要求する構成です。Node engineは22.12.0以上です。global storeへ巨大なstate objectを置くより、独立したatomを必要なcomponentで購読し、derived atomで関係を表現する設計が中心です。
3ステップで試す
- 1
Jotaiを追加
READMEの最小導入手順でJotaiをReact projectへ追加します。
npm i jotai - 2
primitive atomを作成
独立したstate単位としてcount atomを定義します。
const countAtom = atom(0) - 3
componentからuseAtomで利用
必要なcomponentだけがatomを購読し、setterで更新できることを確認します。
const [count, setCount] = useAtom(countAtom)
成長
成長の推移 · 直近30日
21,275 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit(直近30日)
- 6
- Open PR
- 1
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- Redux61,490 Stars
共通タグ 3件 · 共通カテゴリ 2件 · 同じ言語
Application全体のStateをStoreに集約し、ActionとReducerで予測可能に更新するJavaScript/TypeScript向けState Management Library。現在はRedux Toolkitが公式推奨。
TypeScript - Expo52,361 Stars
共通タグ 2件 · 共通カテゴリ 2件 · 同じ言語
React Nativeを土台にAndroid・iOS・Webを一つのproject modelで開発し、Router/Modulesをまとめるuniversal app framework。
TypeScript - tldraw50,488 Stars
共通タグ 2件 · 共通カテゴリ 2件 · 同じ言語
Reactにinfinite canvasを組み込み、custom shape・multiplayer・AI workflowへ拡張できるSDK。
TypeScript - TanStack Query50,342 Stars
共通タグ 2件 · 共通カテゴリ 2件 · 同じ言語
APIから取得するサーバー側データの取得・キャッシュ・再取得・更新を管理する非同期データ管理ライブラリ。React/Vue/Solid/Svelte等に対応する。
TypeScript - React Hook Form44,868 Stars
共通タグ 2件 · 共通カテゴリ 2件 · 同じ言語
Reactのフォーム入力・検証・送信状態をHooksで管理するフォームライブラリ。ネイティブinputを活かしながら再レンダリングを抑える。
TypeScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。