0
# Hooks and Utilities
1

2
Modern React hooks and utilities from mobx-react-lite, plus legacy lifecycle management utilities for class components.
3

4
## Capabilities
5

6
### Local Observable Hook
7

8
Hook to create local observable state within functional components.
9

10
```typescript { .api }
11
/**
12
 * Creates local observable state within functional components
13
 * @param initializer - Function that returns the initial observable state
14
 * @returns Observable state object
15
 */
16
function useLocalObservable<T>(initializer: () => T): T;
17
```
18

19
**Usage Example:**
20

21
```typescript
22
import React from "react";
23
import { observer, useLocalObservable } from "mobx-react";
24

25
const Counter = observer(() => {
26
  const store = useLocalObservable(() => ({
27
    count: 0,
28
    increment() {
29
      this.count++;
30
    },
31
    decrement() {
32
      this.count--;
33
    },
34
    get doubled() {
35
      return this.count * 2;
36
    }
37
  }));
38

39
  return (
40
    <div>
41
      <p>Count: {store.count}</p>
42
      <p>Doubled: {store.doubled}</p>
43
      <button onClick={store.increment}>+</button>
44
      <button onClick={store.decrement}>-</button>
45
    </div>
46
  );
47
});
48
```
49

50
### Observable Source Hook
51

52
Hook to convert props to observable source, useful for creating reactive computations based on props.
53

54
```typescript { .api }
55
/**
56
 * Converts props to observable source for reactive computations
57
 * @param source - Object to convert to observable source
58
 * @returns Observable version of the source object
59
 */
60
function useAsObservableSource<T>(source: T): T;
61
```
62

63
**Usage Example:**
64

65
```typescript
66
import React from "react";
67
import { observer, useAsObservableSource, useLocalObservable } from "mobx-react";
68
import { computed } from "mobx";
69

70
const UserProfile = observer(({ userId, userName }) => {
71
  const observableProps = useAsObservableSource({ userId, userName });
72
  
73
  const store = useLocalObservable(() => ({
74
    get displayName() {
75
      return `User: ${observableProps.userName} (ID: ${observableProps.userId})`;  
76
    },
77
    get isValidUser() {
78
      return observableProps.userId > 0 && observableProps.userName.length > 0;
79
    }
80
  }));
81

82
  return (
83
    <div>
84
      <h1>{store.displayName}</h1>
85
      {store.isValidUser ? "Valid user" : "Invalid user"}
86
    </div>
87
  );
88
});
89
```
90

91
### Local Store Hook (Deprecated)
92

93
Hook to create local observable store with computed values and actions.
94

95
```typescript { .api }
96
/**
97
 * @deprecated Use useLocalObservable instead
98
 * Creates local observable store with computed values and actions
99
 * @param initializer - Function that returns the initial store state
100
 * @returns Observable store object
101
 */
102
function useLocalStore<TStore extends Record<string, any>>(initializer: () => TStore): TStore;
103

104
/**
105
 * @deprecated Use useLocalObservable instead
106
 * Creates local observable store with source object dependency
107
 * @param initializer - Function that receives source and returns the initial store state
108
 * @param current - Source object to pass to initializer
109
 * @returns Observable store object
110
 */
111
function useLocalStore<TStore extends Record<string, any>, TSource extends object>(
112
  initializer: (source: TSource) => TStore,
113
  current: TSource
114
): TStore;
115
```
116

117
### Observer Component
118

119
Component wrapper for creating reactive regions without wrapping the entire component.
120

121
```typescript { .api }
122
/**
123
 * Component wrapper for reactive regions
124
 * @param children - Function that returns JSX to be made reactive  
125
 * @returns Reactive JSX element
126
 */
127
function Observer({ children }: { children: () => React.ReactNode }): JSX.Element;
128
```
129

130
**Usage Example:**
131

132
```typescript
133
import React from "react";
134
import { Observer } from "mobx-react";
135

136
function App({ store }) {
137
  return (
138
    <div>
139
      <h1>My App</h1>
140
      <Observer>
141
        {() => <p>Count: {store.count}</p>}
142
      </Observer>
143
      <button onClick={() => store.increment()}>
144
        Increment
145
      </button>
146
    </div>
147
  );
148
}
149
```
150

151
### Static Rendering
152

153
Functions to control server-side rendering behavior.
154

155
```typescript { .api }
156
/**
157
 * Enables or disables static rendering mode for server-side rendering
158
 * @param enable - Whether to enable static rendering
159
 */
160
function enableStaticRendering(enable: boolean): void;
161

162
/**
163
 * Checks if static rendering mode is currently enabled
164
 * @returns True if static rendering is enabled
165
 */
166
function isUsingStaticRendering(): boolean;
167

168
/**
169
 * @deprecated Use enableStaticRendering instead
170
 * Legacy function to control static rendering
171
 * @param enable - Whether to enable static rendering
172
 */
173
function useStaticRendering(enable: boolean): void;
174
```
175

176
**Usage Example:**
177

178
```typescript
179
// In your server-side rendering setup
180
import { enableStaticRendering } from "mobx-react";
181

182
// Enable static rendering for SSR
183
enableStaticRendering(true);
184

185
// In your client-side entry point
186
import { enableStaticRendering } from "mobx-react";
187

188
// Disable static rendering for client-side
189
enableStaticRendering(false);
190
```
191

192
### Observer Batching
193

194
Functions to configure batching behavior for observer updates.
195

196
```typescript { .api }
197
/**
198
 * Configures observer batching behavior
199
 * @param batchFunction - Function to use for batching updates
200
 */
201
function observerBatching(batchFunction: (callback: () => void) => void): void;
202

203
/**
204
 * Checks if observer batching is currently enabled
205
 * @returns True if batching is enabled
206
 */
207
function isObserverBatched(): boolean;
208
```
209

210
**Usage Example:**
211

212
```typescript
213
import { observerBatching } from "mobx-react";
214
import { unstable_batchedUpdates } from "react-dom";
215

216
// Configure custom batching
217
observerBatching(unstable_batchedUpdates);
218
```
219

220
### Dispose on Unmount (Deprecated)
221

222
Decorator and function for automatic disposal of MobX reactions when class components unmount.
223

224
```typescript { .api }
225
/**
226
 * @deprecated Not compatible with React 18 and higher
227
 * Decorator for automatic disposal when component unmounts
228
 * @param target - Component instance
229
 * @param propertyKey - Property key to dispose
230
 */
231
function disposeOnUnmount(target: React.Component<any, any>, propertyKey: PropertyKey): void;
232

233
/**
234
 * @deprecated Not compatible with React 18 and higher  
235
 * Function for automatic disposal when component unmounts
236
 * @param target - Component instance
237
 * @param fn - Disposer function or array of disposer functions
238
 * @returns The disposer function(s)
239
 */
240
function disposeOnUnmount<TF extends Disposer | Array<Disposer>>(
241
  target: React.Component<any, any>,
242
  fn: TF
243
): TF;
244

245
type Disposer = () => void;
246
```
247

248
**Usage Example:**
249

250
```typescript
251
import React from "react";
252
import { observer, disposeOnUnmount } from "mobx-react";
253
import { autorun } from "mobx";
254

255
@observer
256
class TodoList extends React.Component {
257
  @disposeOnUnmount
258
  autorunDisposer = autorun(() => {
259
    console.log(`Todo count: ${this.props.store.todos.length}`);
260
  });
261

262
  componentDidMount() {
263
    // Alternative function syntax
264
    const disposer = autorun(() => {
265
      console.log("Another autorun");
266
    });
267
    disposeOnUnmount(this, disposer);
268
  }
269

270
  render() {
271
    return <div>{/* Component content */}</div>;
272
  }
273
}
274
```
275

276
### External Batching Configuration
277

278
mobx-react provides separate entry point files for configuring batching behavior:
279

280
- `mobx-react/batchingForReactDom` - Configures batching optimized for ReactDOM
281
- `mobx-react/batchingForReactNative` - Configures batching optimized for React Native  
282
- `mobx-react/batchingOptOut` - Disables batching completely
283

284
**Usage Example:**
285

286
```javascript
287
// Configure for ReactDOM (typically at app entry point)
288
import "mobx-react/batchingForReactDom";
289

290
// Or configure for React Native
291
import "mobx-react/batchingForReactNative";
292

293
// Or opt out of batching
294
import "mobx-react/batchingOptOut";
295
```
296

297
## Types
298

299
```typescript { .api }
300
type Disposer = () => void;
301
```