Added missing flow types to function params and added a test for memo…

… to forwardRef
facebook · Jan 22, 2025 · 47bbf1c · 47bbf1c
1 parent abecd9c
commit 47bbf1c
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 2 deletions.
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -200,8 +200,8 @@ function getProperty(object: any, property: string) {
 
 function registerRefreshUpdate(
   update: RefreshUpdate,
-  family,
-  shouldPreserveState,
+  family: Family,
+  shouldPreserveState: boolean,
 ) {
   if (shouldPreserveState) {
     update.updatedFamilies.add(family);

diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -751,6 +751,59 @@ describe('ReactFresh', () => {
     }
   });
 
+  it('can remount when change memo to forwardRef', async () => {
+    if (__DEV__) {
+      await act(async () => {
+        await render(() => {
+          function Test2() {
+            return <p>hi memo</p>;
+          }
+          const Test = React.memo(Test2);
+          $RefreshReg$(Test2, 'Test2');
+          $RefreshReg$(Test, 'Test');
+          return Test;
+        });
+      });
+      // Check the initial render
+      const el = container.firstChild;
+      expect(el.textContent).toBe('hi memo');
+
+      // Patch to change memo to forwardRef
+      await act(async () => {
+        await patch(() => {
+          function Test2() {
+            return <p>hi forwardRef</p>;
+          }
+          const Test = React.forwardRef(Test2);
+          $RefreshReg$(Test2, 'Test2');
+          $RefreshReg$(Test, 'Test');
+          return Test;
+        });
+      });
+      // Check remount
+      expect(container.firstChild).not.toBe(el);
+      const nextEl = container.firstChild;
+      expect(nextEl.textContent).toBe('hi forwardRef');
+
+      // Patch back to memo
+      await act(async () => {
+        await patch(() => {
+          function Test2() {
+            return <p>hi memo</p>;
+          }
+          const Test = React.memo(Test2);
+          $RefreshReg$(Test2, 'Test2');
+          $RefreshReg$(Test, 'Test');
+          return Test;
+        });
+      });
+      // Check final remount
+      expect(container.firstChild).not.toBe(nextEl);
+      const newEl = container.firstChild;
+      expect(newEl.textContent).toBe('hi memo');
+    }
+  });
+
   it('can remount when change function to forwardRef', async () => {
     if (__DEV__) {
       await act(async () => {