[DevTools] bug fix for Hydrating fibers

packages/react-devtools-shared/src/backend/ReactFiberFlags.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// 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;

packages/react-devtools-shared/src/backend/renderer.js

@@ -88,6 +88,13 @@ import {
   MEMO_SYMBOL_STRING,
   SERVER_CONTEXT_SYMBOL_STRING,
 } from './ReactSymbols';
+import {
+  DidCapture,
+  NoFlags,
+  PerformedWork,
+  Placement,
+  Hydrating,
+} from './ReactFiberFlags';
 import {format} from './utils';
 import {
   enableProfilerChangedHookIndices,
@@ -135,15 +142,6 @@ type ReactPriorityLevelsType = {
   NoPriority: number,
 };
 
-type ReactTypeOfSideEffectType = {
-  DidCapture: number,
-  NoFlags: number,
-  PerformedWork: number,
-  Placement: number,
-  Incomplete: number,
-  Hydrating: number,
-};
-
 function getFiberFlags(fiber: Fiber): number {
   // The name of this field changed from "effectTag" to "flags"
   return fiber.flags !== undefined ? fiber.flags : (fiber: any).effectTag;
@@ -162,19 +160,9 @@ export function getInternalReactConstants(
   getDisplayNameForFiber: getDisplayNameForFiberType,
   getTypeSymbol: getTypeSymbolType,
   ReactPriorityLevels: ReactPriorityLevelsType,
-  ReactTypeOfSideEffect: ReactTypeOfSideEffectType,
   ReactTypeOfWork: WorkTagMap,
   StrictModeBits: number,
 } {
-  const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {
-    DidCapture: 0b10000000,
-    NoFlags: 0b00,
-    PerformedWork: 0b01,
-    Placement: 0b10,
-    Incomplete: 0b10000000000000,
-    Hydrating: 0b1000000000000,
-  };
-
   // **********************************************************
   // The section below is copied from files in React repo.
   // Keep it in sync, and add version guards if it changes.
@@ -562,7 +550,6 @@ export function getInternalReactConstants(
     getTypeSymbol,
     ReactPriorityLevels,
     ReactTypeOfWork,
-    ReactTypeOfSideEffect,
     StrictModeBits,
   };
 }
@@ -595,16 +582,8 @@ export function attach(
     getTypeSymbol,
     ReactPriorityLevels,
     ReactTypeOfWork,
-    ReactTypeOfSideEffect,
     StrictModeBits,
   } = getInternalReactConstants(version);
-  const {
-    DidCapture,
-    Hydrating,
-    NoFlags,
-    PerformedWork,
-    Placement,
-  } = ReactTypeOfSideEffect;
   const {
     CacheComponent,
     ClassComponent,

packages/react-reconciler/src/ReactFiberFlags.js

@@ -11,22 +11,22 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 
 export type Flags = number;
 
-// Don't change these two values. They're used by React Dev Tools.
+// 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;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b00000000000000000000000010;
 export const Update = /*                       */ 0b00000000000000000000000100;
 export const ChildDeletion = /*                */ 0b00000000000000000000001000;
 export const ContentReset = /*                 */ 0b00000000000000000000010000;
 export const Callback = /*                     */ 0b00000000000000000000100000;
-export const DidCapture = /*                   */ 0b00000000000000000001000000;
 export const ForceClientRender = /*            */ 0b00000000000000000010000000;
 export const Ref = /*                          */ 0b00000000000000000100000000;
 export const Snapshot = /*                     */ 0b00000000000000001000000000;
 export const Passive = /*                      */ 0b00000000000000010000000000;
-export const Hydrating = /*                    */ 0b00000000000000100000000000;
 export const Visibility = /*                   */ 0b00000000000001000000000000;
 export const StoreConsistency = /*             */ 0b00000000000010000000000000;