fix(use-files): watch prop keys changes (#776)

sandpack-react/package.json

@@ -54,8 +54,7 @@
     "dequal": "^2.0.2",
     "lz-string": "^1.4.4",
     "react-devtools-inline": "4.4.0",
-    "react-is": "^17.0.2",
-    "use-deep-compare-effect": "1.8.1"
+    "react-is": "^17.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",

sandpack-react/src/contexts/utils/useFiles.ts

@@ -1,7 +1,6 @@
 import type { SandpackBundlerFiles } from "@codesandbox/sandpack-client";
 import { normalizePath } from "@codesandbox/sandpack-client";
-import { useState } from "react";
-import useDeepCompareEffect from "use-deep-compare-effect";
+import { useEffect, useState } from "react";
 
 import type {
   SandboxEnvironment,
@@ -57,9 +56,9 @@ export const useFiles: UseFiles = (props) => {
 
   const [state, setState] = useState<FilesState>(originalStateFromProps);
 
-  useDeepCompareEffect(() => {
+  useEffect(() => {
     setState(getSandpackStateFromProps(props));
-  }, [props]);
+  }, [props.files, props.customSetup, props.template]);
 
   const updateFile = (
     pathOrFiles: string | SandpackFiles,

yarn.lock

@@ -18779,14 +18779,6 @@ use-clipboard-copy@^0.2.0:
   dependencies:
     clipboard-copy "^3.0.0"
 
-use-deep-compare-effect@1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6"
-  integrity sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    dequal "^2.0.2"
-
 use-sync-external-store@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"