From f6c775f2b9fd49dd6aac4cace0d496bf3bfc3064 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Mon, 22 May 2023 19:17:05 +0000
Subject: [PATCH] Update 3 files

---
 sandpack-react/src/Issues.stories.tsx         | 33 +++++++++++++++++++
 .../src/contexts/utils/useClient.ts           |  6 ++++
 sandpack-react/src/contexts/utils/useFiles.ts |  1 +
 3 files changed, 40 insertions(+)

diff --git a/sandpack-react/src/Issues.stories.tsx b/sandpack-react/src/Issues.stories.tsx
index c57bdd65b..50c65ae57 100644
--- a/sandpack-react/src/Issues.stories.tsx
+++ b/sandpack-react/src/Issues.stories.tsx
@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useState } from "react";
 
+import { REACT_TEMPLATE } from "./templates";
+
 import {
   Sandpack,
   SandpackCodeEditor,
@@ -13,6 +15,37 @@ export default {
   title: "Bug reports/Issues",
 };
 
+export const Issue944 = (): JSX.Element => {
+  const [files, setFiles] = useState(REACT_TEMPLATE["files"]);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setFiles(REACT_TEMPLATE["files"]);
+        }}
+      >
+        1
+      </button>
+      <button
+        onClick={() => {
+          setFiles({
+            ...REACT_TEMPLATE["files"],
+            "/App.js": `import Foo from "./Foo";
+export default function App() {
+  return <Foo />
+}`,
+            "Foo.js": `export default () => <button> Foo</button>`,
+          });
+        }}
+      >
+        2
+      </button>
+      <Sandpack files={files} template="react" />
+    </>
+  );
+};
+
 export const FlushServerVsClient = (): JSX.Element => {
   return (
     <SandpackProvider>
diff --git a/sandpack-react/src/contexts/utils/useClient.ts b/sandpack-react/src/contexts/utils/useClient.ts
index a8539adab..0dd6bc172 100644
--- a/sandpack-react/src/contexts/utils/useClient.ts
+++ b/sandpack-react/src/contexts/utils/useClient.ts
@@ -473,6 +473,8 @@ export const useClient: UseClient = (
         return;
       }
 
+      console.log(recompileMode, filesState);
+
       /**
        * When the environment changes, Sandpack needs to make sure
        * to create a new client and the proper bundler
@@ -507,6 +509,10 @@ export const useClient: UseClient = (
           });
         }, recompileDelay);
       }
+
+      return () => {
+        window.clearTimeout(debounceHook.current);
+      };
     },
     [
       filesState.files,
diff --git a/sandpack-react/src/contexts/utils/useFiles.ts b/sandpack-react/src/contexts/utils/useFiles.ts
index fa59c2dcf..58db862a9 100644
--- a/sandpack-react/src/contexts/utils/useFiles.ts
+++ b/sandpack-react/src/contexts/utils/useFiles.ts
@@ -59,6 +59,7 @@ export const useFiles: UseFiles = (props) => {
   const isMountedRef = useRef(false);
   useEffect(() => {
     if (isMountedRef.current) {
+      console.log("changed");
       setState(getSandpackStateFromProps(props));
     } else {
       isMountedRef.current = true;