0
# Component Reactivity
1

2
Core observer functionality that makes React components automatically reactive to MobX observable changes, supporting both functional and class-based components.
3

4
## Capabilities
5

6
### Observer Function/Decorator
7

8
Makes React components reactive to MobX observables with automatic tracking and re-rendering.
9

10
```typescript { .api }
11
/**
12
 * Makes React components reactive to MobX observables
13
 * @param component - React component to make reactive
14
 * @param context - Optional decorator context for TypeScript decorators
15
 * @returns Wrapped reactive component
16
 */
17
function observer<T extends IReactComponent>(component: T): T;
18
function observer<T extends IReactComponent>(component: T, context: ClassDecoratorContext): void;
19

20
type IReactComponent<P = any> =
21
  | React.ClassicComponentClass<P>
22
  | React.ComponentClass<P>
23
  | React.FunctionComponent<P>
24
  | React.ForwardRefExoticComponent<P>;
25
```
26

27
**Usage Examples:**
28

29
```typescript
30
import React from "react";
31
import { observer } from "mobx-react";
32
import { observable } from "mobx";
33

34
// Functional component
35
const TodoItem = observer(({ todo }) => (
36
  <div>
37
    <span>{todo.title}</span>
38
    <input
39
      type="checkbox"
40
      checked={todo.completed}
41
      onChange={() => todo.toggle()}
42
    />
43
  </div>
44
));
45

46
// Class component
47
@observer
48
class TodoList extends React.Component {
49
  render() {
50
    const { store } = this.props;
51
    return (
52
      <div>
53
        {store.todos.map(todo => (
54
          <TodoItem key={todo.id} todo={todo} />
55
        ))}
56
      </div>
57
    );
58
  }
59
}
60

61
// Class component without decorator
62
const TodoList = observer(class extends React.Component {
63
  render() {
64
    // Component implementation
65
  }
66
});
67
```
68

69
### Observer Component
70

71
Component wrapper for creating reactive regions without wrapping the entire component.
72

73
```typescript { .api }
74
/**
75
 * Component wrapper for reactive regions
76
 * @param children - Function that returns JSX to be made reactive
77
 * @returns Reactive JSX element
78
 */
79
function Observer({ children }: { children: () => React.ReactNode }): JSX.Element;
80
```
81

82
**Usage Example:**
83

84
```typescript
85
import React from "react";
86
import { Observer } from "mobx-react";
87

88
function App({ store }) {
89
  return (
90
    <div>
91
      <h1>My App</h1>
92
      <Observer>
93
        {() => (
94
          <p>Count: {store.count}</p>
95
        )}
96
      </Observer>
97
      <button onClick={() => store.increment()}>
98
        Increment
99
      </button>
100
    </div>
101
  );
102
}
103
```
104

105
### Use Observer Hook (Deprecated)
106

107
Hook for creating reactive computations within functional components.
108

109
```typescript { .api }
110
/**
111
 * @deprecated Use <Observer>{fn}</Observer> or wrap entire component in observer
112
 * Creates a reactive computation within a functional component
113
 * @param fn - Function to make reactive
114
 * @param baseComponentName - Name for debugging purposes
115
 * @returns Result of the reactive computation
116
 */
117
function useObserver<T>(fn: () => T, baseComponentName?: string): T;
118
```
119

120
**Usage Example:**
121

122
```typescript
123
import React from "react";
124
import { useObserver } from "mobx-react";
125

126
function TodoCount({ store }) {
127
  return useObserver(() => (
128
    <span>Total: {store.todos.length}</span>
129
  ));
130
}
131
```
132

133
## Types
134

135
```typescript { .api }
136
type IReactComponent<P = any> =
137
  | React.ClassicComponentClass<P>
138
  | React.ComponentClass<P>
139
  | React.FunctionComponent<P>
140
  | React.ForwardRefExoticComponent<P>;
141
```