0
# mobx-react
1

2
mobx-react provides React bindings for MobX that enable the creation of fully reactive React components. It offers the `observer` decorator/function that automatically tracks observable dependencies and re-renders components when observable data changes, supporting both functional and class-based components with React.memo automatically applied for functional components.
3

4
## Package Information
5

6
- **Package Name**: mobx-react
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install mobx-react`
10

11
## Core Imports
12

13
```typescript
14
import { observer, Provider, inject } from "mobx-react";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { observer, Provider, inject } = require("mobx-react");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import React from "react";
27
import { observer } from "mobx-react";
28
import { observable, action } from "mobx";
29

30
// Create observable store
31
const counterStore = observable({
32
  count: 0,
33
  increment: action(function() {
34
    this.count++;
35
  })
36
});
37

38
// Create reactive component
39
const Counter = observer(() => {
40
  return (
41
    <div>
42
      <p>Count: {counterStore.count}</p>
43
      <button onClick={counterStore.increment}>Increment</button>
44
    </div>
45
  );
46
});
47
```
48

49
## Architecture
50

51
mobx-react is built around several key components:
52

53
- **Observer Pattern**: The `observer` function/decorator that makes components reactive to MobX observables
54
- **Context Integration**: `Provider`/`inject` pattern for dependency injection (though React.createContext is now preferred)
55
- **Lifecycle Management**: Automatic cleanup and disposal utilities for class components
56
- **Validation System**: PropTypes validators specifically designed for MobX observable data
57
- **Batching System**: Configurable batching behavior for optimal performance
58

59
## Capabilities
60

61
### Component Reactivity
62

63
Core observer functionality that makes React components automatically reactive to MobX observable changes. Works with both function and class components.
64

65
```typescript { .api }
66
function observer<T extends IReactComponent>(component: T): T;
67
function observer<T extends IReactComponent>(component: T, context: ClassDecoratorContext): void;
68

69
type IReactComponent<P = any> =
70
  | React.ClassicComponentClass<P>
71
  | React.ComponentClass<P>
72
  | React.FunctionComponent<P>
73
  | React.ForwardRefExoticComponent<P>;
74
```
75

76
[Component Reactivity](./reactivity.md)
77

78
### Store Management
79

80
Provider/inject pattern for sharing MobX stores across React component trees using React context.
81

82
```typescript { .api }
83
function Provider(props: ProviderProps): JSX.Element;
84

85
interface ProviderProps extends IValueMap {
86
  children: React.ReactNode;
87
}
88

89
const MobXProviderContext: React.Context<IValueMap>;
90

91
function inject(...stores: Array<string>): <T extends IReactComponent<any>>(target: T) => T & (T extends IReactComponent<infer P> ? IWrappedComponent<P> : never);
92
function inject<S, P, I, C>(fn: IStoresToProps<S, P, I, C>): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>;
93
```
94

95
[Store Management](./store-management.md)
96

97
### Validation Utilities
98

99
PropTypes validators specifically designed for MobX observable data types with proper tracking prevention.
100

101
```typescript { .api }
102
const PropTypes: {
103
  observableArray: React.Requireable<any>;
104
  observableArrayOf: (typeChecker: React.Validator<any>) => React.Requireable<any>;
105
  observableMap: React.Requireable<any>;
106
  observableObject: React.Requireable<any>;
107
  arrayOrObservableArray: React.Requireable<any>;
108
  arrayOrObservableArrayOf: (typeChecker: React.Validator<any>) => React.Requireable<any>;
109
  objectOrObservableObject: React.Requireable<any>;
110
};
111
```
112

113
[Validation Utilities](./validation.md)
114

115
### Hooks and Utilities
116

117
Modern React hooks and utilities from mobx-react-lite, plus legacy lifecycle management.
118

119
```typescript { .api }
120
function useLocalObservable<T>(initializer: () => T): T;
121
function useAsObservableSource<T>(source: T): T;
122
function Observer({ children }: { children: () => React.ReactNode }): JSX.Element;
123
function enableStaticRendering(enable: boolean): void;
124
function isUsingStaticRendering(): boolean;
125
function isObserverBatched(): boolean;
126
function observerBatching(batchFunction: (callback: () => void) => void): void;
127
function disposeOnUnmount(target: React.Component<any, any>, propertyKey: PropertyKey): void;
128
function disposeOnUnmount<TF extends Disposer | Array<Disposer>>(target: React.Component<any, any>, fn: TF): TF;
129

130
type Disposer = () => void;
131
```
132

133
[Hooks and Utilities](./hooks-utilities.md)
134

135
## Types
136

137
```typescript { .api }
138
type IValueMap = Record<string, any>;
139

140
type IReactComponent<P = any> =
141
  | React.ClassicComponentClass<P>
142
  | React.ComponentClass<P>
143
  | React.FunctionComponent<P>
144
  | React.ForwardRefExoticComponent<P>;
145

146
interface IWrappedComponent<P> {
147
  wrappedComponent: IReactComponent<P>;
148
}
149

150
interface ProviderProps extends IValueMap {
151
  children: React.ReactNode;
152
}
153

154
type IStoresToProps<
155
  S extends IValueMap = {},
156
  P extends IValueMap = {},
157
  I extends IValueMap = {},
158
  C extends IValueMap = {}
159
> = (stores: S, nextProps: P, context?: C) => I;
160
```