# mobxjs/mobx-react

**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/mobxjs-mobx-react).**

4,823 stars · 344 forks · TypeScript · MIT · archived

## Links

- GitHub: https://github.com/mobxjs/mobx-react
- Homepage: https://mobx.js.org/react-integration.html
- awesome-repositories: https://awesome-repositories.com/repository/mobxjs-mobx-react.md

## Topics

`javascript` `mobx` `react` `react-components` `reactive-programming`

## Description

mobx-react is a library that provides state bindings to connect React components to MobX observable state. It functions as a component state synchronizer, ensuring that user interface elements automatically re-render only when the specific observed data they consume changes.

The project enables a decoupled state architecture by moving business logic and domain state into standalone stores, separating data management from the React component tree. It facilitates global state distribution across deep component hierarchies using providers and context to avoid manual prop drilling.

The library covers a broad range of state management primitives, including observable collections, action-based updates, and computed state derivation. It provides UI integration helpers for both class and functional components, along with performance optimizations for component re-render precision and memory leak prevention during server-side rendering.

The project is implemented in TypeScript.

## Tags

### Software Engineering & Architecture

- [Observable State Management](https://awesome-repositories.com/f/software-engineering-architecture/observable-state-management.md) — Provides a system using observable variables to automatically trigger updates in dependent React components. ([source](https://mobx.js.org/enabling-decorators.html))
- [State Update Actions](https://awesome-repositories.com/f/software-engineering-architecture/action-based-state-transitions/state-update-actions.md) — Encapsulates state changes within designated actions to ensure optimal performance and structured code. ([source](https://mobx.js.org/the-gist-of-mobx.html))
- [Property Change Observers](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/change-detection/property-change-observers.md) — Tracks changes to object properties or class members to trigger dependent reactions automatically. ([source](https://mobx.js.org/observable-state.html))
- [Reactive Data Stores](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/reactive-subscription-systems/reactive-data-stores.md) — Provides reactive containers that track state transitions and allow components to subscribe to data updates.
- [UI State Change Tracking](https://awesome-repositories.com/f/software-engineering-architecture/component-change-tracking/ui-state-change-tracking.md) — Implements a mechanism to detect modifications to observable data fields and trigger targeted UI updates. ([source](https://mobx.js.org/api.html))
- [Computed State Caching](https://awesome-repositories.com/f/software-engineering-architecture/computed-state-caching.md) — Creates derived values that automatically update and cache results to minimize redundant calculations and UI updates.
- [Reactive Computed Values](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-value-computations/reactive-computed-values.md) — Creates reactive getters that automatically recompute when their observed dependencies change. ([source](https://mobx.js.org/the-gist-of-mobx.html))
- [Logic-Rendering Decouplers](https://awesome-repositories.com/f/software-engineering-architecture/headless-logic-decoupling/logic-rendering-decouplers.md) — Separates business logic and domain state into standalone stores, decoupling data management from the React component tree.
- [Memoized Computations](https://awesome-repositories.com/f/software-engineering-architecture/memoized-computations.md) — Implements memoized computations to cache derived state and avoid redundant calculations when dependencies are unchanged.
- [Proxy-Based State Interception](https://awesome-repositories.com/f/software-engineering-architecture/proxy-based-state-interception.md) — Uses JavaScript Proxies to detect and respond to object property mutations in real time.
- [Reactivity Dependency Graphs](https://awesome-repositories.com/f/software-engineering-architecture/reactivity-dependency-graphs.md) — Maintains a reactivity dependency graph to ensure only the necessary computations and components update when data changes.
- [State Change Observers](https://awesome-repositories.com/f/software-engineering-architecture/state-change-observers.md) — Transforms standard objects, arrays, Maps, and Sets into observable structures for UI synchronization. ([source](https://mobx.js.org/api.html))
- [Global State Stores](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-utilities/prop-driven-state-synchronization/global-state-stores.md) — Shares complex state across deep component hierarchies using centralized stores to avoid manual prop drilling.
- [Custom Observable Definitions](https://awesome-repositories.com/f/software-engineering-architecture/custom-observable-definitions.md) — Enables the definition of custom reactive data structures that signal observations and changes to trigger updates. ([source](https://mobx.js.org/custom-observables.html))
- [Function Result Memoization](https://awesome-repositories.com/f/software-engineering-architecture/function-result-memoization.md) — Caches function outputs for every combination of input arguments and automatically cleans up unused entries. ([source](https://mobx.js.org/computeds-with-args.html))
- [Stateful UI Component Wrappers](https://awesome-repositories.com/f/software-engineering-architecture/higher-order-function-wrapping/stateful-ui-component-wrappers.md) — Provides higher-order component wrappers that link UI elements to observable state for precise re-renders. ([source](https://mobx.js.org/the-gist-of-mobx.html))
- [Imperative Reactive Triggers](https://awesome-repositories.com/f/software-engineering-architecture/imperative-reactive-triggers.md) — Automatically executes imperative code, such as network requests or logs, in response to state changes. ([source](https://mobx.js.org/the-gist-of-mobx.html))
- [Component Lifecycle Leak Prevention](https://awesome-repositories.com/f/software-engineering-architecture/memory-usage-analysis/memory-leak-prevention/component-lifecycle-leak-prevention.md) — Disables reactivity for components rendered on the server to ensure they do not track data changes after initial render. ([source](https://cdn.jsdelivr.net/gh/mobxjs/mobx-react@master/README.md))
- [Object Mutation Observers](https://awesome-repositories.com/f/software-engineering-architecture/object-mutation-observers.md) — Triggers callbacks immediately whenever a specific property or object is mutated to track state history. ([source](https://mobx.js.org/intercept-and-observe.html))
- [Lifecycle-Linked Disposals](https://awesome-repositories.com/f/software-engineering-architecture/observer-patterns/disposable-observers/lifecycle-linked-disposals.md) — Automatically executes cleanup functions for active observations when components unmount to prevent memory leaks.
- [Reactive Observation Disposal](https://awesome-repositories.com/f/software-engineering-architecture/reactive-observation-disposal.md) — Executes disposer functions for reactions or automatic runs when a component is removed from the DOM. ([source](https://cdn.jsdelivr.net/gh/mobxjs/mobx-react@master/README.md))
- [Reactivity Dependency Visualization](https://awesome-repositories.com/f/software-engineering-architecture/reactivity-dependency-visualization.md) — Visualizes the relationship between observables and the reactions or computations that depend on them. ([source](https://mobx.js.org/analyzing-reactivity.html))
- [Reactivity Trigger Tracing](https://awesome-repositories.com/f/software-engineering-architecture/reactivity-trigger-tracing.md) — Identifies why a component or computed value is re-evaluating by printing the specific triggering mutations. ([source](https://mobx.js.org/analyzing-reactivity.html))
- [Root Store Coordination](https://awesome-repositories.com/f/software-engineering-architecture/root-store-coordination.md) — Groups related stores under a single root instance to simplify dependency management and share references. ([source](https://mobx.js.org/defining-data-stores.html))
- [State Mutation Monitoring](https://awesome-repositories.com/f/software-engineering-architecture/state-mutation-monitoring.md) — Registers a global listener that intercepts all observable mutations and actions for debugging. ([source](https://mobx.js.org/analyzing-reactivity.html))
- [Asynchronous State Transition Frameworks](https://awesome-repositories.com/f/software-engineering-architecture/state-transition-models/state-transition-execution/asynchronous-state-transition-frameworks.md) — Manages state changes through actions and uses generators to coordinate asynchronous flows. ([source](https://mobx.js.org/api.html))
- [State Update Batching](https://awesome-repositories.com/f/software-engineering-architecture/state-update-batching.md) — Groups multiple state changes into a single transaction to prevent intermediate values from triggering reactions. ([source](https://mobx.js.org/actions.html))
- [Transaction Batching](https://awesome-repositories.com/f/software-engineering-architecture/transaction-batching.md) — Groups multiple state mutations into a single transaction to prevent redundant component re-renders.

### Web Development

- [Observable State Tracking](https://awesome-repositories.com/f/web-development/proxy-based-state-handlers/observable-state-tracking.md) — Detects data access and modification using proxies or getters to enable automatic reactivity. ([source](https://mobx.js.org/the-gist-of-mobx.html))
- [React State Bindings](https://awesome-repositories.com/f/web-development/react-state-bindings.md) — Connects external MobX observable state management containers to React UI components for automatic re-renders.
- [Reactive State Management](https://awesome-repositories.com/f/web-development/reactive-state-management.md) — Managing application state using MobX to automatically trigger React component re-renders when observable data changes.
- [Computed State](https://awesome-repositories.com/f/web-development/computed-state.md) — Derives read-only state from other reactive signals with automatic caching. ([source](https://mobx.js.org/api.html))
- [Derived State](https://awesome-repositories.com/f/web-development/derived-state.md) — Computes values from other observables and caches results to minimize redundant updates. ([source](https://mobx.js.org/computeds.html))
- [Domain-UI State Decoupling](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/component-state-management/dom-driven-state-management/ui-state-synchronization/domain-ui-state-decoupling.md) — Separates business logic and domain state into standalone stores to decouple data management from the React component tree. ([source](https://mobx.js.org/defining-data-stores.html))
- [MobX Implementations](https://awesome-repositories.com/f/web-development/observable-state-patterns/mobx-implementations.md) — Implements a reactive state management pattern using observable state and automatic reactions. ([source](https://mobx.js.org/mobx-utils.html))
- [Component Update Optimizations](https://awesome-repositories.com/f/web-development/performance-optimizations/component-update-optimizations.md) — Tracks observable data usage at the component level to trigger precise, independent updates for specific UI elements. ([source](https://mobx.js.org/react-optimizations.html))
- [Data-UI Synchronization](https://awesome-repositories.com/f/web-development/state-update-handlers/state-synchronization-handlers/ui-state-synchronization/data-ui-synchronization.md) — Automatically synchronizes components by tracking observable data accessed during the render phase. ([source](https://mobx.js.org/))
- [Reactive State Synchronization](https://awesome-repositories.com/f/web-development/state-update-handlers/state-synchronization-handlers/ui-state-synchronization/reactive-state-synchronization.md) — Synchronizes data across a component tree using observable models that notify listeners of updates.
- [Observation-Based Rendering](https://awesome-repositories.com/f/web-development/web-components/component-based-rendering-engines/observation-based-rendering.md) — Employs an observation-based rendering system that updates the view automatically when underlying properties change. ([source](https://mobx.js.org/about-this-documentation.html))
- [Asynchronous State Management](https://awesome-repositories.com/f/web-development/asynchronous-state-management.md) — Provides mechanisms to update observable state across asynchronous boundaries using wrappers or generators. ([source](https://mobx.js.org/actions.html))
- [Component Local States](https://awesome-repositories.com/f/web-development/component-local-states.md) — Creates and maintains ephemeral observable state within individual UI components using hooks. ([source](https://mobx.js.org/react-integration.html))
- [Reactive Side Effects](https://awesome-repositories.com/f/web-development/reactive-state-management/reactive-side-effects.md) — Executes side-effect functions that run immediately and re-run whenever their tracked state dependencies change. ([source](https://mobx.js.org/api.html))
- [State Initialization](https://awesome-repositories.com/f/web-development/state-initialization.md) — Initializes reactive stores within components to manage complex local state and computed properties. ([source](https://cdn.jsdelivr.net/gh/mobxjs/mobx-react@master/README.md))

### User Interface & Experience

- [Reactive Collection Observers](https://awesome-repositories.com/f/user-interface-experience/dom-mutation-observers/reactive-collection-observers.md) — Provides a reactive API to update, remove, and retrieve items from observed collections. ([source](https://mobx.js.org/collection-utilities.html))
- [Observable Collection Factories](https://awesome-repositories.com/f/user-interface-experience/dom-mutation-observers/reactive-collection-observers/observable-collection-factories.md) — Converts arrays, Maps, and Sets into observable versions that track additions, removals, and updates. ([source](https://mobx.js.org/observable-state.html))
- [State-Driven UI Rendering](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers/event-driven-state-synchronizers/ui-state-recomposition/state-driven-ui-rendering.md) — Implements state-driven UI rendering that triggers updates only when specific observed state dependencies change. ([source](https://mobxjs.github.io/mobx))
- [Reactive Rendering Engines](https://awesome-repositories.com/f/user-interface-experience/signal-based-reactivity/reactive-rendering-engines.md) — Features a reactive rendering engine that tracks state dependencies to trigger efficient component re-renders. ([source](https://cdn.jsdelivr.net/gh/mobxjs/mobx-react@master/README.md))
- [Store Context Injections](https://awesome-repositories.com/f/user-interface-experience/component-props-management/store-context-injections.md) — Provides mechanisms to distribute data store instances through the component tree using providers to avoid prop drilling. ([source](https://cdn.jsdelivr.net/gh/mobxjs/mobx-react@master/README.md))
- [Reactive Wrappers](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/composition-rendering-patterns/component-patterns/class-components/reactive-wrappers.md) — Provides a wrapper for class components to ensure they automatically re-render when observed state changes. ([source](https://mobx.js.org/enabling-decorators.html))
- [Higher-Order Components](https://awesome-repositories.com/f/user-interface-experience/functional-components/higher-order-components.md) — Provides higher-order components to wrap React components and connect them to the external reactivity engine.
- [Global State Managers](https://awesome-repositories.com/f/user-interface-experience/global-state-managers.md) — Maintains global interface settings and session information shared across the UI component tree. ([source](https://mobx.js.org/defining-data-stores.html))
- [Store Specializations](https://awesome-repositories.com/f/user-interface-experience/store-extensions/store-specializations.md) — Enables the specialization of base store behavior by overriding actions and computed properties in subclasses. ([source](https://mobx.js.org/subclassing.html))

### Programming Languages & Runtimes

- [Observable Types](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-definitions/observable-types.md) — Implements standardized observable types and reporting methods to notify the system of data observations. ([source](https://mobx.js.org/api.html))