@samitouri / QOS-React / commits / 1549bda33f

[Flight] Only assign `_store` in dev mode when creating lazy types (#34354)

Small follow-up to #34350. The `_store` property is now only assigned in development mode when creating lazy types. It also uses the `validated` value that was passed to `createElement`, if applicable.

Hendrik Liebau committed Sep 1, 2025 at 12:13 UTC 1549bda33f0df963ae27a590b7191f3de99dad31
2 files changed +9 -6
packages/react-client/src/ReactFlightClient.js
+7 -5
@@ -1172,7 +1172,7 @@ function createElement(
1172 props: mixed,
1173 owner: ?ReactComponentInfo, // DEV-only
1174 stack: ?ReactStackTrace, // DEV-only
1175 - validated: number, // DEV-only
1175 + validated: 0 | 1 | 2, // DEV-only
1176 ):
1177 | React$Element<any>
1178 | LazyComponent<React$Element<any>, SomeChunk<React$Element<any>>> {
@@ -1268,7 +1268,7 @@ function createElement(
1268 }
1269 erroredChunk._debugInfo = [erroredComponent];
1270 }
1271 - return createLazyChunkWrapper(erroredChunk);
1271 + return createLazyChunkWrapper(erroredChunk, validated);
1272 }
1273 if (handler.deps > 0) {
1274 // We have blocked references inside this Element but we can turn this into
@@ -1277,7 +1277,7 @@ function createElement(
1277 createBlockedChunk(response);
1278 handler.value = element;
1279 handler.chunk = blockedChunk;
1280 - const lazyType = createLazyChunkWrapper(blockedChunk);
1280 + const lazyType = createLazyChunkWrapper(blockedChunk, validated);
1281 if (__DEV__) {
1282 // After we have initialized any blocked references, initialize stack etc.
1283 const init = initializeElement.bind(null, response, element, lazyType);
@@ -1295,11 +1295,11 @@ function createElement(
1295
1296 function createLazyChunkWrapper<T>(
1297 chunk: SomeChunk<T>,
1298 + validated: 0 | 1 | 2, // DEV-only
1299 ): LazyComponent<T, SomeChunk<T>> {
1300 const lazyType: LazyComponent<T, SomeChunk<T>> = {
1301 $$typeof: REACT_LAZY_TYPE,
1302 _payload: chunk,
1302 - _store: {validated: 0},
1303 _init: readChunk,
1304 };
1305 if (__DEV__) {
@@ -1307,6 +1307,8 @@ function createLazyChunkWrapper<T>(
1307 const chunkDebugInfo: ReactDebugInfo =
1308 chunk._debugInfo || (chunk._debugInfo = ([]: ReactDebugInfo));
1309 lazyType._debugInfo = chunkDebugInfo;
1310 + // Initialize a store for key validation by the JSX runtime.
1311 + lazyType._store = {validated: validated};
1312 }
1313 return lazyType;
1314 }
@@ -2111,7 +2113,7 @@ function parseModelString(
2113 }
2114 // We create a React.lazy wrapper around any lazy values.
2115 // When passed into React, we'll know how to suspend on this.
2114 - return createLazyChunkWrapper(chunk);
2116 + return createLazyChunkWrapper(chunk, 0);
2117 }
2118 case '@': {
2119 // Promise
packages/react/src/ReactLazy.js
+2 -1
@@ -59,8 +59,9 @@ export type LazyComponent<T, P> = {
59 $$typeof: symbol | number,
60 _payload: P,
61 _init: (payload: P) => T,
62 - _debugInfo?: null | ReactDebugInfo,
62 +
63 // __DEV__
64 + _debugInfo?: null | ReactDebugInfo,
65 _store?: {validated: 0 | 1 | 2, ...}, // 0: not validated, 1: validated, 2: force fail
66 };
67