Refactor: Add resolveClassComponentProps

acdlite · acdlite · commit 1becfaf01f01 · 2024-04-02T13:38:53.000-04:00
There are a few places in the reconciler where we modify the fiber's
internal props object before passing it to userspace. The trickiest one
is class components, because the props object gets exposed in many
different places, including as a property on the class instance.

This was already accounted for when we added support for setting
default props on a lazy wrapper (i.e. React.lazy that resolves to a
class component).

In all of these same places, we will also need to remove the ref prop
when enableRefAsProp is on.

As a first step, this adds a new function, resolveClassComponentProps,
where both default prop resolution and ref prop removal will happen.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -239,6 +239,7 @@ import {
   mountClassInstance,
   resumeMountClassInstance,
   updateClassInstance,
+  resolveClassComponentProps,
 } from './ReactFiberClassComponent';
 import {resolveDefaultProps} from './ReactFiberLazyComponent';
 import {
@@ -1698,10 +1699,10 @@ function mountLazyComponent(
   // Store the unwrapped component in the type.
   workInProgress.type = Component;
   const resolvedTag = (workInProgress.tag = resolveLazyComponentTag(Component));
-  const resolvedProps = resolveDefaultProps(Component, props);
   let child;
   switch (resolvedTag) {
     case FunctionComponent: {
+      const resolvedProps = resolveDefaultProps(Component, props);
       if (__DEV__) {
         validateFunctionComponentInDev(workInProgress, Component);
         workInProgress.type = Component =
@@ -1717,6 +1718,7 @@ function mountLazyComponent(
       return child;
     }
     case ClassComponent: {
+      const resolvedProps = resolveClassComponentProps(Component, props, false);
       if (__DEV__) {
         workInProgress.type = Component =
           resolveClassForHotReloading(Component);
@@ -1731,6 +1733,7 @@ function mountLazyComponent(
       return child;
     }
     case ForwardRef: {
+      const resolvedProps = resolveDefaultProps(Component, props);
       if (__DEV__) {
         workInProgress.type = Component =
           resolveForwardRefForHotReloading(Component);
@@ -1745,6 +1748,7 @@ function mountLazyComponent(
       return child;
     }
     case MemoComponent: {
+      const resolvedProps = resolveDefaultProps(Component, props);
       child = updateMemoComponent(
         null,
         workInProgress,
@@ -4007,10 +4011,11 @@ function beginWork(
     case ClassComponent: {
       const Component = workInProgress.type;
       const unresolvedProps = workInProgress.pendingProps;
-      const resolvedProps =
-        workInProgress.elementType === Component
-          ? unresolvedProps
-          : resolveDefaultProps(Component, unresolvedProps);
+      const resolvedProps = resolveClassComponentProps(
+        Component,
+        unresolvedProps,
+        workInProgress.elementType === Component,
+      );
       return updateClassComponent(
         current,
         workInProgress,
@@ -4090,10 +4095,11 @@ function beginWork(
     case IncompleteClassComponent: {
       const Component = workInProgress.type;
       const unresolvedProps = workInProgress.pendingProps;
-      const resolvedProps =
-        workInProgress.elementType === Component
-          ? unresolvedProps
-          : resolveDefaultProps(Component, unresolvedProps);
+      const resolvedProps = resolveClassComponentProps(
+        Component,
+        unresolvedProps,
+        workInProgress.elementType === Component,
+      );
       return mountIncompleteClassComponent(
         current,
         workInProgress,
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js
@@ -34,7 +34,6 @@ import assign from 'shared/assign';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_CONSUMER_TYPE} from 'shared/ReactSymbols';
 
-import {resolveDefaultProps} from './ReactFiberLazyComponent';
 import {
   DebugTracingMode,
   NoMode,
@@ -1056,10 +1055,11 @@ function updateClassInstance(
   cloneUpdateQueue(current, workInProgress);
 
   const unresolvedOldProps = workInProgress.memoizedProps;
-  const oldProps =
-    workInProgress.type === workInProgress.elementType
-      ? unresolvedOldProps
-      : resolveDefaultProps(workInProgress.type, unresolvedOldProps);
+  const oldProps = resolveClassComponentProps(
+    ctor,
+    unresolvedOldProps,
+    workInProgress.type === workInProgress.elementType,
+  );
   instance.props = oldProps;
   const unresolvedNewProps = workInProgress.pendingProps;
 
@@ -1229,6 +1229,34 @@ function updateClassInstance(
   return shouldUpdate;
 }
 
+export function resolveClassComponentProps(
+  Component: any,
+  baseProps: Object,
+  // Only resolve default props if this is a lazy component. Otherwise, they
+  // would have already been resolved by the JSX runtime.
+  // TODO: We're going to remove default prop resolution from the JSX runtime
+  // and keep it only for class components. As part of that change, we should
+  // remove this extra check.
+  alreadyResolvedDefaultProps: boolean,
+): Object {
+  let newProps = baseProps;
+
+  // Resolve default props. Taken from old JSX runtime, where this used to live.
+  const defaultProps = Component.defaultProps;
+  if (defaultProps && !alreadyResolvedDefaultProps) {
+    newProps = assign({}, newProps, baseProps);
+    for (const propName in defaultProps) {
+      if (newProps[propName] === undefined) {
+        newProps[propName] = defaultProps[propName];
+      }
+    }
+  }
+
+  // TODO: Remove ref from props object
+
+  return newProps;
+}
+
 export {
   constructClassInstance,
   mountClassInstance,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -103,7 +103,7 @@ import {
   setCurrentFiber as setCurrentDebugFiberInDEV,
   getCurrentFiber as getCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-import {resolveDefaultProps} from './ReactFiberLazyComponent';
+import {resolveClassComponentProps} from './ReactFiberClassComponent';
 import {
   isCurrentUpdateNested,
   getCommitTime,
@@ -470,7 +470,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
           // TODO: revisit this when we implement resuming.
           if (__DEV__) {
             if (
-              finishedWork.type === finishedWork.elementType &&
+              !finishedWork.type.defaultProps &&
               !didWarnAboutReassigningProps
             ) {
               if (instance.props !== finishedWork.memoizedProps) {
@@ -496,9 +496,11 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
             }
           }
           const snapshot = instance.getSnapshotBeforeUpdate(
-            finishedWork.elementType === finishedWork.type
-              ? prevProps
-              : resolveDefaultProps(finishedWork.type, prevProps),
+            resolveClassComponentProps(
+              finishedWork.type,
+              prevProps,
+              finishedWork.elementType === finishedWork.type,
+            ),
             prevState,
           );
           if (__DEV__) {
@@ -805,10 +807,7 @@ function commitClassLayoutLifecycles(
     // but instead we rely on them being set during last render.
     // TODO: revisit this when we implement resuming.
     if (__DEV__) {
-      if (
-        finishedWork.type === finishedWork.elementType &&
-        !didWarnAboutReassigningProps
-      ) {
+      if (!finishedWork.type.defaultProps && !didWarnAboutReassigningProps) {
         if (instance.props !== finishedWork.memoizedProps) {
           console.error(
             'Expected %s props to match memoized props before ' +
@@ -847,19 +846,17 @@ function commitClassLayoutLifecycles(
       }
     }
   } else {
-    const prevProps =
-      finishedWork.elementType === finishedWork.type
-        ? current.memoizedProps
-        : resolveDefaultProps(finishedWork.type, current.memoizedProps);
+    const prevProps = resolveClassComponentProps(
+      finishedWork.type,
+      current.memoizedProps,
+      finishedWork.elementType === finishedWork.type,
+    );
     const prevState = current.memoizedState;
     // We could update instance props and state here,
     // but instead we rely on them being set during last render.
     // TODO: revisit this when we implement resuming.
     if (__DEV__) {
-      if (
-        finishedWork.type === finishedWork.elementType &&
-        !didWarnAboutReassigningProps
-      ) {
+      if (!finishedWork.type.defaultProps && !didWarnAboutReassigningProps) {
         if (instance.props !== finishedWork.memoizedProps) {
           console.error(
             'Expected %s props to match memoized props before ' +
@@ -916,10 +913,7 @@ function commitClassCallbacks(finishedWork: Fiber) {
   if (updateQueue !== null) {
     const instance = finishedWork.stateNode;
     if (__DEV__) {
-      if (
-        finishedWork.type === finishedWork.elementType &&
-        !didWarnAboutReassigningProps
-      ) {
+      if (!finishedWork.type.defaultProps && !didWarnAboutReassigningProps) {
         if (instance.props !== finishedWork.memoizedProps) {
           console.error(
             'Expected %s props to match memoized props before ' +
diff --git a/packages/react-reconciler/src/ReactFiberLazyComponent.js b/packages/react-reconciler/src/ReactFiberLazyComponent.js
@@ -10,6 +10,10 @@
 import assign from 'shared/assign';
 
 export function resolveDefaultProps(Component: any, baseProps: Object): Object {
+  // TODO: Remove support for default props for everything except class
+  // components, including setting default props on a lazy wrapper around a
+  // class type.
+
   if (Component && Component.defaultProps) {
     // Resolve default props. Taken from ReactElement
     const props = assign({}, baseProps);
