0
# Component Registration & Signatures
1

2
System for tracking components and their Hook usage patterns to enable intelligent refresh decisions. Hook signatures allow React Refresh to determine whether component state can be preserved during updates.
3

4
## Capabilities
5

6
### setSignature
7

8
Sets a Hook signature for a component, capturing its Hook usage pattern to determine refresh behavior.
9

10
```javascript { .api }
11
/**
12
 * Sets Hook signature for component to track Hook usage changes
13
 * @param type - Component type to set signature for
14
 * @param key - Hook signature key representing Hook usage pattern
15
 * @param forceReset - Optional flag to force component reset on changes
16
 * @param getCustomHooks - Optional function returning array of custom Hooks used
17
 * @throws Error if called in production environment
18
 */
19
function setSignature(
20
  type: any,
21
  key: string,
22
  forceReset?: boolean,
23
  getCustomHooks?: () => Array<Function>
24
): void;
25
```
26

27
**Usage Example:**
28

29
```javascript
30
function MyComponent() {
31
  const [count, setCount] = React.useState(0);
32
  const [name, setName] = React.useState('');
33
  const customValue = useCustomHook();
34
  
35
  return <div>{count} - {name}</div>;
36
}
37

38
// Set signature capturing Hook usage
39
ReactRefreshRuntime.setSignature(
40
  MyComponent,
41
  'useState{[count, setCount]}(0)\nuseState{[name, setName]}()',
42
  false,
43
  () => [useCustomHook]
44
);
45
```
46

47
### collectCustomHooksForSignature
48

49
Collects the custom Hook list for a component's signature during first render. This is called lazily to capture Hook dependencies.
50

51
```javascript { .api }
52
/**
53
 * Collects custom Hook list for component signature during first render
54
 * @param type - Component type to collect Hooks for
55
 * @throws Error if called in production environment
56
 */
57
function collectCustomHooksForSignature(type: any): void;
58
```
59

60
**Usage Example:**
61

62
```javascript
63
function MyComponent() {
64
  const value = useCustomHook();
65
  
66
  // This is typically called automatically during first render
67
  ReactRefreshRuntime.collectCustomHooksForSignature(MyComponent);
68
  
69
  return <div>{value}</div>;
70
}
71
```
72

73
### createSignatureFunctionForTransform
74

75
Creates a signature function specifically designed for Babel transform usage. This function handles the two-phase signature process used by the Babel plugin.
76

77
```javascript { .api }
78
/**
79
 * Creates signature function for Babel transform usage
80
 * @returns Function that handles component signature registration
81
 * @throws Error if called in production environment
82
 */
83
function createSignatureFunctionForTransform(): Function;
84
```
85

86
The returned function has this signature:
87

88
```javascript { .api }
89
/**
90
 * Transform signature function (returned by createSignatureFunctionForTransform)
91
 * @param type - Component type (on first call) or undefined (subsequent calls)
92
 * @param key - Hook signature key
93
 * @param forceReset - Whether to force component reset
94
 * @param getCustomHooks - Function returning custom Hooks array
95
 * @returns The original type parameter
96
 */
97
type TransformSignatureFunction = <T>(
98
  type: T,
99
  key: string,
100
  forceReset?: boolean,
101
  getCustomHooks?: () => Array<Function>
102
) => T;
103
```
104

105
**Usage Example (Generated by Babel Plugin):**
106

107
```javascript
108
// This is typically generated by the Babel plugin
109
const _s = ReactRefreshRuntime.createSignatureFunctionForTransform();
110

111
function Hello() {
112
  const [foo, setFoo] = React.useState(0);
113
  const value = useCustomHook();
114
  
115
  // First call during render to collect custom Hooks
116
  _s();
117
  
118
  return <h1>Hi</h1>;
119
}
120

121
// Second call to register signature
122
_s(
123
  Hello,
124
  'useState{[foo, setFoo]}(0)',
125
  false,
126
  () => [useCustomHook]
127
);
128
```
129

130
## Hook Signature Format
131

132
Hook signatures capture the Hook usage pattern of a component:
133

134
### Built-in Hook Signatures
135

136
```javascript
137
// useState with initial value
138
'useState{[count, setCount]}(0)'
139

140
// useEffect with dependencies
141
'useEffect{}([value])'
142

143
// Multiple Hooks
144
'useState{[count, setCount]}(0)\nuseState{[name, setName]}("")'
145
```
146

147
### Custom Hook Signatures
148

149
Custom Hooks are tracked separately and can be nested:
150

151
```javascript
152
function useCustomHook() {
153
  const [state, setState] = React.useState(0);
154
  return state;
155
}
156

157
// Custom Hook signature includes its own Hook usage
158
'useCustomHook{useState{[state, setState]}(0)}'
159
```
160

161
## Signature Comparison
162

163
React Refresh compares signatures to determine refresh behavior:
164

165
- **Identical signatures**: State is preserved (fast refresh)
166
- **Different signatures**: Component is remounted (full refresh)
167
- **Force reset flag**: Component is always remounted
168

169
## Types
170

171
```javascript { .api }
172
interface Signature {
173
  /** Component's own Hook signature key */
174
  ownKey: string;
175
  /** Whether to force component reset on any change */
176
  forceReset: boolean;
177
  /** Full signature including nested custom Hooks (computed lazily) */
178
  fullKey: string | null;
179
  /** Function returning array of custom Hooks used by component */
180
  getCustomHooks: () => Array<Function>;
181
}
182
```