[Flight] Use valid CSS selectors in `useId` format (#33099)
Sebastian "Sebbie" Silbermann committed
May 4, 2025 at 13:47 UTC
0ca8420f9d051285c452a590ac4a4c9476406bef
2 files changed
+13
-7
packages/react-client/src/__tests__/ReactFlight-test.js
+6
-6
@@ -1957,8 +1957,8 @@ describe('ReactFlight', () => {
1957
});
1958
expect(ReactNoop).toMatchRenderedOutput(
1959
<>
1960
- <div prop=":S1:" />
1961
- <div prop=":S2:" />
1960
+ <div prop="«S1»" />
1961
+ <div prop="«S2»" />
1962
</>,
1963
);
1964
});
@@ -1981,8 +1981,8 @@ describe('ReactFlight', () => {
1981
});
1982
expect(ReactNoop).toMatchRenderedOutput(
1983
<>
1984
- <div prop=":fooS1:" />
1985
- <div prop=":fooS2:" />
1984
+ <div prop="«fooS1»" />
1985
+ <div prop="«fooS2»" />
1986
</>,
1987
);
1988
});
@@ -2021,8 +2021,8 @@ describe('ReactFlight', () => {
2021
assertLog(['ClientDoubler']);
2022
expect(ReactNoop).toMatchRenderedOutput(
2023
<>
2024
- <div prop=":S1:">:S1:</div>
2025
- <div prop=":S1:">:S1:</div>
2024
+ <div prop="«S1»">«S1»</div>
2025
+ <div prop="«S1»">«S1»</div>
2026
</>,
2027
);
2028
});
packages/react-server/src/ReactFlightHooks.js
+7
-1
@@ -120,7 +120,13 @@ function useId(): string {
120
}
121
const id = currentRequest.identifierCount++;
122
// use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client
123
- return ':' + currentRequest.identifierPrefix + 'S' + id.toString(32) + ':';
123
+ return (
124
+ '\u00AB' +
125
+ currentRequest.identifierPrefix +
126
+ 'S' +
127
+ id.toString(32) +
128
+ '\u00BB'
129
+ );
130
}
131
132
function use<T>(usable: Usable<T>): T {