Recycle prevProps in simple memo based on the shallowEqual check

facebook · Apr 15, 2022 · bd13426 · bd13426
1 parent 4607937
commit bd13426
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -592,7 +592,11 @@ function updateSimpleMemoComponent(
   }
   if (current !== null) {
     const prevProps = current.memoizedProps;
-    nextProps = shallowEqual(prevProps, nextProps) ? prevProps : nextProps;
+    // potentially recycle `prevProps` if they are the same
+    // this allows hooks depending on the `props` to be reused
+    workInProgress.pendingProps = nextProps = shallowEqual(prevProps, nextProps)
+      ? prevProps
+      : nextProps;
     if (
       prevProps === nextProps &&
       current.ref === workInProgress.ref &&

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -592,7 +592,11 @@ function updateSimpleMemoComponent(
   }
   if (current !== null) {
     const prevProps = current.memoizedProps;
-    nextProps = shallowEqual(prevProps, nextProps) ? prevProps : nextProps;
+    // potentially recycle `prevProps` if they are the same
+    // this allows hooks depending on the `props` to be reused
+    workInProgress.pendingProps = nextProps = shallowEqual(prevProps, nextProps)
+      ? prevProps
+      : nextProps;
     if (
       prevProps === nextProps &&
       current.ref === workInProgress.ref &&

diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -222,6 +222,12 @@ describe('memo', () => {
         expect(ReactNoop.getChildren()).toEqual([
           span('Inner render count: 1'),
         ]);
+
+        ReactNoop.render(<Parent value={ctxValue++} />);
+        expect(Scheduler).toFlushAndYield([]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Inner render count: 1'),
+        ]);
       });
 
       it('accepts custom comparison function', async () => {