[Flight] Use valid CSS selectors in useId format (#33099)

Author: eps1lon

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -1957,8 +1957,8 @@ describe('ReactFlight', () => {
       });
       expect(ReactNoop).toMatchRenderedOutput(
         <>
-          <div prop=":S1:" />
-          <div prop=":S2:" />
+          <div prop="«S1»" />
+          <div prop="«S2»" />
         </>,
       );
     });
@@ -1981,8 +1981,8 @@ describe('ReactFlight', () => {
       });
       expect(ReactNoop).toMatchRenderedOutput(
         <>
-          <div prop=":fooS1:" />
-          <div prop=":fooS2:" />
+          <div prop="«fooS1»" />
+          <div prop="«fooS2»" />
         </>,
       );
     });
@@ -2021,8 +2021,8 @@ describe('ReactFlight', () => {
       assertLog(['ClientDoubler']);
       expect(ReactNoop).toMatchRenderedOutput(
         <>
-          <div prop=":S1:">:S1:</div>
-          <div prop=":S1:">:S1:</div>
+          <div prop="«S1»">«S1»</div>
+          <div prop="«S1»">«S1»</div>
         </>,
       );
     });

packages/react-server/src/ReactFlightHooks.js

@@ -120,7 +120,13 @@ function useId(): string {
   }
   const id = currentRequest.identifierCount++;
   // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client
-  return ':' + currentRequest.identifierPrefix + 'S' + id.toString(32) + ':';
+  return (
+    '\u00AB' +
+    currentRequest.identifierPrefix +
+    'S' +
+    id.toString(32) +
+    '\u00BB'
+  );
 }
 
 function use<T>(usable: Usable<T>): T {