0
# Backend Integration
1

2
Functions for connecting React applications to the DevTools backend, enabling component inspection, state debugging, and profiling capabilities.
3

4
## Capabilities
5

6
### Connect to DevTools
7

8
Connects a React application to the DevTools backend server.
9

10
```javascript { .api }
11
/**
12
 * Connects a React application to the DevTools backend
13
 * @param options - Connection configuration options
14
 */
15
function connectToDevTools(options?: ConnectOptions): void;
16

17
interface ConnectOptions {
18
  /** DevTools server host (default: 'localhost') */
19
  host?: string;
20
  /** Valid style attributes for React Native style editor */
21
  nativeStyleEditorValidAttributes?: string[];
22
  /** DevTools server port (default: 8097) */
23
  port?: number;
24
  /** Use HTTPS for connection (default: false) */
25
  useHttps?: boolean;
26
  /** Function to resolve React Native styles */
27
  resolveRNStyle?: (style: any) => any;
28
  /** Delay between connection retry attempts in ms (default: 2000) */
29
  retryConnectionDelay?: number;
30
  /** Function to check if app is active (default: () => true) */
31
  isAppActive?: () => boolean;
32
  /** Existing WebSocket connection to reuse (nullable) */
33
  websocket?: WebSocket | null;
34
  /** Callback for DevTools settings updates */
35
  onSettingsUpdated?: (settings: DevToolsHookSettings) => void;
36
  /** Whether reload and profile features are supported */
37
  isReloadAndProfileSupported?: boolean;
38
  /** Whether profiling is currently active */
39
  isProfiling?: boolean;
40
  /** Callback for reload and profile action */
41
  onReloadAndProfile?: (recordChangeDescriptions: boolean) => void;
42
  /** Callback for resetting reload and profile flags */
43
  onReloadAndProfileFlagsReset?: () => void;
44
}
45
```
46

47
**Usage Examples:**
48

49
```javascript
50
import { connectToDevTools } from "react-devtools-core/backend";
51

52
// Basic connection to default localhost:8097
53
connectToDevTools();
54

55
// Custom server configuration
56
connectToDevTools({
57
  host: "192.168.1.100",
58
  port: 9090,
59
  useHttps: true
60
});
61

62
// React Native integration with style editor
63
connectToDevTools({
64
  nativeStyleEditorValidAttributes: [
65
    "alignItems", "backgroundColor", "borderColor", "borderRadius",
66
    "borderWidth", "color", "flex", "fontSize", "height", "margin",
67
    "padding", "textAlign", "width"
68
  ],
69
  resolveRNStyle: (style) => {
70
    // Custom style resolution logic
71
    return processReactNativeStyle(style);
72
  }
73
});
74

75
// Advanced configuration with callbacks
76
connectToDevTools({
77
  retryConnectionDelay: 5000,
78
  isAppActive: () => document.hasFocus(),
79
  onSettingsUpdated: (settings) => {
80
    console.log("DevTools settings updated:", settings);
81
  },
82
  onReloadAndProfile: (recordChanges) => {
83
    console.log("Reloading with profiling:", recordChanges);
84
    // Implement app reload logic
85
  }
86
});
87
```
88

89
### Initialize DevTools Hook
90

91
Initializes the DevTools hook in the target application before React loads.
92

93
```javascript { .api }
94
/**
95
 * Initializes the DevTools hook in the target application
96
 * @param settings - DevTools hook settings or promise resolving to settings
97
 * @param shouldStartProfilingNow - Whether to start profiling immediately
98
 * @param profilingSettings - Profiling configuration options
99
 */
100
function initialize(
101
  settings?: DevToolsHookSettings | Promise<DevToolsHookSettings>,
102
  shouldStartProfilingNow?: boolean,
103
  profilingSettings?: ProfilingSettings
104
): void;
105

106
interface DevToolsHookSettings {
107
  /** Enable console patching for component logging */
108
  appendComponentStack?: boolean;
109
  /** Show inline warnings and errors in DevTools */
110
  breakOnConsoleErrors?: boolean;
111
  /** Hide console logs in strict mode */
112
  hideConsoleLogsInStrictMode?: boolean;
113
  /** Component filters for hiding/showing components */
114
  componentFilters?: ComponentFilter[];
115
}
116

117
interface ProfilingSettings {
118
  /** Record component change descriptions */
119
  recordChangeDescriptions?: boolean;
120
}
121

122
interface ComponentFilter {
123
  type: number;
124
  value: string;
125
  isEnabled: boolean;
126
}
127
```
128

129
**Usage Examples:**
130

131
```javascript
132
import { initialize } from "react-devtools-core/backend";
133

134
// Basic initialization
135
initialize();
136

137
// Initialize with immediate profiling
138
initialize(null, true);
139

140
// Custom settings
141
initialize({
142
  appendComponentStack: true,
143
  breakOnConsoleErrors: false,
144
  hideConsoleLogsInStrictMode: true,
145
  componentFilters: [
146
    { type: 1, value: "MyComponent", isEnabled: true }
147
  ]
148
});
149

150
// Async settings loading
151
initialize(
152
  fetch("/api/devtools-settings").then(res => res.json()),
153
  false,
154
  { recordChangeDescriptions: true }
155
);
156
```
157

158
## Integration Patterns
159

160
### React DOM Integration
161

162
For web applications, initialize DevTools before React:
163

164
```javascript
165
import { initialize, connectToDevTools } from "react-devtools-core/backend";
166
import React from "react";
167
import ReactDOM from "react-dom";
168

169
// Initialize DevTools hook first
170
initialize();
171

172
// Connect to DevTools server
173
connectToDevTools();
174

175
// Then render your React app
176
ReactDOM.render(<App />, document.getElementById("root"));
177
```
178

179
### React Native Integration
180

181
React Native apps typically use automatic connection:
182

183
```javascript
184
// In your index.js or App.js
185
import { connectToDevTools } from "react-devtools-core/backend";
186

187
// Connect with React Native specific options
188
connectToDevTools({
189
  nativeStyleEditorValidAttributes: [
190
    "alignItems", "backgroundColor", "borderColor",
191
    "borderRadius", "borderWidth", "color", "flex",
192
    "flexDirection", "fontSize", "height", "justifyContent",
193
    "margin", "padding", "position", "textAlign", "width"
194
  ],
195
  resolveRNStyle: (style) => {
196
    // Resolve React Native styles for editor
197
    return style;
198
  }
199
});
200
```
201

202
### Webpack Integration
203

204
Add DevTools as an entry point in development:
205

206
```javascript
207
// webpack.config.js
208
module.exports = {
209
  entry: {
210
    app: [
211
      // Add DevTools backend first in development
212
      ...(process.env.NODE_ENV === "development" ? ["react-devtools-core/backend"] : []),
213
      "./src/index.js"
214
    ]
215
  }
216
};
217
```
218

219
### Custom WebSocket Integration
220

221
For custom server setups:
222

223
```javascript
224
import { connectToDevTools } from "react-devtools-core/backend";
225

226
// Custom WebSocket connection
227
const ws = new WebSocket("ws://custom-server:8080");
228

229
connectToDevTools({
230
  websocket: ws,
231
  retryConnectionDelay: 1000
232
});
233
```
234

235
## Error Handling
236

237
### Connection Failures
238

239
The backend automatically handles connection failures:
240

241
- **Automatic Retry**: Retries connection after `retryConnectionDelay` milliseconds
242
- **App Activity Check**: Only attempts connection when `isAppActive()` returns true
243
- **Graceful Degradation**: React app continues to work without DevTools connection
244

245
### Common Issues
246

247
**DevTools Not Connecting:**
248
1. Ensure DevTools server is running: `react-devtools`
249
2. Check port and host configuration
250
3. Verify firewall settings
251
4. For React Native: `adb reverse tcp:8097 tcp:8097`
252

253
**Performance Impact:**
254
- Backend integration has minimal performance impact in production
255
- Connection attempts only occur in development builds
256
- Hook initialization is lightweight and safe for production