[Fresh] Always remount classes (facebook#16823)

gaearon · Sep 18, 2019 · 658aec7 · 658aec7
1 parent acfdc97
commit 658aec7
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.js b/packages/react-reconciler/src/ReactFiberHotReloading.js
@@ -296,7 +296,11 @@ function scheduleFibersWithFamiliesRecursively(
         if (staleFamilies.has(family)) {
           needsRemount = true;
         } else if (updatedFamilies.has(family)) {
-          needsRender = true;
+          if (tag === ClassComponent) {
+            needsRemount = true;
+          } else {
+            needsRender = true;
+          }
         }
       }
     }

diff --git a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -1299,6 +1299,53 @@ describe('ReactFreshIntegration', () => {
       }
     });
 
+    it('remounts deprecated factory components', () => {
+      if (__DEV__) {
+        expect(() => {
+          render(`
+            function Parent() {
+              return {
+                render() {
+                  return <Child prop="A" />;
+                }
+              };
+            };
+
+            function Child({prop}) {
+              return <h1>{prop}1</h1>;
+            };
+
+            export default Parent;
+          `);
+        }).toWarnDev(
+          'The <Parent /> component appears to be a function component ' +
+            'that returns a class instance.',
+          {withoutStack: true},
+        );
+        const el = container.firstChild;
+        expect(el.textContent).toBe('A1');
+        patch(`
+          function Parent() {
+            return {
+              render() {
+                return <Child prop="B" />;
+              }
+            };
+          };
+
+          function Child({prop}) {
+            return <h1>{prop}2</h1>;
+          };
+
+          export default Parent;
+        `);
+        // Like classes, factory components always remount.
+        expect(container.firstChild).not.toBe(el);
+        const newEl = container.firstChild;
+        expect(newEl.textContent).toBe('B2');
+      }
+    });
+
     describe('with inline requires', () => {
       beforeEach(() => {
         global.FakeModuleSystem = {};