Skip to content

Commit aa490a3

Browse files
committed
Add a test demonstrating that there is no warning when double rendering on the client a server component that used useId
1 parent 2c4a074 commit aa490a3

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -563,6 +563,47 @@ describe('ReactFlight', () => {
563563
</>,
564564
);
565565
});
566+
567+
// @gate enableServerContext
568+
it('[TODO] it does not warn if you render a server element passed to a client module reference twice on the client when using useId', async () => {
569+
// @TODO Today if you render a server component with useId and pass it to a client component and that client component renders the element in two or more
570+
// places the id used on the server will be duplicated in the client. This is a deviation from the guarantees useId makes for Fizz/Client and is a consequence
571+
// of the fact that the server component is actually rendered on the server and is reduced to a set of host elements before being passed to the Client component
572+
// so the output passed to the Client has no knowledge of the useId use. In the future we would like to add a DEV warning when this happens. For now
573+
// we just accept that it is a nuance of useId in Flight
574+
function App() {
575+
let id = React.useId();
576+
let div = <div prop={id}>{id}</div>;
577+
return <ClientDoublerModuleRef el={div} />;
578+
}
579+
580+
function ClientDoubler({el}) {
581+
Scheduler.unstable_yieldValue('ClientDoubler');
582+
return (
583+
<>
584+
{el}
585+
{el}
586+
</>
587+
);
588+
}
589+
590+
const ClientDoublerModuleRef = moduleReference(ClientDoubler);
591+
592+
const transport = ReactNoopFlightServer.render(<App />);
593+
expect(Scheduler).toHaveYielded([]);
594+
595+
act(() => {
596+
ReactNoop.render(ReactNoopFlightClient.read(transport));
597+
});
598+
599+
expect(Scheduler).toHaveYielded(['ClientDoubler']);
600+
expect(ReactNoop).toMatchRenderedOutput(
601+
<>
602+
<div prop=":S1:">:S1:</div>
603+
<div prop=":S1:">:S1:</div>
604+
</>,
605+
);
606+
});
566607
});
567608

568609
describe('ServerContext', () => {

0 commit comments

Comments
 (0)