SSRProvider appends to a string prefix to avoid ID collisions

packages/@react-aria/ssr/src/SSRProvider.tsx

@@ -14,12 +14,12 @@ import React, {ReactNode, useContext, useLayoutEffect, useMemo, useState} from '
 
 // To support SSR, the auto incrementing id counter is stored in a context. This allows
 // it to be reset on every request to ensure the client and server are consistent.
-// There is also a prefix counter that is used to support async loading components
-// Each async boundary must be wrapped in an SSR provider, which increments the prefix
+// There is also a prefix string that is used to support async loading components
+// Each async boundary must be wrapped in an SSR provider, which appends to the prefix
 // and resets the current id counter. This ensures that async loaded components have
-// consistent ids regardless  of the loading order.
+// consistent ids regardless of the loading order.
 interface SSRContextValue {
-  prefix: number,
+  prefix: string,
   current: number
 }
 
@@ -29,7 +29,7 @@ interface SSRContextValue {
 // will reset this to zero for consistency between server and client, so in the
 // SSR case multiple copies of React Aria is not supported.
 const defaultContext: SSRContextValue = {
-  prefix: Math.round(Math.random() * 10000000000),
+  prefix: String(Math.round(Math.random() * 10000000000)),
   current: 0
 };
 
@@ -47,8 +47,9 @@ interface SSRProviderProps {
 export function SSRProvider(props: SSRProviderProps): JSX.Element {
   let cur = useContext(SSRContext);
   let value: SSRContextValue = useMemo(() => ({
-    // If this is the first SSRProvider, set to zero, otherwise increment.
-    prefix: cur === defaultContext ? 0 : ++cur.prefix,
+    // If this is the first SSRProvider, start with an empty string prefix, otherwise
+    // append and increment the counter.
+    prefix: cur === defaultContext ? '' : `${cur.prefix}-${++cur.current}`,
     current: 0
   }), [cur]);
 
@@ -75,7 +76,7 @@ export function useSSRSafeId(defaultId?: string): string {
     console.warn('When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.');
   }
 
-  return useMemo(() => defaultId || `react-aria-${ctx.prefix}-${++ctx.current}`, [defaultId]);
+  return useMemo(() => defaultId || `react-aria${ctx.prefix}-${++ctx.current}`, [defaultId]);
 }
 
 /**

packages/@react-aria/ssr/test/SSRProvider.test.js

@@ -29,24 +29,36 @@ describe('SSRProvider', function () {
     );
 
     let divs = tree.getAllByTestId('test');
-    expect(divs[0].id).toBe('react-aria-0-1');
-    expect(divs[1].id).toBe('react-aria-0-2');
+    expect(divs[0].id).toBe('react-aria-1');
+    expect(divs[1].id).toBe('react-aria-2');
   });
 
   it('it should generate consistent unique ids with nested SSR providers', function () {
     let tree = render(
       <SSRProvider>
+        <Test />
         <SSRProvider>
           <Test />
+          <SSRProvider>
+            <Test />
+          </SSRProvider>
         </SSRProvider>
+        <Test />
         <SSRProvider>
           <Test />
         </SSRProvider>
       </SSRProvider>
     );
 
     let divs = tree.getAllByTestId('test');
-    expect(divs[0].id).toBe('react-aria-1-1');
-    expect(divs[1].id).toBe('react-aria-2-1');
+    expect(divs.map((div) => div.id)).toMatchInlineSnapshot(`
+      Array [
+        "react-aria-1",
+        "react-aria-2-1",
+        "react-aria-2-2-1",
+        "react-aria-3",
+        "react-aria-4-1",
+      ]
+    `);
   });
 });