@samitouri / QOS-React-1 Mirror · read-only / commits / 4ca20fd36b
Fork 0

The library for web and native user interfaces.

Mirrored from https://github.com/247TaxiDriver/QOS-React.git

Synced Nov 12, 06:00 UTC

Test top level fragment inside lazy semantics (#28852)

This wasn't clearly articulated and tested why the code structure is like this but I think the logic is correct - or at least consistent with the weird semantics. We place this top-level fragment check inside the recursion so that you can resolve how many every Lazy or Usable wrappers you want and it still preserves the same semantics if they weren't there (which they might not be as a matter of a race condition). However, we don't actually recurse with the top-level fragment unwrapping itself because nesting a bunch of keyless fragments isn't the same as a single fragment/element.

Sebastian Markbåge committed Apr 17, 2024 at 12:37 UTC 4ca20fd36b2444a74279e7022f89894710b1daab
2 files changed +52 -2
packages/react-reconciler/src/ReactChildFiber.js
+5 -2
@@ -1460,7 +1460,9 @@ function createChildReconciler(
1460 lanes: Lanes,
1461 debugInfo: ReactDebugInfo | null,
1462 ): Fiber | null {
1463 - // This function is not recursive.
1463 + // This function is only recursive for Usables/Lazy and not nested arrays.
1464 + // That's so that using a Lazy wrapper is unobservable to the Fragment
1465 + // convention.
1466 // If the top level item is an array, we treat it as a set of children,
1467 // not as a fragment. Nested arrays on the other hand will be treated as
1468 // fragment nodes. Recursion happens at the normal flow.
@@ -1468,7 +1470,8 @@ function createChildReconciler(
1470 // Handle top level unkeyed fragments as if they were arrays.
1471 // This leads to an ambiguity between <>{[...]}</> and <>...</>.
1472 // We treat the ambiguous cases above the same.
1471 - // TODO: Let's use recursion like we do for Usable nodes?
1473 + // We don't use recursion here because a fragment inside a fragment
1474 + // is no longer considered "top level" for these purposes.
1475 const isUnkeyedTopLevelFragment =
1476 typeof newChild === 'object' &&
1477 newChild !== null &&
packages/react-reconciler/src/__tests__/ReactFragment-test.js
+47
@@ -965,4 +965,51 @@ describe('ReactFragment', () => {
965 </>,
966 );
967 });
968 +
969 + it('should preserve state of children when adding a fragment wrapped in Lazy', async function () {
970 + const ops = [];
971 +
972 + class Stateful extends React.Component {
973 + componentDidUpdate() {
974 + ops.push('Update Stateful');
975 + }
976 +
977 + render() {
978 + return <div>Hello</div>;
979 + }
980 + }
981 +
982 + const lazyChild = React.lazy(async () => ({
983 + default: (
984 + <>
985 + <Stateful key="a" />
986 + <div key="b">World</div>
987 + </>
988 + ),
989 + }));
990 +
991 + function Foo({condition}) {
992 + return condition ? <Stateful key="a" /> : lazyChild;
993 + }
994 +
995 + ReactNoop.render(<Foo condition={true} />);
996 + await waitForAll([]);
997 +
998 + ReactNoop.render(<Foo condition={false} />);
999 + await waitForAll([]);
1000 +
1001 + expect(ops).toEqual(['Update Stateful']);
1002 + expect(ReactNoop).toMatchRenderedOutput(
1003 + <>
1004 + <div>Hello</div>
1005 + <div>World</div>
1006 + </>,
1007 + );
1008 +
1009 + ReactNoop.render(<Foo condition={true} />);
1010 + await waitForAll([]);
1011 +
1012 + expect(ops).toEqual(['Update Stateful', 'Update Stateful']);
1013 + expect(ReactNoop).toMatchRenderedOutput(<div>Hello</div>);
1014 + });
1015 });