perf(web): the file save coordinator compiles without manual memoization

apps/web/src/components/files/useFileSaveCoordinator.ts

@@ -1,5 +1,5 @@
 import { AuthFilesystemWriteScope, type EnvironmentId } from "@t3tools/contracts";
-import { createRef, useEffect, useMemo } from "react";
+import { createRef, useEffect, useState } from "react";
 
 import { projectEnvironment } from "~/state/projects";
 import { readEnvironmentScope, useEnvironmentScope } from "~/state/session";
@@ -27,32 +27,24 @@ export function useFileSaveCoordinator({
   onPendingChange,
 }: FileSaveOptions): Pick<FileSaveCoordinator, "change"> {
   const canWriteFiles = useEnvironmentScope(environmentId, AuthFilesystemWriteScope);
-  const writeFile = useAtomCommand(projectEnvironment.writeFile);
-  const session = useMemo(() => {
-    const coordinatorRef = createRef<FileSaveCoordinator>();
-    return {
-      change: (contents: string) => coordinatorRef.current?.change(contents),
-      setup: () => {
-        const coordinator = new FileSaveCoordinator({
-          debounceMs: FILE_SAVE_DEBOUNCE_MS,
-          canPersist: () => readEnvironmentScope(environmentId, AuthFilesystemWriteScope),
-          onPendingChange: (pending) => onPendingChange(relativePath, pending),
-          persist: (nextContents) =>
-            writeFile({
-              environmentId,
-              input: { cwd, relativePath, contents: nextContents },
-            }),
-          onConfirmed: (confirmedContents) =>
-            confirmProjectFileQueryData(environmentId, cwd, relativePath, confirmedContents),
-        });
-        coordinatorRef.current = coordinator;
-        return () => {
-          coordinatorRef.current = null;
-          coordinator.dispose();
-        };
-      },
-    };
-  }, [cwd, environmentId, onPendingChange, relativePath, writeFile]);
+  const writeFile = useProjectFileWriter();
+  // A session owns the pending debounce, so it must outlive rerenders and be
+  // replaced only when what it writes to changes.
+  const inputs = { environmentId, cwd, relativePath, onPendingChange, writeFile };
+  const [current, setCurrent] = useState(() => ({
+    inputs,
+    session: createFileSaveSession(inputs),
+  }));
+  if (
+    current.inputs.environmentId !== environmentId ||
+    current.inputs.cwd !== cwd ||
+    current.inputs.relativePath !== relativePath ||
+    current.inputs.onPendingChange !== onPendingChange ||
+    current.inputs.writeFile !== writeFile
+  ) {
+    setCurrent({ inputs, session: createFileSaveSession(inputs) });
+  }
+  const session = current.session;
 
   // StrictMode replays effect setup. Retired file sessions stay inert, while the
   // replay gets a fresh coordinator instead of reusing a disposed one.
@@ -72,3 +64,41 @@ export function useFileSaveCoordinator({
   }, [canWriteFiles, cwd, environmentId, relativePath, session]);
   return session;
 }
+
+function useProjectFileWriter() {
+  return useAtomCommand(projectEnvironment.writeFile);
+}
+
+function createFileSaveSession({
+  environmentId,
+  cwd,
+  relativePath,
+  onPendingChange,
+  writeFile,
+}: FileSaveOptions & {
+  writeFile: ReturnType<typeof useProjectFileWriter>;
+}) {
+  const coordinatorRef = createRef<FileSaveCoordinator>();
+  return {
+    change: (contents: string) => coordinatorRef.current?.change(contents),
+    setup: () => {
+      const coordinator = new FileSaveCoordinator({
+        debounceMs: FILE_SAVE_DEBOUNCE_MS,
+        canPersist: () => readEnvironmentScope(environmentId, AuthFilesystemWriteScope),
+        onPendingChange: (pending) => onPendingChange(relativePath, pending),
+        persist: (nextContents) =>
+          writeFile({
+            environmentId,
+            input: { cwd, relativePath, contents: nextContents },
+          }),
+        onConfirmed: (confirmedContents) =>
+          confirmProjectFileQueryData(environmentId, cwd, relativePath, confirmedContents),
+      });
+      coordinatorRef.current = coordinator;
+      return () => {
+        coordinatorRef.current = null;
+        coordinator.dispose();
+      };
+    },
+  };
+}