Fix Profiler root change error (#18880)
Nick Reiley committed
May 13, 2020 at 03:47 UTC
a3fccd2567bfa154a4b2154ef14203999804e39b
1 file changed
+37
-28
packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+37
-28
@@ -22,7 +22,7 @@ import type {ProfilingDataFrontend} from './types';
22
export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
23
24
export type Context = {|
25
- // Which tab is selexted in the Profiler UI?
25
+ // Which tab is selected in the Profiler UI?
26
selectedTabID: TabID,
27
selectTab(id: TabID): void,
28
@@ -129,6 +129,38 @@ function ProfilerContextController({children}: Props) {
129
setPrevProfilingData,
130
] = useState<ProfilingDataFrontend | null>(null);
131
const [rootID, setRootID] = useState<number | null>(null);
132
+ const [selectedFiberID, selectFiberID] = useState<number | null>(null);
133
+ const [selectedFiberName, selectFiberName] = useState<string | null>(null);
134
+
135
+ const selectFiber = useCallback(
136
+ (id: number | null, name: string | null) => {
137
+ selectFiberID(id);
138
+ selectFiberName(name);
139
+
140
+ // Sync selection to the Components tab for convenience.
141
+ if (id !== null) {
142
+ const element = store.getElementByID(id);
143
+
144
+ // Keep in mind that profiling data may be from a previous session.
145
+ // In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name.
146
+ if (element !== null && element.displayName === name) {
147
+ dispatch({
148
+ type: 'SELECT_ELEMENT_BY_ID',
149
+ payload: id,
150
+ });
151
+ }
152
+ }
153
+ },
154
+ [dispatch, selectFiberID, selectFiberName, store],
155
+ );
156
+
157
+ const setRootIDAndClearFiber = useCallback(
158
+ (id: number | null) => {
159
+ selectFiber(null, null);
160
+ setRootID(id);
161
+ },
162
+ [setRootID, selectFiber],
163
+ );
164
165
if (prevProfilingData !== profilingData) {
166
batchedUpdates(() => {
@@ -150,9 +182,9 @@ function ProfilerContextController({children}: Props) {
182
selectedElementRootID !== null &&
183
dataForRoots.has(selectedElementRootID)
184
) {
153
- setRootID(selectedElementRootID);
185
+ setRootIDAndClearFiber(selectedElementRootID);
186
} else {
155
- setRootID(firstRootID);
187
+ setRootIDAndClearFiber(firstRootID);
188
}
189
}
190
}
@@ -180,34 +212,10 @@ function ProfilerContextController({children}: Props) {
212
null,
213
);
214
const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
183
- const [selectedFiberID, selectFiberID] = useState<number | null>(null);
184
- const [selectedFiberName, selectFiberName] = useState<string | null>(null);
215
const [selectedInteractionID, selectInteraction] = useState<number | null>(
216
null,
217
);
218
189
- const selectFiber = useCallback(
190
- (id: number | null, name: string | null) => {
191
- selectFiberID(id);
192
- selectFiberName(name);
193
-
194
- // Sync selection to the Components tab for convenience.
195
- if (id !== null) {
196
- const element = store.getElementByID(id);
197
-
198
- // Keep in mind that profiling data may be from a previous session.
199
- // In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name.
200
- if (element !== null && element.displayName === name) {
201
- dispatch({
202
- type: 'SELECT_ELEMENT_BY_ID',
203
- payload: id,
204
- });
205
- }
206
- }
207
- },
208
- [dispatch, selectFiberID, selectFiberName, store],
209
- );
210
-
219
if (isProfiling) {
220
batchedUpdates(() => {
221
if (selectedCommitIndex !== null) {
@@ -237,7 +245,7 @@ function ProfilerContextController({children}: Props) {
245
supportsProfiling,
246
247
rootID,
240
- setRootID,
248
+ setRootID: setRootIDAndClearFiber,
249
250
isCommitFilterEnabled,
251
setIsCommitFilterEnabled,
@@ -268,6 +276,7 @@ function ProfilerContextController({children}: Props) {
276
277
rootID,
278
setRootID,
279
+ setRootIDAndClearFiber,
280
281
isCommitFilterEnabled,
282
setIsCommitFilterEnabled,