@samitouri / QOS-React-2 / commits / d2767c96e8

[Flight] Encode fragments properly in DEV (#29762)

Normally we take the renderClientElement path but this is an internal fast path. No tests because we don't run tests with console.createTask (which is not easy since we test component stacks). Ideally this would be covered by types but since the types don't consider flags and DEV it doesn't really help.

Sebastian Markbåge committed Jun 4, 2024 at 18:10 UTC d2767c96e80a6fdc35b002f1518d01d90e2a8528
1 file changed +38 -12
packages/react-server/src/ReactFlightServer.js
+38 -12
@@ -1215,12 +1215,25 @@ function renderFragment(
1215 if (task.keyPath !== null) {
1216 // We have a Server Component that specifies a key but we're now splitting
1217 // the tree using a fragment.
1218 - const fragment = [
1219 - REACT_ELEMENT_TYPE,
1220 - REACT_FRAGMENT_TYPE,
1221 - task.keyPath,
1222 - {children},
1223 - ];
1218 + const fragment = __DEV__
1219 + ? enableOwnerStacks
1220 + ? [
1221 + REACT_ELEMENT_TYPE,
1222 + REACT_FRAGMENT_TYPE,
1223 + task.keyPath,
1224 + {children},
1225 + null,
1226 + null,
1227 + 0,
1228 + ]
1229 + : [
1230 + REACT_ELEMENT_TYPE,
1231 + REACT_FRAGMENT_TYPE,
1232 + task.keyPath,
1233 + {children},
1234 + null,
1235 + ]
1236 + : [REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE, task.keyPath, {children}];
1237 if (!task.implicitSlot) {
1238 // If this was keyed inside a set. I.e. the outer Server Component was keyed
1239 // then we need to handle reorders of the whole set. To do this we need to wrap
@@ -1274,12 +1287,25 @@ function renderAsyncFragment(
1287 if (task.keyPath !== null) {
1288 // We have a Server Component that specifies a key but we're now splitting
1289 // the tree using a fragment.
1277 - const fragment = [
1278 - REACT_ELEMENT_TYPE,
1279 - REACT_FRAGMENT_TYPE,
1280 - task.keyPath,
1281 - {children},
1282 - ];
1290 + const fragment = __DEV__
1291 + ? enableOwnerStacks
1292 + ? [
1293 + REACT_ELEMENT_TYPE,
1294 + REACT_FRAGMENT_TYPE,
1295 + task.keyPath,
1296 + {children},
1297 + null,
1298 + null,
1299 + 0,
1300 + ]
1301 + : [
1302 + REACT_ELEMENT_TYPE,
1303 + REACT_FRAGMENT_TYPE,
1304 + task.keyPath,
1305 + {children},
1306 + null,
1307 + ]
1308 + : [REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE, task.keyPath, {children}];
1309 if (!task.implicitSlot) {
1310 // If this was keyed inside a set. I.e. the outer Server Component was keyed
1311 // then we need to handle reorders of the whole set. To do this we need to wrap