fix: Memory leak suspense safe useId

packages/@react-aria/utils/src/useId.ts

@@ -22,7 +22,13 @@ let canUseDOM = Boolean(
   window.document.createElement
 );
 
-let idsUpdaterMap: Map<string, Array<(v: string) => void>> = new Map();
+export let idsUpdaterMap: Map<string, { current: string | null }[]> = new Map();
+// This allows us to clean up the idsUpdaterMap when the id is no longer used.
+// Map is a strong reference, so unused ids wouldn't be cleaned up otherwise.
+// This can happen in suspended components where mount/unmount is not called.
+let registry = new FinalizationRegistry<string>((heldValue) => {
+  idsUpdaterMap.delete(heldValue);
+});
 
 /**
  * If a default is not provided, generate an id.
@@ -33,23 +39,25 @@ export function useId(defaultId?: string): string {
   let nextId = useRef(null);
 
   let res = useSSRSafeId(value);
+  let cleanupRef = useRef(null);
 
-  let updateValue = useCallback((val) => {
-    nextId.current = val;
-  }, []);
+  registry.register(cleanupRef, res);
 
   if (canUseDOM) {
-    // TS not smart enough to know that `has` means the value exists
-    if (idsUpdaterMap.has(res) && !idsUpdaterMap.get(res)!.includes(updateValue)) {
-      idsUpdaterMap.set(res, [...idsUpdaterMap.get(res)!, updateValue]);
+    const cacheIdRef = idsUpdaterMap.get(res);
+    if (cacheIdRef && !cacheIdRef.includes(nextId)) {
+      cacheIdRef.push(nextId);
     } else {
-      idsUpdaterMap.set(res, [updateValue]);
+      idsUpdaterMap.set(res, [nextId]);
     }
   }
 
   useLayoutEffect(() => {
     let r = res;
     return () => {
+      // In Suspense, the cleanup function may be not called
+      // when it is though, also remove it from the finalization registry.
+      registry.unregister(cleanupRef);
       idsUpdaterMap.delete(r);
     };
   }, [res]);
@@ -79,13 +87,13 @@ export function mergeIds(idA: string, idB: string): string {
 
   let setIdsA = idsUpdaterMap.get(idA);
   if (setIdsA) {
-    setIdsA.forEach(fn => fn(idB));
+    setIdsA.forEach(ref => (ref.current = idB));
     return idB;
   }
 
   let setIdsB = idsUpdaterMap.get(idB);
   if (setIdsB) {
-    setIdsB.forEach(fn => fn(idA));
+    setIdsB.forEach((ref) => (ref.current = idA));
     return idA;
   }
 

packages/@react-aria/utils/stories/useId.stories.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {idsUpdaterMap} from '../src/useId';
+import React, {Suspense, useState} from 'react';
+import {useId} from '../';
+
+export default {
+  title: 'useId'
+};
+
+
+let count = 0;
+function AsyncComponent() {
+  if (count < 5) {
+    throw new Promise((resolve) => {
+      return setTimeout(() => {
+        console.log('resolving', count, Date.now());
+        count++;
+        resolve(true);
+      }, 100);
+    });
+  }
+
+  return null;
+}
+
+function TestUseId() {
+  let [show, setShow] = useState(true);
+  return (
+    <div>
+      {show && (
+        <Suspense>
+          <Box />
+          <AsyncComponent />
+        </Suspense>
+      )}
+      <button
+        onClick={() => {
+          count = 0;
+          setShow((prev) => !prev);
+        }}>toggle</button>
+      <button
+        onClick={() => {
+          console.log(idsUpdaterMap);
+        }}>See ids held</button>
+    </div>
+  );
+}
+
+function Box() {
+  const id = useId();
+  return (
+    <div data-id={id}>
+      {id}
+    </div>
+  );
+}
+
+export const GCuseId = {
+  render: () => <TestUseId />,
+  parameters: {
+    description: {
+      data: 'This story demonstrates garbage collection cleanup of useId hook. Depends on the browser when it happens. Easiest to see by rendering, clicking the toggle button twice, then waiting for the GC or, if you are in chrome, you can force GC to run with developer tools in the memory tab.'
+    }
+  }
+};