Function useId

packages/react-aria/src/utils/useId.ts:39–87

(defaultId?: string)

 * @param defaultId - Default component id.
 */
export function useId(defaultId?: string): string {
  let [value, setValue] = useState(defaultId);
  let nextId = useRef(null);

  let res = useSSRSafeId(value);
  let cleanupRef = useRef(null);

  if (registry) {
    registry.register(cleanupRef, res);
  }

  if (canUseDOM) {
    const cacheIdRef = idsUpdaterMap.get(res);
    if (cacheIdRef && !cacheIdRef.includes(nextId)) {
      cacheIdRef.push(nextId);
    } else {
      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.
      if (registry) {
        registry.unregister(cleanupRef);
      }
      idsUpdaterMap.delete(r);
    };
  }, [res]);

  // This cannot cause an infinite loop because the ref is always cleaned up.
  // eslint-disable-next-line
  useEffect(() => {
    let newId = nextId.current;
    if (newId) {
      setValue(newId);
    }

    return () => {
      if (newId) {
        nextId.current = null;
      }
    };
  });

  return res;
}

/**
 * Merges two ids.