From 7f6201889e8e628eeb53e05d8850ddffa3c2e74a Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Fri, 22 Sep 2023 20:24:42 -0700
Subject: [PATCH] Ship diffInCommitPhase (#27409)

Performance tests at Meta showed neutral results.
---
 packages/react-art/src/ReactFiberConfigART.js |   6 -
 .../src/client/CSSPropertyOperations.js       |   8 +-
 .../src/client/ReactDOMComponent.js           | 438 +-----------------
 .../src/client/ReactFiberConfigDOM.js         |  36 +-
 .../src/ReactFiberConfigFabric.js             |  45 +-
 .../src/ReactFiberConfigNative.js             |  15 -
 .../src/createReactNoop.js                    |  19 -
 packages/react-reconciler/README.md           |  12 +-
 .../src/ReactFiberCommitWork.js               |  57 +--
 .../src/ReactFiberCompleteWork.js             |  63 +--
 .../src/ReactFiberHydrationContext.js         |  16 +-
 .../src/forks/ReactFiberConfig.custom.js      |   1 -
 .../src/ReactFiberConfigTestHost.js           |  13 -
 packages/shared/ReactFeatureFlags.js          |   3 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 21 files changed, 53 insertions(+), 686 deletions(-)

diff --git a/packages/react-art/src/ReactFiberConfigART.js b/packages/react-art/src/ReactFiberConfigART.js
index 89c5489ebbca6..d0ae53019cac6 100644
--- a/packages/react-art/src/ReactFiberConfigART.js
+++ b/packages/react-art/src/ReactFiberConfigART.js
@@ -15,10 +15,8 @@ import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 const pooledTransform = new Transform();
 
 const NO_CONTEXT = {};
-const UPDATE_SIGNAL = {};
 if (__DEV__) {
   Object.freeze(NO_CONTEXT);
-  Object.freeze(UPDATE_SIGNAL);
 }
 
 /** Helper Methods */
@@ -312,10 +310,6 @@ export function prepareForCommit() {
   return null;
 }
 
-export function prepareUpdate(domElement, type, oldProps, newProps) {
-  return UPDATE_SIGNAL;
-}
-
 export function resetAfterCommit() {
   // Noop
 }
diff --git a/packages/react-dom-bindings/src/client/CSSPropertyOperations.js b/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
index 521f4c67fc66b..55fd43ec479d0 100644
--- a/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
+++ b/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
@@ -11,7 +11,6 @@ import hyphenateStyleName from '../shared/hyphenateStyleName';
 import warnValidStyle from '../shared/warnValidStyle';
 import isUnitlessNumber from '../shared/isUnitlessNumber';
 import {checkCSSPropertyStringCoercion} from 'shared/CheckStringCoercion';
-import {diffInCommitPhase} from 'shared/ReactFeatureFlags';
 
 /**
  * Operations for dealing with CSS properties.
@@ -126,7 +125,7 @@ export function setValueForStyles(node, styles, prevStyles) {
 
   const style = node.style;
 
-  if (diffInCommitPhase && prevStyles != null) {
+  if (prevStyles != null) {
     if (__DEV__) {
       validateShorthandPropertyCollisionInDev(prevStyles, styles);
     }
@@ -200,10 +199,7 @@ function expandShorthandMap(styles) {
  *   {font: 'foo', fontVariant: 'bar'} -> {font: 'foo'}
  *   becomes .style.fontVariant = ''
  */
-export function validateShorthandPropertyCollisionInDev(
-  prevStyles,
-  nextStyles,
-) {
+function validateShorthandPropertyCollisionInDev(prevStyles, nextStyles) {
   if (__DEV__) {
     if (!nextStyles) {
       return;
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index b0f452b29c59e..cbd51de23412d 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -55,7 +55,6 @@ import setTextContent from './setTextContent';
 import {
   createDangerousStringForStyles,
   setValueForStyles,
-  validateShorthandPropertyCollisionInDev,
 } from './CSSPropertyOperations';
 import {SVG_NAMESPACE, MATH_NAMESPACE} from './DOMNamespaces';
 import isCustomElement from '../shared/isCustomElement';
@@ -74,7 +73,6 @@ import {
   disableIEWorkarounds,
   enableTrustedTypesIntegration,
   enableFilterEmptyStringAttributesDOM,
-  diffInCommitPhase,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -1341,119 +1339,6 @@ export function setInitialProperties(
   }
 }
 
-// Calculate the diff between the two objects.
-export function diffProperties(
-  domElement: Element,
-  tag: string,
-  lastProps: Object,
-  nextProps: Object,
-): null | Array<mixed> {
-  if (__DEV__) {
-    validatePropertiesInDevelopment(tag, nextProps);
-  }
-
-  let updatePayload: null | Array<any> = null;
-
-  let propKey;
-  let styleName;
-  let styleUpdates = null;
-  for (propKey in lastProps) {
-    if (
-      nextProps.hasOwnProperty(propKey) ||
-      !lastProps.hasOwnProperty(propKey) ||
-      lastProps[propKey] == null
-    ) {
-      continue;
-    }
-    switch (propKey) {
-      case 'style': {
-        const lastStyle = lastProps[propKey];
-        for (styleName in lastStyle) {
-          if (lastStyle.hasOwnProperty(styleName)) {
-            if (!styleUpdates) {
-              styleUpdates = ({}: {[string]: $FlowFixMe});
-            }
-            styleUpdates[styleName] = '';
-          }
-        }
-        break;
-      }
-      default: {
-        // For all other deleted properties we add it to the queue. We use
-        // the allowed property list in the commit phase instead.
-        (updatePayload = updatePayload || []).push(propKey, null);
-      }
-    }
-  }
-  for (propKey in nextProps) {
-    const nextProp = nextProps[propKey];
-    const lastProp = lastProps != null ? lastProps[propKey] : undefined;
-    if (
-      nextProps.hasOwnProperty(propKey) &&
-      nextProp !== lastProp &&
-      (nextProp != null || lastProp != null)
-    ) {
-      switch (propKey) {
-        case 'style': {
-          if (lastProp) {
-            // Unset styles on `lastProp` but not on `nextProp`.
-            for (styleName in lastProp) {
-              if (
-                lastProp.hasOwnProperty(styleName) &&
-                (!nextProp || !nextProp.hasOwnProperty(styleName))
-              ) {
-                if (!styleUpdates) {
-                  styleUpdates = ({}: {[string]: string});
-                }
-                styleUpdates[styleName] = '';
-              }
-            }
-            // Update styles that changed since `lastProp`.
-            for (styleName in nextProp) {
-              if (
-                nextProp.hasOwnProperty(styleName) &&
-                lastProp[styleName] !== nextProp[styleName]
-              ) {
-                if (!styleUpdates) {
-                  styleUpdates = ({}: {[string]: $FlowFixMe});
-                }
-                styleUpdates[styleName] = nextProp[styleName];
-              }
-            }
-          } else {
-            // Relies on `updateStylesByID` not mutating `styleUpdates`.
-            if (!styleUpdates) {
-              if (!updatePayload) {
-                updatePayload = [];
-              }
-              updatePayload.push(propKey, styleUpdates);
-            }
-            styleUpdates = nextProp;
-          }
-          break;
-        }
-        case 'is':
-          if (__DEV__) {
-            console.error(
-              'Cannot update the "is" prop after it has been initialized.',
-            );
-          }
-        // Fall through
-        default: {
-          (updatePayload = updatePayload || []).push(propKey, nextProp);
-        }
-      }
-    }
-  }
-  if (styleUpdates) {
-    if (__DEV__) {
-      validateShorthandPropertyCollisionInDev(lastProps.style, nextProps.style);
-    }
-    (updatePayload = updatePayload || []).push('style', styleUpdates);
-  }
-  return updatePayload;
-}
-
 export function updateProperties(
   domElement: Element,
   tag: string,
@@ -1924,305 +1809,6 @@ export function updateProperties(
   }
 }
 
-// Apply the diff.
-export function updatePropertiesWithDiff(
-  domElement: Element,
-  updatePayload: Array<any>,
-  tag: string,
-  lastProps: Object,
-  nextProps: Object,
-): void {
-  switch (tag) {
-    case 'div':
-    case 'span':
-    case 'svg':
-    case 'path':
-    case 'a':
-    case 'g':
-    case 'p':
-    case 'li': {
-      // Fast track the most common tag types
-      break;
-    }
-    case 'input': {
-      const name = nextProps.name;
-      const type = nextProps.type;
-      const value = nextProps.value;
-      const defaultValue = nextProps.defaultValue;
-      const lastDefaultValue = lastProps.defaultValue;
-      const checked = nextProps.checked;
-      const defaultChecked = nextProps.defaultChecked;
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'type': {
-            break;
-          }
-          case 'name': {
-            break;
-          }
-          case 'checked': {
-            break;
-          }
-          case 'defaultChecked': {
-            break;
-          }
-          case 'value': {
-            break;
-          }
-          case 'defaultValue': {
-            break;
-          }
-          case 'children':
-          case 'dangerouslySetInnerHTML': {
-            if (propValue != null) {
-              throw new Error(
-                `${tag} is a void element tag and must neither have \`children\` nor ` +
-                  'use `dangerouslySetInnerHTML`.',
-              );
-            }
-            break;
-          }
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-
-      if (__DEV__) {
-        const wasControlled =
-          lastProps.type === 'checkbox' || lastProps.type === 'radio'
-            ? lastProps.checked != null
-            : lastProps.value != null;
-        const isControlled =
-          nextProps.type === 'checkbox' || nextProps.type === 'radio'
-            ? nextProps.checked != null
-            : nextProps.value != null;
-
-        if (
-          !wasControlled &&
-          isControlled &&
-          !didWarnUncontrolledToControlled
-        ) {
-          console.error(
-            'A component is changing an uncontrolled input to be controlled. ' +
-              'This is likely caused by the value changing from undefined to ' +
-              'a defined value, which should not happen. ' +
-              'Decide between using a controlled or uncontrolled input ' +
-              'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components',
-          );
-          didWarnUncontrolledToControlled = true;
-        }
-        if (
-          wasControlled &&
-          !isControlled &&
-          !didWarnControlledToUncontrolled
-        ) {
-          console.error(
-            'A component is changing a controlled input to be uncontrolled. ' +
-              'This is likely caused by the value changing from a defined to ' +
-              'undefined, which should not happen. ' +
-              'Decide between using a controlled or uncontrolled input ' +
-              'element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components',
-          );
-          didWarnControlledToUncontrolled = true;
-        }
-      }
-
-      // Update the wrapper around inputs *after* updating props. This has to
-      // happen after updating the rest of props. Otherwise HTML5 input validations
-      // raise warnings and prevent the new value from being assigned.
-      updateInput(
-        domElement,
-        value,
-        defaultValue,
-        lastDefaultValue,
-        checked,
-        defaultChecked,
-        type,
-        name,
-      );
-      return;
-    }
-    case 'select': {
-      const value = nextProps.value;
-      const defaultValue = nextProps.defaultValue;
-      const multiple = nextProps.multiple;
-      const wasMultiple = lastProps.multiple;
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'value': {
-            // This is handled by updateWrapper below.
-            break;
-          }
-          // defaultValue are ignored by setProp
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-      // <select> value update needs to occur after <option> children
-      // reconciliation
-      updateSelect(domElement, value, defaultValue, multiple, wasMultiple);
-      return;
-    }
-    case 'textarea': {
-      const value = nextProps.value;
-      const defaultValue = nextProps.defaultValue;
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'value': {
-            // This is handled by updateWrapper below.
-            break;
-          }
-          case 'children': {
-            // TODO: This doesn't actually do anything if it updates.
-            break;
-          }
-          case 'dangerouslySetInnerHTML': {
-            if (propValue != null) {
-              // TODO: Do we really need a special error message for this. It's also pretty blunt.
-              throw new Error(
-                '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
-              );
-            }
-            break;
-          }
-          // defaultValue is ignored by setProp
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-      updateTextarea(domElement, value, defaultValue);
-      return;
-    }
-    case 'option': {
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'selected': {
-            // TODO: Remove support for selected on option.
-            (domElement: any).selected =
-              propValue &&
-              typeof propValue !== 'function' &&
-              typeof propValue !== 'symbol';
-            break;
-          }
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-      return;
-    }
-    case 'img':
-    case 'link':
-    case 'area':
-    case 'base':
-    case 'br':
-    case 'col':
-    case 'embed':
-    case 'hr':
-    case 'keygen':
-    case 'meta':
-    case 'param':
-    case 'source':
-    case 'track':
-    case 'wbr':
-    case 'menuitem': {
-      // Void elements
-      for (let i = 0; i < updatePayload.length; i += 2) {
-        const propKey = updatePayload[i];
-        const propValue = updatePayload[i + 1];
-        switch (propKey) {
-          case 'children':
-          case 'dangerouslySetInnerHTML': {
-            if (propValue != null) {
-              // TODO: Can we make this a DEV warning to avoid this deny list?
-              throw new Error(
-                `${tag} is a void element tag and must neither have \`children\` nor ` +
-                  'use `dangerouslySetInnerHTML`.',
-              );
-            }
-            break;
-          }
-          // defaultChecked and defaultValue are ignored by setProp
-          default: {
-            setProp(
-              domElement,
-              tag,
-              propKey,
-              propValue,
-              nextProps,
-              lastProps[propKey],
-            );
-          }
-        }
-      }
-      return;
-    }
-    default: {
-      if (isCustomElement(tag, nextProps)) {
-        for (let i = 0; i < updatePayload.length; i += 2) {
-          const propKey = updatePayload[i];
-          const propValue = updatePayload[i + 1];
-          setPropOnCustomElement(
-            domElement,
-            tag,
-            propKey,
-            propValue,
-            nextProps,
-            lastProps[propKey],
-          );
-        }
-        return;
-      }
-    }
-  }
-
-  // Apply the diff.
-  for (let i = 0; i < updatePayload.length; i += 2) {
-    const propKey = updatePayload[i];
-    const propValue = updatePayload[i + 1];
-    setProp(domElement, tag, propKey, propValue, nextProps, lastProps[propKey]);
-  }
-}
-
 function getPossibleStandardName(propName: string): string | null {
   if (__DEV__) {
     const lowerCasedName = propName.toLowerCase();
@@ -3094,7 +2680,7 @@ export function diffHydratedProperties(
   isConcurrentMode: boolean,
   shouldWarnDev: boolean,
   hostContext: HostContext,
-): null | Array<mixed> {
+): void {
   if (__DEV__) {
     validatePropertiesInDevelopment(tag, props);
   }
@@ -3192,8 +2778,6 @@ export function diffHydratedProperties(
       break;
   }
 
-  let updatePayload = null;
-
   const children = props.children;
   // For text content children we compare against textContent. This
   // might match additional HTML that is hidden when we read it using
@@ -3215,17 +2799,13 @@ export function diffHydratedProperties(
         );
       }
       if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) {
-        if (diffInCommitPhase) {
-          // We really should be patching this in the commit phase but since
-          // this only affects legacy mode hydration which is deprecated anyway
-          // we can get away with it.
-          // Host singletons get their children appended and don't use the text
-          // content mechanism.
-          if (!enableHostSingletons || tag !== 'body') {
-            domElement.textContent = (children: any);
-          }
-        } else {
-          updatePayload = ['children', children];
+        // We really should be patching this in the commit phase but since
+        // this only affects legacy mode hydration which is deprecated anyway
+        // we can get away with it.
+        // Host singletons get their children appended and don't use the text
+        // content mechanism.
+        if (!enableHostSingletons || tag !== 'body') {
+          domElement.textContent = (children: any);
         }
       }
     }
@@ -3281,8 +2861,6 @@ export function diffHydratedProperties(
       warnForExtraAttributes(extraAttributes);
     }
   }
-
-  return updatePayload;
 }
 
 export function diffHydratedText(
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
index 6a4b33a1079f6..0e42d00847995 100644
--- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -54,9 +54,7 @@ export {detachDeletedInstance};
 import {hasRole} from './DOMAccessibilityRoles';
 import {
   setInitialProperties,
-  diffProperties,
   updateProperties,
-  updatePropertiesWithDiff,
   diffHydratedProperties,
   diffHydratedText,
   trapClickOnNonInteractiveElement,
@@ -96,7 +94,6 @@ import {
   enableFloat,
   enableHostSingletons,
   enableTrustedTypesIntegration,
-  diffInCommitPhase,
   enableFormActions,
   enableAsyncActions,
 } from 'shared/ReactFeatureFlags';
@@ -546,20 +543,6 @@ export function finalizeInitialChildren(
   }
 }
 
-export function prepareUpdate(
-  domElement: Instance,
-  type: string,
-  oldProps: Props,
-  newProps: Props,
-  hostContext: HostContext,
-): null | Array<mixed> {
-  if (diffInCommitPhase) {
-    // TODO: Figure out how to validateDOMNesting when children turn into a string.
-    return null;
-  }
-  return diffProperties(domElement, type, oldProps, newProps);
-}
-
 export function shouldSetTextContent(type: string, props: Props): boolean {
   return (
     type === 'textarea' ||
@@ -712,19 +695,8 @@ export function commitUpdate(
   newProps: Props,
   internalInstanceHandle: Object,
 ): void {
-  if (diffInCommitPhase) {
-    // Diff and update the properties.
-    updateProperties(domElement, type, oldProps, newProps);
-  } else {
-    // Apply the diff to the DOM node.
-    updatePropertiesWithDiff(
-      domElement,
-      updatePayload,
-      type,
-      oldProps,
-      newProps,
-    );
-  }
+  // Diff and update the properties.
+  updateProperties(domElement, type, oldProps, newProps);
 
   // Update the props handle so that we know which props are the ones with
   // with current event handlers.
@@ -1384,7 +1356,7 @@ export function hydrateInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
   shouldWarnDev: boolean,
-): null | Array<mixed> {
+): void {
   precacheFiberNode(internalInstanceHandle, instance);
   // TODO: Possibly defer this until the commit phase where all the events
   // get attached.
@@ -1395,7 +1367,7 @@ export function hydrateInstance(
   const isConcurrentMode =
     ((internalInstanceHandle: Fiber).mode & ConcurrentMode) !== NoMode;
 
-  return diffHydratedProperties(
+  diffHydratedProperties(
     instance,
     type,
     props,
diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
index d1d669ee829d4..d08f94d148d87 100644
--- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js
+++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
@@ -34,7 +34,6 @@ import {
 
 const {
   createNode,
-  cloneNode,
   cloneNodeWithNewChildren,
   cloneNodeWithNewChildrenAndProps,
   cloneNodeWithNewProps,
@@ -48,8 +47,6 @@ const {
   unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
 } = nativeFabricUIManager;
 
-import {diffInCommitPhase} from 'shared/ReactFeatureFlags';
-
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
 // Counter for uniquely identifying views.
@@ -291,25 +288,6 @@ export function prepareForCommit(containerInfo: Container): null | Object {
   return null;
 }
 
-export function prepareUpdate(
-  instance: Instance,
-  type: string,
-  oldProps: Props,
-  newProps: Props,
-  hostContext: HostContext,
-): null | Object {
-  if (diffInCommitPhase) {
-    return null;
-  }
-  const viewConfig = instance.canonical.viewConfig;
-  const updatePayload = diff(oldProps, newProps, viewConfig.validAttributes);
-  // TODO: If the event handlers have changed, we need to update the current props
-  // in the commit phase but there is no host config hook to do it yet.
-  // So instead we hack it by updating it in the render phase.
-  instance.canonical.currentProps = newProps;
-  return updatePayload;
-}
-
 export function resetAfterCommit(containerInfo: Container): void {
   // Noop
 }
@@ -364,7 +342,6 @@ export const supportsPersistence = true;
 
 export function cloneInstance(
   instance: Instance,
-  updatePayload: null | Object,
   type: string,
   oldProps: Props,
   newProps: Props,
@@ -372,14 +349,12 @@ export function cloneInstance(
   keepChildren: boolean,
   recyclableInstance: null | Instance,
 ): Instance {
-  if (diffInCommitPhase) {
-    const viewConfig = instance.canonical.viewConfig;
-    updatePayload = diff(oldProps, newProps, viewConfig.validAttributes);
-    // TODO: If the event handlers have changed, we need to update the current props
-    // in the commit phase but there is no host config hook to do it yet.
-    // So instead we hack it by updating it in the render phase.
-    instance.canonical.currentProps = newProps;
-  }
+  const viewConfig = instance.canonical.viewConfig;
+  const updatePayload = diff(oldProps, newProps, viewConfig.validAttributes);
+  // TODO: If the event handlers have changed, we need to update the current props
+  // in the commit phase but there is no host config hook to do it yet.
+  // So instead we hack it by updating it in the render phase.
+  instance.canonical.currentProps = newProps;
 
   const node = instance.node;
   let clone;
@@ -387,12 +362,8 @@ export function cloneInstance(
     if (updatePayload !== null) {
       clone = cloneNodeWithNewProps(node, updatePayload);
     } else {
-      if (diffInCommitPhase) {
-        // No changes
-        return instance;
-      } else {
-        clone = cloneNode(node);
-      }
+      // No changes
+      return instance;
     }
   } else {
     if (updatePayload !== null) {
diff --git a/packages/react-native-renderer/src/ReactFiberConfigNative.js b/packages/react-native-renderer/src/ReactFiberConfigNative.js
index 6c14b62fde957..b61c8ef292a40 100644
--- a/packages/react-native-renderer/src/ReactFiberConfigNative.js
+++ b/packages/react-native-renderer/src/ReactFiberConfigNative.js
@@ -61,11 +61,6 @@ export type RendererInspectionConfig = $ReadOnly<{
   ) => void,
 }>;
 
-const UPDATE_SIGNAL = {};
-if (__DEV__) {
-  Object.freeze(UPDATE_SIGNAL);
-}
-
 // Counter for uniquely identifying views.
 // % 10 === 1 means it is a rootTag.
 // % 2 === 0 means it is a Fabric tag.
@@ -237,16 +232,6 @@ export function prepareForCommit(containerInfo: Container): null | Object {
   return null;
 }
 
-export function prepareUpdate(
-  instance: Instance,
-  type: string,
-  oldProps: Props,
-  newProps: Props,
-  hostContext: HostContext,
-): null | Object {
-  return UPDATE_SIGNAL;
-}
-
 export function resetAfterCommit(containerInfo: Container): void {
   // Noop
 }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 520b1278c5549..78249d500090f 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -82,10 +82,8 @@ export type TransitionStatus = mixed;
 
 const NO_CONTEXT = {};
 const UPPERCASE_CONTEXT = {};
-const UPDATE_SIGNAL = {};
 if (__DEV__) {
   Object.freeze(NO_CONTEXT);
-  Object.freeze(UPDATE_SIGNAL);
 }
 
 function createReactNoop(reconciler: Function, useMutation: boolean) {
@@ -222,7 +220,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
   function cloneInstance(
     instance: Instance,
-    updatePayload: null | Object,
     type: string,
     oldProps: Props,
     newProps: Props,
@@ -453,21 +450,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       return false;
     },
 
-    prepareUpdate(
-      instance: Instance,
-      type: string,
-      oldProps: Props,
-      newProps: Props,
-    ): null | {...} {
-      if (oldProps === null) {
-        throw new Error('Should have old props');
-      }
-      if (newProps === null) {
-        throw new Error('Should have new props');
-      }
-      return UPDATE_SIGNAL;
-    },
-
     shouldSetTextContent,
 
     createTextInstance(
@@ -764,7 +746,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         ): Instance {
           const clone = cloneInstance(
             instance,
-            null,
             type,
             props,
             props,
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index 546e44258378f..83520bb208d57 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -129,14 +129,6 @@ There is a second purpose to this method. It lets you specify whether there is s
 
 If you don't want to do anything here, you should return `false`.
 
-#### `prepareUpdate(instance, type, oldProps, newProps, rootContainer, hostContext)`
-
-React calls this method so that you can compare the previous and the next props, and decide whether you need to update the underlying instance or not. If you don't need to update it, return `null`. If you need to update it, you can return an arbitrary object representing the changes that need to happen. Then in `commitUpdate` you would need to apply those changes to the instance.
-
-This method happens **in the render phase**. It should only *calculate* the update — but not apply it! For example, the DOM renderer returns an array that looks like `[prop1, value1, prop2, value2, ...]` for all props that have actually changed. And only in `commitUpdate` it applies those changes. You should calculate as much as you can in `prepareUpdate` so that `commitUpdate` can be very fast and straightforward.
-
-See the meaning of `rootContainer` and `hostContext` in the `createInstance` documentation.
-
 #### `shouldSetTextContent(type, props)`
 
 Some target platforms support setting an instance's text content without manually creating a text node. For example, in the DOM, you can set `node.textContent` instead of creating a text node and appending it.
@@ -300,9 +292,9 @@ The `internalHandle` data structure is meant to be opaque. If you bend the rules
 
 If you never return `true` from `finalizeInitialChildren`, you can leave it empty.
 
-#### `commitUpdate(instance, updatePayload, type, prevProps, nextProps, internalHandle)`
+#### `commitUpdate(instance, type, prevProps, nextProps, internalHandle)`
 
-This method should mutate the `instance` according to the set of changes in `updatePayload`. Here, `updatePayload` is the object that you've returned from `prepareUpdate` and has an arbitrary structure that makes sense for your renderer. For example, the DOM renderer returns an update payload like `[prop1, value1, prop2, value2, ...]` from `prepareUpdate`, and that structure gets passed into `commitUpdate`. Ideally, all the diffing and calculation should happen inside `prepareUpdate` so that `commitUpdate` can be fast and straightforward.
+This method should mutate the `instance` to match `nextProps`.
 
 The `internalHandle` data structure is meant to be opaque. If you bend the rules and rely on its internal fields, be aware that it may change significantly between versions. You're taking on additional maintenance risk by reading from it, and giving up all guarantees if you write something to it.
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index 93cd97e8adb01..96ba1d5963274 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -54,7 +54,6 @@ import {
   enableFloat,
   enableLegacyHidden,
   enableHostSingletons,
-  diffInCommitPhase,
   alwaysThrottleRetries,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -2693,23 +2692,17 @@ function commitMutationEffectsOnFiber(
             const updatePayload: null | UpdatePayload =
               (finishedWork.updateQueue: any);
             finishedWork.updateQueue = null;
-            if (updatePayload !== null || diffInCommitPhase) {
-              try {
-                commitUpdate(
-                  finishedWork.stateNode,
-                  updatePayload,
-                  finishedWork.type,
-                  current.memoizedProps,
-                  finishedWork.memoizedProps,
-                  finishedWork,
-                );
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
+            try {
+              commitUpdate(
+                finishedWork.stateNode,
+                updatePayload,
+                finishedWork.type,
+                current.memoizedProps,
+                finishedWork.memoizedProps,
+                finishedWork,
+              );
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
             }
           }
         }
@@ -2777,23 +2770,17 @@ function commitMutationEffectsOnFiber(
             const updatePayload: null | UpdatePayload =
               (finishedWork.updateQueue: any);
             finishedWork.updateQueue = null;
-            if (updatePayload !== null || diffInCommitPhase) {
-              try {
-                commitUpdate(
-                  instance,
-                  updatePayload,
-                  type,
-                  oldProps,
-                  newProps,
-                  finishedWork,
-                );
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
+            try {
+              commitUpdate(
+                instance,
+                updatePayload,
+                type,
+                oldProps,
+                newProps,
+                finishedWork,
+              );
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
             }
           }
         }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
index 7071b211fa4e8..ec46a5932f5ca 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -38,7 +38,6 @@ import {
   enableCache,
   enableTransitionTracing,
   enableFloat,
-  diffInCommitPhase,
 } from 'shared/ReactFeatureFlags';
 
 import {now} from './Scheduler';
@@ -97,7 +96,6 @@ import {
   resolveSingletonInstance,
   appendInitialChild,
   finalizeInitialChildren,
-  prepareUpdate,
   supportsMutation,
   supportsPersistence,
   supportsResources,
@@ -431,33 +429,7 @@ function updateHostComponent(
       return;
     }
 
-    if (diffInCommitPhase) {
-      markUpdate(workInProgress);
-    } else {
-      // If we get updated because one of our children updated, we don't
-      // have newProps so we'll have to reuse them.
-      // TODO: Split the update API as separate for the props vs. children.
-      // Even better would be if children weren't special cased at all tho.
-      const instance: Instance = workInProgress.stateNode;
-      // TODO: Experiencing an error where oldProps is null. Suggests a host
-      // component is hitting the resume path. Figure out why. Possibly
-      // related to `hidden`.
-      const currentHostContext = getHostContext();
-      const updatePayload = prepareUpdate(
-        instance,
-        type,
-        oldProps,
-        newProps,
-        currentHostContext,
-      );
-      // TODO: Type this specific to this type of component.
-      workInProgress.updateQueue = (updatePayload: any);
-      // If the update payload indicates that there is a change or if there
-      // is a new ref we mark this as an update. All the work is done in commitWork.
-      if (updatePayload) {
-        markUpdate(workInProgress);
-      }
-    }
+    markUpdate(workInProgress);
   } else if (supportsPersistence) {
     const currentInstance = current.stateNode;
     const oldProps = current.memoizedProps;
@@ -472,27 +444,8 @@ function updateHostComponent(
     }
     const recyclableInstance: Instance = workInProgress.stateNode;
     const currentHostContext = getHostContext();
-    let updatePayload = null;
-    if (!diffInCommitPhase) {
-      if (oldProps !== newProps) {
-        updatePayload = prepareUpdate(
-          recyclableInstance,
-          type,
-          oldProps,
-          newProps,
-          currentHostContext,
-        );
-      }
-      if (childrenUnchanged && updatePayload === null) {
-        // No changes, just reuse the existing instance.
-        // Note that this might release a previous clone.
-        workInProgress.stateNode = currentInstance;
-        return;
-      }
-    }
     const newInstance = cloneInstance(
       currentInstance,
-      updatePayload,
       type,
       oldProps,
       newProps,
@@ -500,7 +453,7 @@ function updateHostComponent(
       childrenUnchanged,
       recyclableInstance,
     );
-    if (diffInCommitPhase && newInstance === currentInstance) {
+    if (newInstance === currentInstance) {
       // No changes, just reuse the existing instance.
       // Note that this might release a previous clone.
       workInProgress.stateNode = currentInstance;
@@ -1158,7 +1111,7 @@ function completeWork(
           } else {
             // This is a Hoistable Instance
             // We may have props to update on the Hoistable instance.
-            if (diffInCommitPhase && supportsMutation) {
+            if (supportsMutation) {
               const oldProps = current.memoizedProps;
               if (oldProps !== newProps) {
                 markUpdate(workInProgress);
@@ -1195,7 +1148,7 @@ function completeWork(
         const rootContainerInstance = getRootHostContainer();
         const type = workInProgress.type;
         if (current !== null && workInProgress.stateNode != null) {
-          if (diffInCommitPhase && supportsMutation) {
+          if (supportsMutation) {
             const oldProps = current.memoizedProps;
             if (oldProps !== newProps) {
               markUpdate(workInProgress);
@@ -1296,13 +1249,7 @@ function completeWork(
         if (wasHydrated) {
           // TODO: Move this and createInstance step into the beginPhase
           // to consolidate.
-          if (
-            prepareToHydrateHostInstance(workInProgress, currentHostContext)
-          ) {
-            // If changes to the hydrated node need to be applied at the
-            // commit-phase we mark this as such.
-            markUpdate(workInProgress);
-          }
+          prepareToHydrateHostInstance(workInProgress, currentHostContext);
         } else {
           const rootContainerInstance = getRootHostContainer();
           const instance = createInstance(
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
index dac3d5f2de132..c1ee83c2c8e71 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -38,7 +38,6 @@ import {
 import {
   enableHostSingletons,
   enableClientRenderFallbackOnTextMismatch,
-  diffInCommitPhase,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -628,7 +627,7 @@ export function tryToClaimNextHydratableFormMarkerInstance(
 function prepareToHydrateHostInstance(
   fiber: Fiber,
   hostContext: HostContext,
-): boolean {
+): void {
   if (!supportsHydration) {
     throw new Error(
       'Expected prepareToHydrateHostInstance() to never be called. ' +
@@ -638,7 +637,7 @@ function prepareToHydrateHostInstance(
 
   const instance: Instance = fiber.stateNode;
   const shouldWarnIfMismatchDev = !didSuspendOrErrorDEV;
-  const updatePayload = hydrateInstance(
+  hydrateInstance(
     instance,
     fiber.type,
     fiber.memoizedProps,
@@ -646,17 +645,6 @@ function prepareToHydrateHostInstance(
     fiber,
     shouldWarnIfMismatchDev,
   );
-
-  // TODO: Type this specific to this type of component.
-  if (!diffInCommitPhase) {
-    fiber.updateQueue = (updatePayload: any);
-    // If the update payload indicates that there is a change or if there
-    // is a new ref we mark this as an update.
-    if (updatePayload !== null) {
-      return true;
-    }
-  }
-  return false;
 }
 
 function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
diff --git a/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
index 13b7a8bd96049..dcb402013f796 100644
--- a/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js
@@ -49,7 +49,6 @@ export const resetAfterCommit = $$$config.resetAfterCommit;
 export const createInstance = $$$config.createInstance;
 export const appendInitialChild = $$$config.appendInitialChild;
 export const finalizeInitialChildren = $$$config.finalizeInitialChildren;
-export const prepareUpdate = $$$config.prepareUpdate;
 export const shouldSetTextContent = $$$config.shouldSetTextContent;
 export const createTextInstance = $$$config.createTextInstance;
 export const scheduleTimeout = $$$config.scheduleTimeout;
diff --git a/packages/react-test-renderer/src/ReactFiberConfigTestHost.js b/packages/react-test-renderer/src/ReactFiberConfigTestHost.js
index 2fb448d63c8d2..e374b25922b99 100644
--- a/packages/react-test-renderer/src/ReactFiberConfigTestHost.js
+++ b/packages/react-test-renderer/src/ReactFiberConfigTestHost.js
@@ -54,12 +54,10 @@ export * from 'react-reconciler/src/ReactFiberConfigWithNoResources';
 export * from 'react-reconciler/src/ReactFiberConfigWithNoSingletons';
 
 const NO_CONTEXT = {};
-const UPDATE_SIGNAL = {};
 const nodeToInstanceMap = new WeakMap<any, Instance>();
 
 if (__DEV__) {
   Object.freeze(NO_CONTEXT);
-  Object.freeze(UPDATE_SIGNAL);
 }
 
 export function getPublicInstance(inst: Instance | TextInstance): $FlowFixMe {
@@ -186,17 +184,6 @@ export function finalizeInitialChildren(
   return false;
 }
 
-export function prepareUpdate(
-  testElement: Instance,
-  type: string,
-  oldProps: Props,
-  newProps: Props,
-  rootContainerInstance: Container,
-  hostContext: Object,
-): null | {...} {
-  return UPDATE_SIGNAL;
-}
-
 export function shouldSetTextContent(type: string, props: Props): boolean {
   return false;
 }
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 44dc2ce07c064..0a70b8cbe3818 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -118,9 +118,6 @@ export const enableUseEffectEventHook = __EXPERIMENTAL__;
 // (handled with an MutationObserver) instead of inline-scripts
 export const enableFizzExternalRuntime = true;
 
-// Performance related test
-export const diffInCommitPhase = __EXPERIMENTAL__;
-
 export const enableAsyncActions = __EXPERIMENTAL__;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index ec7d4e6cf5831..299fd43418410 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -85,7 +85,6 @@ export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index c70b20b57fda1..6eec17ea53046 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -73,7 +73,6 @@ export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
 export const enableDeferRootSchedulingToMicrotask = true;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 86f2d6ff6d3b4..7bc3b64e0fd69 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -73,7 +73,6 @@ export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
 export const enableDeferRootSchedulingToMicrotask = true;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 50717886640ea..e54353abd6f4f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -70,7 +70,6 @@ export const useModernStrictMode = false;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableDeferRootSchedulingToMicrotask = true;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7ac6b230bcaf8..dc90c6f837103 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -73,7 +73,6 @@ export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
 export const enableFizzExternalRuntime = false;
 export const enableDeferRootSchedulingToMicrotask = true;
 
-export const diffInCommitPhase = true;
 export const enableAsyncActions = false;
 
 export const alwaysThrottleRetries = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index a1197be405837..db3adeb56d770 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -25,7 +25,6 @@ export const enableUnifiedSyncLane = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 export const enableCustomElementPropertySupport = __VARIANT__;
 export const enableDeferRootSchedulingToMicrotask = __VARIANT__;
-export const diffInCommitPhase = __VARIANT__;
 export const enableAsyncActions = __VARIANT__;
 export const alwaysThrottleRetries = __VARIANT__;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 466e0a5aa18e1..ef2ef9d933690 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -27,7 +27,6 @@ export const {
   enableTransitionTracing,
   enableCustomElementPropertySupport,
   enableDeferRootSchedulingToMicrotask,
-  diffInCommitPhase,
   enableAsyncActions,
   alwaysThrottleRetries,
   enableDO_NOT_USE_disableStrictPassiveEffect,