Fix useAtomSuspense registry isolation (#420)

Author: tim-smart

.changeset/fix-suspense-registry.md

@@ -0,0 +1,5 @@
+---
+"@effect-atom/atom-react": patch
+---
+
+Scope suspense promises to their registry.

packages/atom-react/src/Hooks.ts

@@ -209,8 +209,8 @@ export const useAtom = <R, W, const Mode extends "value" | "promise" | "promiseE
 const atomPromiseMap = globalValue(
   "@effect-atom/atom-react/atomPromiseMap",
   () => ({
-    suspendOnWaiting: new Map<Atom.Atom<any>, Promise<void>>(),
-    default: new Map<Atom.Atom<any>, Promise<void>>()
+    suspendOnWaiting: new WeakMap<Registry.Registry, WeakMap<Atom.Atom<any>, Promise<void>>>(),
+    default: new WeakMap<Registry.Registry, WeakMap<Atom.Atom<any>, Promise<void>>>()
   })
 )
 
@@ -219,7 +219,12 @@ function atomToPromise<A, E>(
   atom: Atom.Atom<Result.Result<A, E>>,
   suspendOnWaiting: boolean
 ) {
-  const map = suspendOnWaiting ? atomPromiseMap.suspendOnWaiting : atomPromiseMap.default
+  const registries = suspendOnWaiting ? atomPromiseMap.suspendOnWaiting : atomPromiseMap.default
+  let map = registries.get(registry)
+  if (map === undefined) {
+    map = new WeakMap()
+    registries.set(registry, map)
+  }
   let promise = map.get(atom)
   if (promise !== undefined) {
     return promise

packages/atom-react/test/index.test.tsx

@@ -128,6 +128,49 @@ describe("atom-react", () => {
 
       expect(screen.getByTestId("loading")).toBeInTheDocument()
     })
+
+    test("suspense subscriptions are isolated per registry", async () => {
+      const atom = Atom.make<Result.Result<string>>(Result.initial())
+      const firstRegistry = Registry.make()
+      const secondRegistry = Registry.make()
+
+      function TestComponent({ id }: { readonly id: string }) {
+        const value = useAtomSuspense(atom).value
+        return <div data-testid={`${id}-value`}>{value}</div>
+      }
+
+      render(
+        <RegistryContext.Provider value={firstRegistry}>
+          <Suspense fallback={<div data-testid="first-loading">Loading...</div>}>
+            <TestComponent id="first" />
+          </Suspense>
+        </RegistryContext.Provider>
+      )
+      render(
+        <RegistryContext.Provider value={secondRegistry}>
+          <Suspense fallback={<div data-testid="second-loading">Loading...</div>}>
+            <TestComponent id="second" />
+          </Suspense>
+        </RegistryContext.Provider>
+      )
+
+      act(() => {
+        secondRegistry.set(atom, Result.success("second"))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId("second-value")).toHaveTextContent("second")
+      })
+      expect(screen.getByTestId("first-loading")).toBeInTheDocument()
+
+      act(() => {
+        firstRegistry.set(atom, Result.success("first"))
+      })
+
+      await waitFor(() => {
+        expect(screen.getByTestId("first-value")).toHaveTextContent("first")
+      })
+    })
   })
 
   test("suspense error", () => {

tsconfig.base.json

@@ -5,6 +5,7 @@
     "strict": true,
     "moduleDetection": "force",
     "composite": true,
+    "ignoreDeprecations": "6.0",
     "downlevelIteration": true,
     "resolveJsonModule": true,
     "esModuleInterop": false,