[bug fix] revert values in ReactFiberFlags to keep consistency for devtools (#25832)
## Summary We see recent bug reports like #25755 and #25769 for devtools. Whenever a component uses hook `useEffect`, it triggers an error. This was introduced in #25663 when we try to keep the `ReactFiberFlags` numbers consistent with reconciler, in order to fix an issue with server components. However, the values of `ReactFiberFlags` in reconciler were actually changed a while ago in https://github.com/facebook/react/commit/b4204ede66284e7153ffb11fd434cd9b9a64a56f We made this mistake because, although it's not mentioned in the comment, `DidCapture` and `Hydrating` are actually used by DevTools This caused - the latest (not stable) react version is broken on devtools before 4.27.0 (but only in uncommon cases such server components) - all earlier react versions are broken on latest devtools (4.27.0) To keep most versions work, we need to revert the commit that changed the `ReactFiberFlags` values ## How did you test this change? 1. add a `useEffect` in a component in the TodoList of the shell, trigger the error in devtools 2. after change, the error is gone
Mengdi Chen committed
Dec 6, 2022 at 17:25 UTC
d69b2cf8208848b0f71b5214ddff55a1ff437cc8
2 files changed
+38
-32
packages/react-devtools-shared/src/backend/ReactFiberFlags.js
+5
-5
@@ -10,8 +10,8 @@
10
// This list of flags must be synced with the following file:
11
// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
12
13
-export const NoFlags = /* */ 0b00000000000000000000000000;
14
-export const PerformedWork = /* */ 0b00000000000000000000000001;
15
-export const Placement = /* */ 0b00000000000000000000000010;
16
-export const DidCapture = /* */ 0b00000000000000000001000000;
17
-export const Hydrating = /* */ 0b00000000000000100000000000;
13
+export const NoFlags = /* */ 0b000000000000000000000000000;
14
+export const PerformedWork = /* */ 0b000000000000000000000000001;
15
+export const Placement = /* */ 0b000000000000000000000000010;
16
+export const DidCapture = /* */ 0b000000000000000000010000000;
17
+export const Hydrating = /* */ 0b000000000000001000000000000;
packages/react-reconciler/src/ReactFiberFlags.js
+33
-27
@@ -12,23 +12,29 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
12
export type Flags = number;
13
14
// Don't change these values. They're used by React Dev Tools.
15
-export const NoFlags = /* */ 0b00000000000000000000000000;
16
-export const PerformedWork = /* */ 0b00000000000000000000000001;
17
-export const Placement = /* */ 0b00000000000000000000000010;
18
-export const DidCapture = /* */ 0b00000000000000000001000000;
19
-export const Hydrating = /* */ 0b00000000000000100000000000;
15
+export const NoFlags = /* */ 0b000000000000000000000000000;
16
+export const PerformedWork = /* */ 0b000000000000000000000000001;
17
+export const Placement = /* */ 0b000000000000000000000000010;
18
+export const DidCapture = /* */ 0b000000000000000000010000000;
19
+export const Hydrating = /* */ 0b000000000000001000000000000;
20
21
// You can change the rest (and add more).
22
-export const Update = /* */ 0b00000000000000000000000100;
23
-export const ChildDeletion = /* */ 0b00000000000000000000001000;
24
-export const ContentReset = /* */ 0b00000000000000000000010000;
25
-export const Callback = /* */ 0b00000000000000000000100000;
26
-export const ForceClientRender = /* */ 0b00000000000000000010000000;
27
-export const Ref = /* */ 0b00000000000000000100000000;
28
-export const Snapshot = /* */ 0b00000000000000001000000000;
29
-export const Passive = /* */ 0b00000000000000010000000000;
30
-export const Visibility = /* */ 0b00000000000001000000000000;
31
-export const StoreConsistency = /* */ 0b00000000000010000000000000;
22
+export const Update = /* */ 0b000000000000000000000000100;
23
+/* Skipped value: 0b000000000000000000000001000; */
24
+
25
+export const ChildDeletion = /* */ 0b000000000000000000000010000;
26
+export const ContentReset = /* */ 0b000000000000000000000100000;
27
+export const Callback = /* */ 0b000000000000000000001000000;
28
+/* Used by DidCapture: 0b000000000000000000010000000; */
29
+
30
+export const ForceClientRender = /* */ 0b000000000000000000100000000;
31
+export const Ref = /* */ 0b000000000000000001000000000;
32
+export const Snapshot = /* */ 0b000000000000000010000000000;
33
+export const Passive = /* */ 0b000000000000000100000000000;
34
+/* Used by Hydrating: 0b000000000000001000000000000; */
35
+
36
+export const Visibility = /* */ 0b000000000000010000000000000;
37
+export const StoreConsistency = /* */ 0b000000000000100000000000000;
38
39
export const LifecycleEffectMask =
40
Passive | Update | Callback | Ref | Snapshot | StoreConsistency;
@@ -37,26 +43,26 @@ export const LifecycleEffectMask =
43
export const HostEffectMask = /* */ 0b00000000000011111111111111;
44
45
// These are not really side effects, but we still reuse this field.
40
-export const Incomplete = /* */ 0b00000000000100000000000000;
41
-export const ShouldCapture = /* */ 0b00000000001000000000000000;
42
-export const ForceUpdateForLegacySuspense = /* */ 0b00000000010000000000000000;
43
-export const DidPropagateContext = /* */ 0b00000000100000000000000000;
44
-export const NeedsPropagation = /* */ 0b00000001000000000000000000;
45
-export const Forked = /* */ 0b00000010000000000000000000;
46
+export const Incomplete = /* */ 0b000000000001000000000000000;
47
+export const ShouldCapture = /* */ 0b000000000010000000000000000;
48
+export const ForceUpdateForLegacySuspense = /* */ 0b000000000100000000000000000;
49
+export const DidPropagateContext = /* */ 0b000000001000000000000000000;
50
+export const NeedsPropagation = /* */ 0b000000010000000000000000000;
51
+export const Forked = /* */ 0b000000100000000000000000000;
52
53
// Static tags describe aspects of a fiber that are not specific to a render,
54
// e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
55
// This enables us to defer more work in the unmount case,
56
// since we can defer traversing the tree during layout to look for Passive effects,
57
// and instead rely on the static flag as a signal that there may be cleanup work.
52
-export const RefStatic = /* */ 0b00000100000000000000000000;
53
-export const LayoutStatic = /* */ 0b00001000000000000000000000;
54
-export const PassiveStatic = /* */ 0b00010000000000000000000000;
58
+export const RefStatic = /* */ 0b000001000000000000000000000;
59
+export const LayoutStatic = /* */ 0b000010000000000000000000000;
60
+export const PassiveStatic = /* */ 0b000100000000000000000000000;
61
62
// Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
57
-export const PlacementDEV = /* */ 0b00100000000000000000000000;
58
-export const MountLayoutDev = /* */ 0b01000000000000000000000000;
59
-export const MountPassiveDev = /* */ 0b10000000000000000000000000;
63
+export const PlacementDEV = /* */ 0b001000000000000000000000000;
64
+export const MountLayoutDev = /* */ 0b010000000000000000000000000;
65
+export const MountPassiveDev = /* */ 0b100000000000000000000000000;
66
67
// Groups of flags that are used in the commit phase to skip over trees that
68
// don't contain effects, by checking subtreeFlags.