0
# MobX React Lite
1

2
MobX React Lite provides lightweight React bindings for MobX state management, specifically designed for React 16.8+ functional components using Hooks. It offers a smaller and faster alternative to mobx-react by focusing exclusively on functional components and modern React patterns.
3

4
## Package Information
5

6
- **Package Name**: mobx-react-lite
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install mobx-react-lite`
10
- **Peer Dependencies**: `mobx ^6.1.0`, `react ^16.8.0 || ^17 || ^18`
11

12
## Core Imports
13

14
```typescript
15
import { observer, Observer, useLocalObservable } from "mobx-react-lite";
16
```
17

18
For CommonJS:
19

20
```javascript
21
const { observer, Observer, useLocalObservable } = require("mobx-react-lite");
22
```
23

24
## Basic Usage
25

26
```typescript
27
import { observer, Observer, useLocalObservable } from "mobx-react-lite";
28
import { observable } from "mobx";
29
import { useState } from "react";
30

31
// Create an observable component
32
const Counter = observer(() => {
33
  const store = useLocalObservable(() => ({
34
    count: 0,
35
    increment() {
36
      this.count++;
37
    }
38
  }));
39

40
  return (
41
    <div>
42
      <p>Count: {store.count}</p>
43
      <button onClick={store.increment}>Increment</button>
44
    </div>
45
  );
46
});
47

48
// Use the Observer component for specific regions
49
const App = () => {
50
  const [state] = useState(() => observable({ count: 0 }));
51
  
52
  return (
53
    <div>
54
      <Observer>
55
        {() => <div>Reactive count: {state.count}</div>}
56
      </Observer>
57
      <button onClick={() => state.count++}>Update</button>
58
    </div>
59
  );
60
};
61
```
62

63
## Architecture
64

65
MobX React Lite is built around several key components:
66

67
- **Observer HOC**: The `observer` function wraps functional components to make them reactive to MobX observables
68
- **Observer Component**: The `<Observer>` component enables reactive regions within non-reactive components
69
- **Local Observable State**: Hooks like `useLocalObservable` create component-local observable state
70
- **Static Rendering Support**: SSR-friendly APIs for server-side rendering environments
71
- **Automatic Batching**: Integration with React's batching mechanisms for optimal performance
72

73
## Capabilities
74

75
### Component Observers
76

77
Core functionality for making React components reactive to MobX observable changes. The observer pattern automatically tracks observable access and triggers re-renders when dependencies change.
78

79
```typescript { .api }
80
function observer<P extends object>(
81
  baseComponent: React.FunctionComponent<P>
82
): React.FunctionComponent<P>;
83

84
interface IObserverOptions {
85
  readonly forwardRef?: boolean;
86
}
87
```
88

89
[Component Observers](./observers.md)
90

91
### Local Observable State
92

93
Hooks for creating and managing observable state within React components. Provides component-local observable state that integrates seamlessly with the component lifecycle.
94

95
```typescript { .api }
96
function useLocalObservable<TStore extends Record<string, any>>(
97
  initializer: () => TStore,
98
  annotations?: AnnotationsMap<TStore, never>
99
): TStore;
100
```
101

102
[Local Observable State](./local-state.md)
103

104
### Static Rendering Support
105

106
Server-side rendering utilities that control reactive behavior in SSR environments. These APIs ensure components render correctly on the server without memory leaks.
107

108
```typescript { .api }
109
function enableStaticRendering(enable: boolean): void;
110
function isUsingStaticRendering(): boolean;
111
```
112

113
[Static Rendering](./static-rendering.md)
114

115
### Advanced Features
116

117
Advanced configuration and utilities including observer batching, memory management, and deprecated APIs for migration purposes.
118

119
```typescript { .api }
120
function observerBatching(reactionScheduler: any): void;
121
function clearTimers(): void;
122
```
123

124
[Advanced Features](./advanced.md)
125

126
## Types
127

128
```typescript { .api }
129
// Observer component props
130
interface IObserverProps {
131
  children?(): React.ReactElement | null;
132
  render?(): React.ReactElement | null;
133
}
134

135
// Observer options for function overloads
136
interface IObserverOptions {
137
  readonly forwardRef?: boolean;
138
}
139

140
// MobX annotations from mobx package
141
type Annotation = {
142
  annotationType_: string;
143
  make_(adm: any, key: PropertyKey, descriptor: PropertyDescriptor, source: object): any;
144
  extend_(adm: any, key: PropertyKey, descriptor: PropertyDescriptor, proxyTrap: boolean): boolean | null;
145
  options_?: any;
146
};
147

148
type AnnotationMapEntry = Annotation | true | false;
149

150
type AnnotationsMap<T, AdditionalKeys extends PropertyKey> = {
151
  [K in keyof T | AdditionalKeys]?: AnnotationMapEntry;
152
};
153
```