chore[DevTools]: don't use batchedUpdate (#32074)
It is no-op for concurrent mode now and React DevTools is using experimental version of React: https://github.com/facebook/react/blob/886c5ad936428f168e50e077bd37fe9472ff8d3e/packages/react-dom/src/shared/ReactDOM.js#L51-L54 https://github.com/facebook/react/blob/540efebcc34357c98412a96805bfd9244d6aa678/packages/react-reconciler/src/ReactFiberWorkLoop.js#L1646-L1651
Ruslan Lesiutin committed
Jan 15, 2025 at 14:32 UTC
b158439a5bfac90289e63cd51e8064c455bea27c
4 files changed
+39
-56
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
+4
-9
@@ -9,7 +9,6 @@
9
10
import * as React from 'react';
11
import {useContext, useMemo, useRef, useState} from 'react';
12
-import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
12
import {copy} from 'clipboard-js';
13
import {
14
BridgeContext,
@@ -178,10 +177,8 @@ function Row({
177
validAttributes === null ||
178
validAttributes.indexOf(newAttribute) >= 0;
179
181
- batchedUpdates(() => {
182
- setLocalAttribute(newAttribute);
183
- setIsAttributeValid(isValid);
184
- });
180
+ setLocalAttribute(newAttribute);
181
+ setIsAttributeValid(isValid);
182
};
183
184
// $FlowFixMe[missing-local-annot]
@@ -192,10 +189,8 @@ function Row({
189
isValid = true;
190
} catch (error) {}
191
195
- batchedUpdates(() => {
196
- setLocalValue(newValue);
197
- setIsValueValid(isValid);
198
- });
192
+ setLocalValue(newValue);
193
+ setIsValueValid(isValid);
194
};
195
196
const resetAttribute = () => {
packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
+2
-5
@@ -18,7 +18,6 @@ import {
18
useMemo,
19
useState,
20
} from 'react';
21
-import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
21
import {createResource} from 'react-devtools-shared/src/devtools/cache';
22
import {
23
BridgeContext,
@@ -120,10 +119,8 @@ function NativeStyleContextController({children}: Props): React.Node {
119
const request = inProgressRequests.get(element);
120
if (request != null) {
121
inProgressRequests.delete(element);
123
- batchedUpdates(() => {
124
- request.resolveFn(styleAndLayout);
125
- setCurrentStyleAndLayout(styleAndLayout);
126
- });
122
+ request.resolveFn(styleAndLayout);
123
+ setCurrentStyleAndLayout(styleAndLayout);
124
} else {
125
resource.write(element, styleAndLayout);
126
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+27
-33
@@ -11,7 +11,6 @@ import type {ReactContext} from 'shared/ReactTypes';
11
12
import * as React from 'react';
13
import {createContext, useCallback, useContext, useMemo, useState} from 'react';
14
-import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
14
import {useLocalStorage, useSubscription} from '../hooks';
15
import {
16
TreeDispatcherContext,
@@ -166,31 +165,28 @@ function ProfilerContextController({children}: Props): React.Node {
165
);
166
167
if (prevProfilingData !== profilingData) {
169
- batchedUpdates(() => {
170
- setPrevProfilingData(profilingData);
171
-
172
- const dataForRoots =
173
- profilingData !== null ? profilingData.dataForRoots : null;
174
- if (dataForRoots != null) {
175
- const firstRootID = dataForRoots.keys().next().value || null;
176
-
177
- if (rootID === null || !dataForRoots.has(rootID)) {
178
- let selectedElementRootID = null;
179
- if (inspectedElementID !== null) {
180
- selectedElementRootID =
181
- store.getRootIDForElement(inspectedElementID);
182
- }
183
- if (
184
- selectedElementRootID !== null &&
185
- dataForRoots.has(selectedElementRootID)
186
- ) {
187
- setRootIDAndClearFiber(selectedElementRootID);
188
- } else {
189
- setRootIDAndClearFiber(firstRootID);
190
- }
168
+ setPrevProfilingData(profilingData);
169
+
170
+ const dataForRoots =
171
+ profilingData !== null ? profilingData.dataForRoots : null;
172
+ if (dataForRoots != null) {
173
+ const firstRootID = dataForRoots.keys().next().value || null;
174
+
175
+ if (rootID === null || !dataForRoots.has(rootID)) {
176
+ let selectedElementRootID = null;
177
+ if (inspectedElementID !== null) {
178
+ selectedElementRootID = store.getRootIDForElement(inspectedElementID);
179
+ }
180
+ if (
181
+ selectedElementRootID !== null &&
182
+ dataForRoots.has(selectedElementRootID)
183
+ ) {
184
+ setRootIDAndClearFiber(selectedElementRootID);
185
+ } else {
186
+ setRootIDAndClearFiber(firstRootID);
187
}
188
}
193
- });
189
+ }
190
}
191
192
const [isCommitFilterEnabled, setIsCommitFilterEnabled] =
@@ -229,15 +225,13 @@ function ProfilerContextController({children}: Props): React.Node {
225
);
226
227
if (isProfiling) {
232
- batchedUpdates(() => {
233
- if (selectedCommitIndex !== null) {
234
- selectCommitIndex(null);
235
- }
236
- if (selectedFiberID !== null) {
237
- selectFiberID(null);
238
- selectFiberName(null);
239
- }
240
- });
228
+ if (selectedCommitIndex !== null) {
229
+ selectCommitIndex(null);
230
+ }
231
+ if (selectedFiberID !== null) {
232
+ selectFiberID(null);
233
+ selectFiberName(null);
234
+ }
235
}
236
237
const value = useMemo(
packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
+6
-9
@@ -9,7 +9,6 @@
9
10
import * as React from 'react';
11
import {Fragment, useContext, useEffect, useState} from 'react';
12
-import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
12
import {ModalDialogContext} from './ModalDialog';
13
import {StoreContext} from './context';
14
import {UNSUPPORTED_VERSION_URL} from '../constants';
@@ -26,14 +25,12 @@ export default function UnsupportedVersionDialog(_: {}): null {
25
useEffect(() => {
26
if (state === 'dialog-not-shown') {
27
const showDialog = () => {
29
- batchedUpdates(() => {
30
- setState('show-dialog');
31
- dispatch({
32
- canBeDismissed: true,
33
- id: 'UnsupportedVersionDialog',
34
- type: 'SHOW',
35
- content: <DialogContent />,
36
- });
28
+ setState('show-dialog');
29
+ dispatch({
30
+ canBeDismissed: true,
31
+ id: 'UnsupportedVersionDialog',
32
+ type: 'SHOW',
33
+ content: <DialogContent />,
34
});
35
};
36