OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

[bug fix] revert values in ReactFiberFlags to keep consistency for devtools (#25832)

Browse Source 
## 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
b4204ede66
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
This commit is contained in:
Mengdi Chen
2022-12-06 17:25:30 -05:00
committed by GitHub
parent 645ae2686b
commit d69b2cf820
2 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react-devtools-shared/src/backend/ReactFiberFlags.js vendored
View File

@@ -10,8 +10,8 @@
// This list of flags must be synced with the following file:
// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberFlags.js
export const NoFlags = /* */ 0b00000000000000000000000000;
export const PerformedWork = /* */ 0b00000000000000000000000001;
export const Placement = /* */ 0b00000000000000000000000010;
export const DidCapture = /* */ 0b00000000000000000001000000;
export const Hydrating = /* */ 0b00000000000000100000000000;
export const NoFlags = /* */ 0b000000000000000000000000000;
export const PerformedWork = /* */ 0b000000000000000000000000001;
export const Placement = /* */ 0b000000000000000000000000010;
export const DidCapture = /* */ 0b000000000000000000010000000;
export const Hydrating = /* */ 0b000000000000001000000000000;

60
packages/react-reconciler/src/ReactFiberFlags.js vendored
View File

@@ -12,23 +12,29 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
export type Flags = number;
// Don't change these values. They're used by React Dev Tools.
export const NoFlags = /* */ 0b00000000000000000000000000;
export const PerformedWork = /* */ 0b00000000000000000000000001;
export const Placement = /* */ 0b00000000000000000000000010;
export const DidCapture = /* */ 0b00000000000000000001000000;
export const Hydrating = /* */ 0b00000000000000100000000000;
export const NoFlags = /* */ 0b000000000000000000000000000;
export const PerformedWork = /* */ 0b000000000000000000000000001;
export const Placement = /* */ 0b000000000000000000000000010;
export const DidCapture = /* */ 0b000000000000000000010000000;
export const Hydrating = /* */ 0b000000000000001000000000000;
// You can change the rest (and add more).
export const Update = /* */ 0b00000000000000000000000100;
export const ChildDeletion = /* */ 0b00000000000000000000001000;
export const ContentReset = /* */ 0b00000000000000000000010000;
export const Callback = /* */ 0b00000000000000000000100000;
export const ForceClientRender = /* */ 0b00000000000000000010000000;
export const Ref = /* */ 0b00000000000000000100000000;
export const Snapshot = /* */ 0b00000000000000001000000000;
export const Passive = /* */ 0b00000000000000010000000000;
export const Visibility = /* */ 0b00000000000001000000000000;
export const StoreConsistency = /* */ 0b00000000000010000000000000;
export const Update = /* */ 0b000000000000000000000000100;
/* Skipped value: 0b000000000000000000000001000; */
export const ChildDeletion = /* */ 0b000000000000000000000010000;
export const ContentReset = /* */ 0b000000000000000000000100000;
export const Callback = /* */ 0b000000000000000000001000000;
/* Used by DidCapture: 0b000000000000000000010000000; */
export const ForceClientRender = /* */ 0b000000000000000000100000000;
export const Ref = /* */ 0b000000000000000001000000000;
export const Snapshot = /* */ 0b000000000000000010000000000;
export const Passive = /* */ 0b000000000000000100000000000;
/* Used by Hydrating: 0b000000000000001000000000000; */
export const Visibility = /* */ 0b000000000000010000000000000;
export const StoreConsistency = /* */ 0b000000000000100000000000000;
export const LifecycleEffectMask =
Passive | Update | Callback | Ref | Snapshot | StoreConsistency;
@@ -37,26 +43,26 @@ export const LifecycleEffectMask =
export const HostEffectMask = /* */ 0b00000000000011111111111111;
// These are not really side effects, but we still reuse this field.
export const Incomplete = /* */ 0b00000000000100000000000000;
export const ShouldCapture = /* */ 0b00000000001000000000000000;
export const ForceUpdateForLegacySuspense = /* */ 0b00000000010000000000000000;
export const DidPropagateContext = /* */ 0b00000000100000000000000000;
export const NeedsPropagation = /* */ 0b00000001000000000000000000;
export const Forked = /* */ 0b00000010000000000000000000;
export const Incomplete = /* */ 0b000000000001000000000000000;
export const ShouldCapture = /* */ 0b000000000010000000000000000;
export const ForceUpdateForLegacySuspense = /* */ 0b000000000100000000000000000;
export const DidPropagateContext = /* */ 0b000000001000000000000000000;
export const NeedsPropagation = /* */ 0b000000010000000000000000000;
export const Forked = /* */ 0b000000100000000000000000000;
// Static tags describe aspects of a fiber that are not specific to a render,
// e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
// This enables us to defer more work in the unmount case,
// since we can defer traversing the tree during layout to look for Passive effects,
// and instead rely on the static flag as a signal that there may be cleanup work.
export const RefStatic = /* */ 0b00000100000000000000000000;
export const LayoutStatic = /* */ 0b00001000000000000000000000;
export const PassiveStatic = /* */ 0b00010000000000000000000000;
export const RefStatic = /* */ 0b000001000000000000000000000;
export const LayoutStatic = /* */ 0b000010000000000000000000000;
export const PassiveStatic = /* */ 0b000100000000000000000000000;
// Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
export const PlacementDEV = /* */ 0b00100000000000000000000000;
export const MountLayoutDev = /* */ 0b01000000000000000000000000;
export const MountPassiveDev = /* */ 0b10000000000000000000000000;
export const PlacementDEV = /* */ 0b001000000000000000000000000;
export const MountLayoutDev = /* */ 0b010000000000000000000000000;
export const MountPassiveDev = /* */ 0b100000000000000000000000000;
// Groups of flags that are used in the commit phase to skip over trees that
// don't contain effects, by checking subtreeFlags.