Support module.property.useHook() in Fast Refresh

packages/react-refresh/src/ReactFreshBabelPlugin.js

@@ -304,6 +304,12 @@ export default function (babel, opts = {}) {
           if (callee.object.type === 'Identifier') {
             bindingName = callee.object.name;
           }
+          if (
+            callee.object.type === 'MemberExpression' &&
+            callee.object.object.type === 'Identifier'
+          ) {
+            bindingName = callee.object.object.name;
+          }
           break;
         case 'Identifier':
           bindingName = callee.name;

packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js

@@ -453,6 +453,19 @@ describe('ReactFreshBabelPlugin', () => {
     ).toMatchSnapshot();
   });
 
+  it('generates valid signature for nested ways to call Hooks', () => {
+    expect(
+      transform(`
+        import FancyHook from 'fancy';
+
+        export default function App() {
+          const foo = FancyHook.property.useNestedThing();
+          return <h1>{foo}</h1>;
+        }
+    `),
+    ).toMatchSnapshot();
+  });
+
   it('does not consider require-like methods to be HOCs', () => {
     // None of these were declared in this file.
     // It's bad to register them because that would trigger

packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap

@@ -151,6 +151,22 @@ var _c;
 $RefreshReg$(_c, "App");
 `;
 
+exports[`ReactFreshBabelPlugin generates valid signature for nested ways to call Hooks 1`] = `
+var _s = $RefreshSig$();
+import FancyHook from 'fancy';
+export default function App() {
+  _s();
+  const foo = FancyHook.property.useNestedThing();
+  return <h1>{foo}</h1>;
+}
+_s(App, "useNestedThing{foo}", false, function () {
+  return [FancyHook.property.useNestedThing];
+});
+_c = App;
+var _c;
+$RefreshReg$(_c, "App");
+`;
+
 exports[`ReactFreshBabelPlugin ignores HOC definitions 1`] = `
 let connect = () => {
   function Comp() {