Make React Refresh debounce call on the leading edge (#8593)

packages/transformers/react-refresh-wrap/src/helpers/helpers.js

@@ -6,13 +6,25 @@ function debounce(func, delay) {
       func.call(null, args);
     };
   } else {
-    var timeout = undefined;
+    let timeout = undefined;
+    let lastTime = 0;
     return function (args) {
-      clearTimeout(timeout);
-      timeout = setTimeout(function () {
-        timeout = undefined;
+      // Call immediately if last call was more than the delay ago.
+      // Otherwise, set a timeout. This means the first call is fast
+      // (for the common case of a single update), and subsequent updates
+      // are batched.
+      let now = Date.now();
+      if (now - lastTime > delay) {
+        lastTime = now;
         func.call(null, args);
-      }, delay);
+      } else {
+        clearTimeout(timeout);
+        timeout = setTimeout(function () {
+          timeout = undefined;
+          lastTime = Date.now();
+          func.call(null, args);
+        }, delay);
+      }
     };
   }
 }