Use function expression for custom Hook signature argument (#15956)

packages/react-refresh/src/ReactFreshBabelPlugin.js

@@ -306,7 +306,15 @@ export default function(babel) {
     }
     if (customHooksInScope.length > 0) {
       args.push(
-        t.arrowFunctionExpression([], t.arrayExpression(customHooksInScope)),
+        // TODO: We could use an arrow here to be more compact.
+        // However, don't do it until AMA can run them natively.
+        t.functionExpression(
+          null,
+          [],
+          t.blockStatement([
+            t.returnStatement(t.arrayExpression(customHooksInScope)),
+          ]),
+        ),
       );
     }
     return args;

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

@@ -113,7 +113,9 @@ export default function App() {
   return <h1>{bar}{baz}</h1>;
 }
 
-_s2(App, 'useFancyState{bar}\\nuseThing{baz}\\nuseState{}\\nuseThePlatform{}', true, () => [FancyHook.useThing]);
+_s2(App, 'useFancyState{bar}\\nuseThing{baz}\\nuseState{}\\nuseThePlatform{}', true, function () {
+  return [FancyHook.useThing];
+});
 
 _c = App;
 
@@ -186,7 +188,9 @@ function useFancyState() {
   return foo;
 }
 
-_s(useFancyState, "useState{[foo, setFoo](0)}\\nuseFancyEffect{}", false, () => [useFancyEffect]);
+_s(useFancyState, "useState{[foo, setFoo](0)}\\nuseFancyEffect{}", false, function () {
+  return [useFancyEffect];
+});
 
 const useFancyEffect = () => {
   _s2();
@@ -203,7 +207,9 @@ export default function App() {
   return <h1>{bar}</h1>;
 }
 
-_s3(App, "useFancyState{bar}", false, () => [useFancyState]);
+_s3(App, "useFancyState{bar}", false, function () {
+  return [useFancyState];
+});
 
 _c = App;