fix: update intersection callback ref every time prop change (#1096)

Author: danilowoz

sandpack-react/src/Playground.stories.tsx

@@ -9,15 +9,14 @@ export default {
 
 export const Basic: React.FC = () => {
   return (
-    <>
-      {new Array(10).fill(null).map((_, index) => (
-        <Sandpack
-          options={{
-            initMode: "user-visible",
-          }}
-          template="static"
-        />
-      ))}
-    </>
+    <div style={{ height: "400vh" }}>
+      <Sandpack
+        options={{
+          initMode: "user-visible",
+          bundlerURL: "https://786946de.sandpack-bundler-4bw.pages.dev",
+        }}
+        template="react"
+      />
+    </div>
   );
 };

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

@@ -89,6 +89,12 @@ export const useClient: UseClient = (
   /**
    * Refs
    */
+  type InterserctionObserverCallback = (
+    entries: IntersectionObserverEntry[]
+  ) => void;
+  const intersectionObserverCallback = useRef<
+    InterserctionObserverCallback | undefined
+  >();
   const intersectionObserver = useRef<IntersectionObserver | null>(null);
   const lazyAnchorRef = useRef<HTMLDivElement>(null);
   const registeredIframes = useRef<
@@ -233,6 +239,14 @@ export const useClient: UseClient = (
     setState((prev) => ({ ...prev, error: null, status: "running" }));
   }, [createClient]);
 
+  intersectionObserverCallback.current = (
+    entries: IntersectionObserverEntry[]
+  ): void => {
+    if (entries.some((entry) => entry.isIntersecting)) {
+      runSandpack();
+    }
+  };
+
   const initializeSandpackIframe = useCallback((): void => {
     const autorun = options?.autorun ?? true;
 
@@ -252,23 +266,14 @@ export const useClient: UseClient = (
       // If any component registered a lazy anchor ref component, use that for the intersection observer
       intersectionObserver.current = new IntersectionObserver((entries) => {
         if (entries.some((entry) => entry.isIntersecting)) {
-          runSandpack();
-
-          if (lazyAnchorRef.current) {
-            intersectionObserver.current?.unobserve(lazyAnchorRef.current);
-          }
+          intersectionObserverCallback.current?.(entries);
         }
       }, observerOptions);
 
       intersectionObserver.current.observe(lazyAnchorRef.current);
     } else if (lazyAnchorRef.current && state.initMode === "user-visible") {
       intersectionObserver.current = new IntersectionObserver((entries) => {
-        if (entries.some((entry) => entry.isIntersecting)) {
-          runSandpack();
-        } else {
-          Object.keys(clients.current).map(unregisterBundler);
-          unregisterAllClients();
-        }
+        intersectionObserverCallback.current?.(entries);
       }, observerOptions);
 
       intersectionObserver.current.observe(lazyAnchorRef.current);
@@ -371,7 +376,7 @@ export const useClient: UseClient = (
   };
 
   const recompileMode = options?.recompileMode ?? "delayed";
-  const recompileDelay = options?.recompileDelay ?? 500;
+  const recompileDelay = options?.recompileDelay ?? 200;
 
   const dispatchMessage = (
     message: SandpackMessage,