# pmndrs/jotai

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/pmndrs-jotai).**

21,008 stars · 704 forks · TypeScript · mit

## Links

- GitHub: https://github.com/pmndrs/jotai
- Homepage: https://jotai.org
- awesome-repositories: https://awesome-repositories.com/repository/pmndrs-jotai.md

## Topics

`atomic` `hacktoberfest` `management` `react` `state`

## Description

Jotai is a state management library for React applications that utilizes an atomic model to handle data. It organizes application state into small, independent units called atoms, which automatically track dependencies and trigger granular updates to components. By building state through these composable primitives, the library ensures that only the necessary parts of an application re-render when data changes.

The library distinguishes itself through its flexible approach to state composition and asynchronous data handling. It integrates promises directly into the state model, allowing developers to manage remote data fetching and loading states as if they were synchronous. Furthermore, it supports provider-based scoping to isolate state containers to specific component subtrees, preventing data leakage and enabling multiple independent instances of the same state within a single application.

Beyond its core atomic structure, the project provides a comprehensive suite of tools for managing complex data flows. This includes utilities for derived state, URL synchronization, and persistent storage, as well as mechanisms for integrating external state patterns like reducers or state machines. The system also offers robust debugging capabilities, including time-travel inspection, state history tracking, and isolated testing environments to validate logic independently of the user interface.

The library is written in TypeScript, providing automatic type inference for state definitions to ensure consistency across the application. It is designed to be framework-agnostic, exposing a central store interface that allows for imperative state access and manipulation outside of the standard component render cycle.

## Tags

### Data & Databases

- [Application State Management](https://awesome-repositories.com/f/data-databases/application-state-management.md) — Manages shared application data through independent, composable atomic units that optimize re-renders.
- [Data Access Hooks](https://awesome-repositories.com/f/data-databases/remote-data-management/data-access-hooks.md) — Simplifies remote data fetching by providing hooks that manage loading and error states automatically. ([source](https://jotai.org/docs/extensions/urql))
- [Browser Storage Persistence](https://awesome-repositories.com/f/data-databases/state-persistence/browser-storage-persistence.md) — Synchronizes atom values with browser storage to maintain application state across page reloads. ([source](https://jotai.org/docs/guides/react-native))
- [Mutation Handlers](https://awesome-repositories.com/f/data-databases/graphql-integrations/mutation-handlers.md) — Enables updating remote data via GraphQL mutations with integrated state tracking. ([source](https://jotai.org/docs/extensions/relay))
- [Data Pagination Utilities](https://awesome-repositories.com/f/data-databases/data-pagination-utilities.md) — Supports paginated data streams through atoms to enable efficient fetching of subsequent pages. ([source](https://jotai.org/docs/extensions/query))
- [Real-time Subscription Handlers](https://awesome-repositories.com/f/data-databases/remote-data-management/real-time-subscription-handlers.md) — Maintains persistent connections to remote sources to receive and reflect real-time updates. ([source](https://jotai.org/docs/extensions/relay))

### Software Engineering & Architecture

- [Atomic State Primitives](https://awesome-repositories.com/f/software-engineering-architecture/composite-state-definitions/atomic-state-primitives.md) — A library for managing application state using small, independent units called atoms that automatically track dependencies and trigger component re-renders.
- [Reactive State Graphs](https://awesome-repositories.com/f/software-engineering-architecture/reactive-state-graphs.md) — Maintains a dependency graph to ensure derived state updates efficiently when source atoms change.
- [Write-Only State Actions](https://awesome-repositories.com/f/software-engineering-architecture/composite-state-definitions/atomic-state-primitives/write-only-state-actions.md) — The state management system encapsulates state modification logic into dedicated write-only atoms to enable granular updates and cleaner component interfaces. ([source](https://jotai.org/docs/guides/composing-atoms))
- [Centralized State Stores](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/centralized-state-stores.md) — Exposes a central store interface for imperative state access outside the component render cycle.
- [Hierarchical State Composition](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/centralized-state-containers/state-containers/hierarchical-state-composition.md) — Links multiple state containers so child states automatically inherit and react to parent state changes. ([source](https://jotai.org/docs/third-party/bunja))
- [Lazy Initializers](https://awesome-repositories.com/f/software-engineering-architecture/composite-state-definitions/atomic-state-primitives/lazy-initializers.md) — The state management system defers the computation of an atom's initial value until the first time it is accessed in the store. ([source](https://jotai.org/docs/utilities/lazy))
- [Draft-Based Mutations](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/action-reducer-architectures/action-driven-state-mutations/draft-based-mutations.md) — Updates complex state objects using mutable syntax by applying changes to a draft copy. ([source](https://jotai.org/docs/extensions/immer))
- [Scoped State Containers](https://awesome-repositories.com/f/software-engineering-architecture/state-management/scoped-state-containers.md) — Isolates atom state within specific component subtrees to prevent cross-request data leakage. ([source](https://jotai.org/docs/guides/nextjs))
- [State Change Subscriptions](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/reactive-subscription-systems/state-change-subscriptions.md) — Registers callback functions that execute whenever specific state updates to run side effects. ([source](https://jotai.org/docs/recipes/atom-with-listeners))
- [List Decomposers](https://awesome-repositories.com/f/software-engineering-architecture/composite-state-definitions/atomic-state-primitives/list-decomposers.md) — The state management system splits an atom containing an array into individual atoms for each element to allow components to subscribe to specific list items independently. ([source](https://jotai.org/docs/recipes/large-objects))
- [Parameterized Factories](https://awesome-repositories.com/f/software-engineering-architecture/composite-state-definitions/atomic-state-primitives/parameterized-factories.md) — The state management system generates unique atoms based on input parameters and caches them to ensure consistent state access for specific data identifiers. ([source](https://jotai.org/docs/utilities/family))
- [State Machine Logic](https://awesome-repositories.com/f/software-engineering-architecture/state-machine-logic.md) — Wraps state machine logic into atoms to synchronize complex component transitions with application state. ([source](https://jotai.org/docs/extensions/xstate))

### Web Development

- [State Management](https://awesome-repositories.com/f/web-development/state-management.md) — A flexible system for handling complex data flows and side effects in web applications through composable state primitives. ([source](https://jotai.org/docs/extensions/valtio))
- [State Containers](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/react-ecosystem/react-hooks/state-containers.md) — A framework-agnostic state management solution that integrates with React components to provide granular updates and efficient data synchronization.
- [Component State Management](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/component-state-management.md) — Reads and updates atomic state within components while optimizing re-renders through dependency tracking. ([source](https://jotai.org/))
- [Promise-Based State Resolution](https://awesome-repositories.com/f/web-development/asynchronous-state-managers/promise-based-state-resolution.md) — Integrates promises into the state model to handle remote data fetching as if it were synchronous.
- [Derived State](https://awesome-repositories.com/f/web-development/derived-state.md) — Defines atoms that compute values based on other atoms, automatically tracking dependencies to ensure synchronized state. ([source](https://cdn.jsdelivr.net/gh/pmndrs/jotai@main/README.md))
- [Server-Side Hydration Utilities](https://awesome-repositories.com/f/web-development/server-side-hydration-utilities.md) — Ensuring consistent application state between server-rendered content and client-side interactivity by pre-populating state containers during initial load.
- [Asynchronous Cancellation Patterns](https://awesome-repositories.com/f/web-development/asynchronous-state-management/asynchronous-cancellation-patterns.md) — The state management system supports abortable functions within atom definitions to manage side effects like data fetching with built-in cancellation signals. ([source](https://jotai.org/docs/core/atom))
- [Asynchronous Data Handling](https://awesome-repositories.com/f/web-development/data-fetching-caching/asynchronous-data-handling.md) — Integrates remote API responses into the state model with built-in loading and error handling.
- [Proxy-Based Reactivity](https://awesome-repositories.com/f/web-development/proxy-based-reactivity.md) — Uses proxy-based mutable updates to allow intuitive state modification while maintaining immutability.
- [Server-Side Rendering Utilities](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities.md) — Pre-populates atoms with initial values during server-side rendering to ensure consistency between server and client. ([source](https://jotai.org/docs/guides/nextjs))
- [Loading State Indicators](https://awesome-repositories.com/f/web-development/asynchronous-state-management/loading-state-indicators.md) — The state management system tracks the status of asynchronous operations to render fallback content instead of suspending the user interface during data retrieval. ([source](https://jotai.org/docs/guides/async))
- [State Selectors](https://awesome-repositories.com/f/web-development/derived-state/state-selectors.md) — Creates sub-atoms that track specific portions of larger state objects to optimize updates. ([source](https://jotai.org/docs/utilities/select))
- [Reducer State Management](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/state-logic-patterns/reducer-state-management.md) — Centralizes complex state transition logic by dispatching actions to pure reducer functions. ([source](https://jotai.org/docs/recipes/use-reducer-atom))
- [GraphQL Clients](https://awesome-repositories.com/f/web-development/graphql-clients.md) — Executes GraphQL queries and binds results to reactive state atoms for automatic UI updates. ([source](https://jotai.org/docs/extensions/relay))
- [Cross-Tab Synchronization](https://awesome-repositories.com/f/web-development/state-synchronization/cross-tab-synchronization.md) — Shares application state between browser tabs using the broadcast channel API. ([source](https://jotai.org/docs/recipes/atom-with-broadcast))
- [Asynchronous Data Caching](https://awesome-repositories.com/f/web-development/data-fetching-caching/data-fetching/asynchronous-data-caching.md) — Provides built-in caching for asynchronous operations to prevent redundant network requests. ([source](https://jotai.org/docs/extensions/cache))
- [External Store Synchronization Hooks](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/external-store-synchronization-hooks.md) — Binds external Redux stores to atoms to enable two-way data flow between the store and the component tree. ([source](https://jotai.org/docs/extensions/redux))
- [Vanilla State Interfaces](https://awesome-repositories.com/f/web-development/state-management/vanilla-state-interfaces.md) — Exposes a central store interface for imperative state access outside the component render cycle. ([source](https://jotai.org/docs/guides/migrating-to-v2-api))

### User Interface & Experience

- [State Management Providers](https://awesome-repositories.com/f/user-interface-experience/state-management-providers.md) — Supports provider-based scoping to isolate state containers to specific component subtrees.
- [Scoped Dependency Injection](https://awesome-repositories.com/f/user-interface-experience/state-injection-patterns/scoped-dependency-injection.md) — Creates isolated state instances by injecting specific values into a scope. ([source](https://jotai.org/docs/third-party/bunja))
- [URL State Synchronization](https://awesome-repositories.com/f/user-interface-experience/url-state-synchronization.md) — Creates two-way connections between application state and the browser URL for deep linking and state persistence. ([source](https://jotai.org/docs/extensions/location))

### Development Tools & Productivity

- [State Debugging Utilities](https://awesome-repositories.com/f/development-tools-productivity/debugging-profiling-testing/debugging-diagnostics/debugging-inspection-tools/state-debugging-utilities.md) — The state management system records and replays state transitions using external debugging tools to analyze application behavior and reproduce specific states. ([source](https://jotai.org/docs/guides/debugging))
- [State Debugging Tools](https://awesome-repositories.com/f/development-tools-productivity/state-debugging-tools.md) — Provides debugging utilities for state atoms to improve visibility and data consistency during development. ([source](https://jotai.org/docs/guides/vite))

### Programming Languages & Runtimes

- [State Type Inference](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-safety/state-type-inference.md) — Provides automatic type inference for state definitions to ensure consistency across the application. ([source](https://jotai.org/docs/guides/typescript))

### Testing & Quality Assurance

- [State Hydration Helpers](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/component-testing/state-hydration-helpers.md) — The state management system pre-populates atoms with specific initial values within a test environment to verify component behavior under controlled conditions. ([source](https://jotai.org/docs/guides/testing))
- [Logic Isolation Utilities](https://awesome-repositories.com/f/testing-quality-assurance/general-testing-utilities/test-isolation/logic-isolation-utilities.md) — The state management system executes and validates complex state logic independently of the user interface by rendering hooks directly within a test runner. ([source](https://jotai.org/docs/guides/testing))