Rename effect fields (#19755)

- `effectTag` -> `flags`
- `subtreeTag` -> `subtreeFlags`

.eslintrc.js

@@ -117,7 +117,7 @@ module.exports = {
           // Disabled because it's also used by the Hook type.
           // 'lastEffect',
         ],
-        new: ['subtreeTag'],
+        new: ['subtreeFlags'],
       },
     ],
   },

fixtures/fiber-debugger/src/Fibers.js

@@ -324,9 +324,9 @@ export default function Fibers({fibers, show, graphSettings, ...rest}) {
               ) : (
                 <small>Committed</small>
               )}
-              {fiber.effectTag && [
+              {fiber.flags && [
                 <br key="br" />,
-                <small key="small">Effect: {fiber.effectTag}</small>,
+                <small key="small">Effect: {fiber.flags}</small>,
               ]}
             </div>
           </Vertex>,

fixtures/fiber-debugger/src/describeFibers.js

@@ -37,7 +37,7 @@ function getFriendlyTag(tag) {
   }
 }
 
-function getFriendlyEffect(effectTag) {
+function getFriendlyEffect(flags) {
   const effects = {
     1: 'Performed Work',
     2: 'Placement',
@@ -49,7 +49,7 @@ function getFriendlyEffect(effectTag) {
     128: 'Ref',
   };
   return Object.keys(effects)
-    .filter(flag => flag & effectTag)
+    .filter(flag => flag & flags)
     .map(flag => effects[flag])
     .join(' & ');
 }
@@ -72,7 +72,7 @@ export default function describeFibers(rootFiber, workInProgress) {
       ...fiber,
       id: id,
       tag: getFriendlyTag(fiber.tag),
-      effectTag: getFriendlyEffect(fiber.effectTag),
+      flags: getFriendlyEffect(fiber.flags),
       type: fiber.type && '<' + (fiber.type.name || fiber.type) + '>',
       stateNode: `[${typeof fiber.stateNode}]`,
       return: acknowledgeFiber(fiber.return),

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

@@ -106,11 +106,16 @@ type ReactPriorityLevelsType = {|
 |};
 
 type ReactTypeOfSideEffectType = {|
-  NoEffect: number,
+  NoFlags: number,
   PerformedWork: number,
   Placement: 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;
+}
+
 // Some environments (e.g. React Native / Hermes) don't support the performance API yet.
 const getCurrentTime =
   typeof performance === 'object' && typeof performance.now === 'function'
@@ -127,7 +132,7 @@ export function getInternalReactConstants(
   ReactTypeOfWork: WorkTagMap,
 |} {
   const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {
-    NoEffect: 0b00,
+    NoFlags: 0b00,
     PerformedWork: 0b01,
     Placement: 0b10,
   };
@@ -416,7 +421,7 @@ export function attach(
     ReactTypeOfWork,
     ReactTypeOfSideEffect,
   } = getInternalReactConstants(renderer.version);
-  const {NoEffect, PerformedWork, Placement} = ReactTypeOfSideEffect;
+  const {NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
   const {
     FunctionComponent,
     ClassComponent,
@@ -944,7 +949,7 @@ export function attach(
         // For types that execute user code, we check PerformedWork effect.
         // We don't reflect bailouts (either referential or sCU) in DevTools.
         // eslint-disable-next-line no-bitwise
-        return (nextFiber.effectTag & PerformedWork) === PerformedWork;
+        return (getFiberFlags(nextFiber) & PerformedWork) === PerformedWork;
       // Note: ContextConsumer only gets PerformedWork effect in 16.3.3+
       // so it won't get highlighted with React 16.3.0 to 16.3.2.
       default:
@@ -1928,12 +1933,12 @@ export function attach(
     if (!fiber.alternate) {
       // If there is no alternate, this might be a new tree that isn't inserted
       // yet. If it is, then it will have a pending insertion effect on it.
-      if ((node.effectTag & Placement) !== NoEffect) {
+      if ((getFiberFlags(node) & Placement) !== NoFlags) {
         return MOUNTING;
       }
       while (node.return) {
         node = node.return;
-        if ((node.effectTag & Placement) !== NoEffect) {
+        if ((getFiberFlags(node) & Placement) !== NoFlags) {
           return MOUNTING;
         }
       }

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

@@ -22,7 +22,7 @@ type BundleType =
   | 1; // DEV
 
 export type WorkTag = number;
-export type SideEffectTag = number;
+export type WorkFlags = number;
 export type ExpirationTime = number;
 
 export type WorkTagMap = {|

packages/react-reconciler/src/ReactChildFiber.new.js

@@ -15,7 +15,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane';
 
 import getComponentName from 'shared/getComponentName';
-import {Deletion, Placement} from './ReactSideEffectTags';
+import {Deletion, Placement} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -280,7 +280,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     const deletions = returnFiber.deletions;
     if (deletions === null) {
       returnFiber.deletions = [childToDelete];
-      returnFiber.effectTag |= Deletion;
+      returnFiber.flags |= Deletion;
     } else {
       deletions.push(childToDelete);
     }
@@ -350,15 +350,15 @@ function ChildReconciler(shouldTrackSideEffects) {
       const oldIndex = current.index;
       if (oldIndex < lastPlacedIndex) {
         // This is a move.
-        newFiber.effectTag = Placement;
+        newFiber.flags = Placement;
         return lastPlacedIndex;
       } else {
         // This item can stay in place.
         return oldIndex;
       }
     } else {
       // This is an insertion.
-      newFiber.effectTag = Placement;
+      newFiber.flags = Placement;
       return lastPlacedIndex;
     }
   }
@@ -367,7 +367,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     // This is simpler for the single child case. We only need to do a
     // placement for inserting new children.
     if (shouldTrackSideEffects && newFiber.alternate === null) {
-      newFiber.effectTag = Placement;
+      newFiber.flags = Placement;
     }
     return newFiber;
   }

packages/react-reconciler/src/ReactChildFiber.old.js

@@ -15,7 +15,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane';
 
 import getComponentName from 'shared/getComponentName';
-import {Placement, Deletion} from './ReactSideEffectTags';
+import {Placement, Deletion} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -290,7 +290,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
     }
     childToDelete.nextEffect = null;
-    childToDelete.effectTag = Deletion;
+    childToDelete.flags = Deletion;
   }
 
   function deleteRemainingChildren(
@@ -357,15 +357,15 @@ function ChildReconciler(shouldTrackSideEffects) {
       const oldIndex = current.index;
       if (oldIndex < lastPlacedIndex) {
         // This is a move.
-        newFiber.effectTag = Placement;
+        newFiber.flags = Placement;
         return lastPlacedIndex;
       } else {
         // This item can stay in place.
         return oldIndex;
       }
     } else {
       // This is an insertion.
-      newFiber.effectTag = Placement;
+      newFiber.flags = Placement;
       return lastPlacedIndex;
     }
   }
@@ -374,7 +374,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     // This is simpler for the single child case. We only need to do a
     // placement for inserting new children.
     if (shouldTrackSideEffects && newFiber.alternate === null) {
-      newFiber.effectTag = Placement;
+      newFiber.flags = Placement;
     }
     return newFiber;
   }

packages/react-reconciler/src/ReactFiber.new.js

@@ -29,8 +29,8 @@ import {
   enableScopeAPI,
   enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
-import {NoEffect, Placement, StaticMask} from './ReactSideEffectTags';
-import {NoEffect as NoSubtreeEffect} from './ReactSubtreeTags';
+import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
+import {NoFlags as NoSubtreeEffect} from './ReactSubtreeFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
@@ -144,8 +144,8 @@ function FiberNode(
   this.mode = mode;
 
   // Effects
-  this.effectTag = NoEffect;
-  this.subtreeTag = NoSubtreeEffect;
+  this.flags = NoFlags;
+  this.subtreeFlags = NoSubtreeEffect;
   this.deletions = null;
 
   this.lanes = NoLanes;
@@ -284,7 +284,7 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
     workInProgress.type = current.type;
 
     // We already have an alternate.
-    workInProgress.subtreeTag = NoSubtreeEffect;
+    workInProgress.subtreeFlags = NoSubtreeEffect;
     workInProgress.deletions = null;
 
     if (enableProfilerTimer) {
@@ -299,7 +299,7 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
 
   // Reset all effects except static ones.
   // Static effects are not specific to a render.
-  workInProgress.effectTag = current.effectTag & StaticMask;
+  workInProgress.flags = current.flags & StaticMask;
   workInProgress.childLanes = current.childLanes;
   workInProgress.lanes = current.lanes;
 
@@ -363,7 +363,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
   // Reset the effect tag but keep any Placement tags, since that's something
   // that child fiber is setting, not the reconciliation.
-  workInProgress.effectTag &= Placement;
+  workInProgress.flags &= Placement;
 
   const current = workInProgress.alternate;
   if (current === null) {
@@ -372,7 +372,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
     workInProgress.lanes = renderLanes;
 
     workInProgress.child = null;
-    workInProgress.subtreeTag = NoSubtreeEffect;
+    workInProgress.subtreeFlags = NoSubtreeEffect;
     workInProgress.memoizedProps = null;
     workInProgress.memoizedState = null;
     workInProgress.updateQueue = null;
@@ -393,7 +393,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
     workInProgress.lanes = current.lanes;
 
     workInProgress.child = current.child;
-    workInProgress.subtreeTag = current.subtreeTag;
+    workInProgress.subtreeFlags = current.subtreeFlags;
     workInProgress.deletions = null;
     workInProgress.memoizedProps = current.memoizedProps;
     workInProgress.memoizedState = current.memoizedState;
@@ -816,8 +816,8 @@ export function assignFiberPropertiesInDEV(
   target.memoizedState = source.memoizedState;
   target.dependencies = source.dependencies;
   target.mode = source.mode;
-  target.effectTag = source.effectTag;
-  target.subtreeTag = source.subtreeTag;
+  target.flags = source.flags;
+  target.subtreeFlags = source.subtreeFlags;
   target.deletions = source.deletions;
   target.lanes = source.lanes;
   target.childLanes = source.childLanes;

packages/react-reconciler/src/ReactFiber.old.js

@@ -29,7 +29,7 @@ import {
   enableScopeAPI,
   enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
-import {NoEffect, Placement} from './ReactSideEffectTags';
+import {NoFlags, Placement} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
@@ -143,7 +143,7 @@ function FiberNode(
   this.mode = mode;
 
   // Effects
-  this.effectTag = NoEffect;
+  this.flags = NoFlags;
   this.nextEffect = null;
 
   this.firstEffect = null;
@@ -286,7 +286,7 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
 
     // We already have an alternate.
     // Reset the effect tag.
-    workInProgress.effectTag = NoEffect;
+    workInProgress.flags = NoFlags;
 
     // The effect list is no longer valid.
     workInProgress.nextEffect = null;
@@ -366,7 +366,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
   // Reset the effect tag but keep any Placement tags, since that's something
   // that child fiber is setting, not the reconciliation.
-  workInProgress.effectTag &= Placement;
+  workInProgress.flags &= Placement;
 
   // The effect list is no longer valid.
   workInProgress.nextEffect = null;
@@ -821,7 +821,7 @@ export function assignFiberPropertiesInDEV(
   target.memoizedState = source.memoizedState;
   target.dependencies = source.dependencies;
   target.mode = source.mode;
-  target.effectTag = source.effectTag;
+  target.flags = source.flags;
   target.nextEffect = source.nextEffect;
   target.firstEffect = source.firstEffect;
   target.lastEffect = source.lastEffect;