Update 3 files

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>

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,

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;