From 3426c13b38a0aae0d1a91c4a46d7461f93a5f1d3 Mon Sep 17 00:00:00 2001
From: Sunil Pai <spai@cloudflare.com>
Date: Mon, 3 Jan 2022 14:59:13 +0000
Subject: [PATCH] fix: prevent `dev` from infinitely restarting (#183)

---
 .changeset/new-candles-collect.md |  5 +++++
 packages/wrangler/src/dev.tsx     | 17 ++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/new-candles-collect.md

diff --git a/.changeset/new-candles-collect.md b/.changeset/new-candles-collect.md
new file mode 100644
index 000000000000..ec03d5f66de1
--- /dev/null
+++ b/.changeset/new-candles-collect.md
@@ -0,0 +1,5 @@
+---
+"wrangler": patch
+---
+
+fix: prevent `useWorker`'s inifinite restarts during `dev`
diff --git a/packages/wrangler/src/dev.tsx b/packages/wrangler/src/dev.tsx
index bf671bfd8090..67e7cd97915e 100644
--- a/packages/wrangler/src/dev.tsx
+++ b/packages/wrangler/src/dev.tsx
@@ -555,6 +555,12 @@ function useWorker(props: {
     port,
   } = props;
   const [token, setToken] = useState<CfPreviewToken>();
+
+  // This is the most reliable way to detect whether
+  // something's "happened" in our system; We make a ref and
+  // mark it once we log our initial message. Refs are vars!
+  const startedRef = useRef(false);
+
   useEffect(() => {
     async function start() {
       if (!bundle) return;
@@ -569,10 +575,11 @@ function useWorker(props: {
         return;
       }
 
-      if (token) {
-        console.log("⎔ Detected changes, restarting server...");
-      } else {
+      if (!startedRef.current) {
         console.log("⎔ Starting server...");
+        startedRef.current = true;
+      } else {
+        console.log("⎔ Detected changes, restarting server...");
       }
 
       const assets = sitesFolder
@@ -624,7 +631,6 @@ function useWorker(props: {
           apiToken,
         })
       );
-      console.log(`⬣ Listening at http://localhost:${port}`);
     }
     start().catch((err) => {
       // we want to log the error, but not end the process
@@ -644,7 +650,6 @@ function useWorker(props: {
     usageModel,
     bindings,
     modules,
-    token,
   ]);
   return token;
 }
@@ -681,6 +686,8 @@ function useProxy({
       },
     });
 
+    console.log(`⬣ Listening at http://localhost:${port}`);
+
     const server = proxy.listen(port);
 
     // TODO(soon): refactor logging format into its own function