{"body":"","patch":"diff --git a\/packages\/react-client\/src\/ReactFlightClient.js b\/packages\/react-client\/src\/ReactFlightClient.js\nindex b49f1f1502..12ef52669b 100644\n--- a\/packages\/react-client\/src\/ReactFlightClient.js\n+++ b\/packages\/react-client\/src\/ReactFlightClient.js\n@@ -1280,10 +1280,11 @@ function getTaskName(type: mixed): string {\n type !== null &&\n type.$$typeof === REACT_LAZY_TYPE\n ) {\n- if (type._init === readChunk) {\n- \/\/ This is a lazy node created by Flight. It is probably a client reference.\n- \/\/ We use the \"use client\" string to indicate that this is the boundary into\n- \/\/ the client. There will only be one for any given owner chain.\n+ if (type._payload instanceof ReactPromise) {\n+ \/\/ This is a lazy node created by Flight, i.e. it wraps a chunk. It is\n+ \/\/ probably a client reference. We use the \"use client\" string to indicate\n+ \/\/ that this is the boundary into the client. There will only be one for\n+ \/\/ any given owner chain.\n return '\"use client\"';\n }\n \/\/ We don't want to eagerly initialize the initializer in DEV mode so we can't\n@@ -1374,16 +1375,6 @@ function initializeElement(\n }\n \n if (lazyNode !== null) {\n- \/\/ In case the JSX runtime has validated the lazy type as a static child, we\n- \/\/ need to transfer this information to the element.\n- if (\n- lazyNode._store &&\n- lazyNode._store.validated &&\n- !element._store.validated\n- ) {\n- element._store.validated = lazyNode._store.validated;\n- }\n-\n \/\/ If the lazy node is initialized, we move its debug info to the inner\n \/\/ value.\n if (lazyNode._payload.status === INITIALIZED && lazyNode._debugInfo) {\n@@ -1535,6 +1526,29 @@ function createElement(\n return element;\n }\n \n+function transferValidation(store: {validated: 0 | 1 | 2}, value: mixed): void {\n+ if (store.validated && typeof value === 'object' && value !== null) {\n+ \/\/ Only elements and lazy nodes carry key validation. Any other value, e.g.\n+ \/\/ an array of children, needs to have its own items validated instead.\n+ const $$typeof = (value as any).$$typeof;\n+ if ($$typeof === REACT_ELEMENT_TYPE || $$typeof === REACT_LAZY_TYPE) {\n+ const valueStore = (value as any)._store;\n+ if (valueStore && !valueStore.validated) {\n+ valueStore.validated = store.validated;\n+ }\n+ }\n+ }\n+}\n+\n+function readChunkAndTransferValidation(\n+ store: {validated: 0 | 1 | 2},\n+ payload: SomeChunk,\n+): T {\n+ const value: T = readChunk(payload);\n+ transferValidation(store, value);\n+ return value;\n+}\n+\n function createLazyChunkWrapper(\n chunk: SomeChunk,\n validated: 0 | 1 | 2, \/\/ DEV-only\n@@ -1547,8 +1561,16 @@ function createLazyChunkWrapper(\n if (__DEV__) {\n \/\/ Forward the live array\n lazyType._debugInfo = chunk._debugInfo;\n- \/\/ Initialize a store for key validation by the JSX runtime.\n- lazyType._store = {validated: validated};\n+ \/\/ Initialize a store for key validation by the JSX runtime. It can only\n+ \/\/ validate the lazy node itself, because the value it refers to might not\n+ \/\/ exist yet at that point, e.g. if it's an outlined row that hasn't been\n+ \/\/ initialized. So the validation is transferred to the value when the lazy\n+ \/\/ node is unwrapped. If the value is another lazy node, unwrapping that one\n+ \/\/ forwards the validation further.\n+ const store = {validated: validated};\n+ lazyType._store = store;\n+ \/\/ $FlowFixMe[incompatible-type] `bind` loses the type argument.\n+ lazyType._init = readChunkAndTransferValidation.bind(null, store);\n }\n return lazyType;\n }\ndiff --git a\/packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMBrowser-test.js b\/packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMBrowser-test.js\nindex d7ec51780a..9a8b2736f2 100644\n--- a\/packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMBrowser-test.js\n+++ b\/packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMBrowser-test.js\n@@ -3137,4 +3137,292 @@ describe('ReactFlightDOMBrowser', () => {\n \n expect(container.innerHTML).toBe('

<\/div>');\n });\n+\n+ \/\/ Long enough to exceed MAX_ROW_SIZE in ReactFlightServer, which makes the\n+ \/\/ element prop that follows it be outlined into its own row.\n+ const longText = 'a'.repeat(4000);\n+\n+ it('should not have missing key warnings when a static child is outlined', async () => {\n+ const ClientComponent = clientExports(function ClientComponent({\n+ text,\n+ element,\n+ }) {\n+ return (\n+

\n+ {text.length}<\/span>\n+ {element}\n+ <\/div>\n+ );\n+ });\n+\n+ const stream = await serverAct(() =>\n+ ReactServerDOMServer.renderToReadableStream(\n+ Hello<\/span>} \/>,\n+ webpackMap,\n+ ),\n+ );\n+\n+ function ClientRoot({response}) {\n+ return use(response);\n+ }\n+\n+ const response = ReactServerDOMClient.createFromReadableStream(stream);\n+\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ expect(container.innerHTML).toBe(\n+ '

4000<\/span>Hello<\/span><\/div>',\n+ );\n+ });\n+\n+ it('should not have missing key warnings when an outlined static child is blocked on debug info', async () => {\n+ const ClientComponent = clientExports(function ClientComponent({\n+ text,\n+ element,\n+ }) {\n+ return (\n+

\n+ {text.length}<\/span>\n+ {element}\n+ <\/div>\n+ );\n+ });\n+\n+ let debugReadableStreamController;\n+\n+ const debugReadableStream = new ReadableStream({\n+ start(controller) {\n+ debugReadableStreamController = controller;\n+ },\n+ });\n+\n+ const stream = await serverAct(() =>\n+ ReactServerDOMServer.renderToReadableStream(\n+ Hello<\/span>} \/>,\n+ webpackMap,\n+ {\n+ debugChannel: {\n+ writable: new WritableStream({\n+ write(chunk) {\n+ debugReadableStreamController.enqueue(chunk);\n+ },\n+ close() {\n+ debugReadableStreamController.close();\n+ },\n+ }),\n+ },\n+ },\n+ ),\n+ );\n+\n+ function ClientRoot({response}) {\n+ return use(response);\n+ }\n+\n+ const response = ReactServerDOMClient.createFromReadableStream(stream, {\n+ debugChannel: {readable: createDelayedStream(debugReadableStream)},\n+ });\n+\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ \/\/ Wait for the debug info to be processed.\n+ await act(() => {});\n+\n+ expect(container.innerHTML).toBe(\n+ '

4000<\/span>Hello<\/span><\/div>',\n+ );\n+ });\n+\n+ it('should have missing key warnings when an outlined element is used in an array', async () => {\n+ const ClientComponent = clientExports(function ClientComponent({\n+ text,\n+ element,\n+ }) {\n+ return (\n+

\n+ {text.length}<\/span>\n+ {[element]}\n+ <\/div>\n+ );\n+ });\n+\n+ const stream = await serverAct(() =>\n+ ReactServerDOMServer.renderToReadableStream(\n+ Hello<\/span>} \/>,\n+ webpackMap,\n+ ),\n+ );\n+\n+ function ClientRoot({response}) {\n+ return use(response);\n+ }\n+\n+ const response = ReactServerDOMClient.createFromReadableStream(stream);\n+\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ assertConsoleErrorDev([\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `div`. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in span (at **)',\n+ ]);\n+\n+ expect(container.innerHTML).toBe(\n+ '

4000<\/span>Hello<\/span><\/div>',\n+ );\n+ });\n+\n+ it('should have missing key warnings when an outlined element that is blocked on debug info is used in an array', async () => {\n+ const ClientComponent = clientExports(function ClientComponent({\n+ text,\n+ element,\n+ }) {\n+ return (\n+

\n+ {text.length}<\/span>\n+ {[element]}\n+ <\/div>\n+ );\n+ });\n+\n+ let debugReadableStreamController;\n+\n+ const debugReadableStream = new ReadableStream({\n+ start(controller) {\n+ debugReadableStreamController = controller;\n+ },\n+ });\n+\n+ const stream = await serverAct(() =>\n+ ReactServerDOMServer.renderToReadableStream(\n+ Hello<\/span>} \/>,\n+ webpackMap,\n+ {\n+ debugChannel: {\n+ writable: new WritableStream({\n+ write(chunk) {\n+ debugReadableStreamController.enqueue(chunk);\n+ },\n+ close() {\n+ debugReadableStreamController.close();\n+ },\n+ }),\n+ },\n+ },\n+ ),\n+ );\n+\n+ function ClientRoot({response}) {\n+ return use(response);\n+ }\n+\n+ const response = ReactServerDOMClient.createFromReadableStream(stream, {\n+ debugChannel: {readable: createDelayedStream(debugReadableStream)},\n+ });\n+\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ \/\/ The element can only be rendered, and therefore validated, after it's\n+ \/\/ unblocked by the debug info.\n+ await act(() => {});\n+\n+ assertConsoleErrorDev([\n+ 'Each child in a list should have a unique \"key\" prop.\\n\\n' +\n+ 'Check the render method of `div`. ' +\n+ 'See https:\/\/react.dev\/link\/warning-keys for more information.\\n' +\n+ ' in span (at **)',\n+ ]);\n+\n+ expect(container.innerHTML).toBe(\n+ '

4000<\/span>Hello<\/span><\/div>',\n+ );\n+ });\n+\n+ describe('with console.createTask', () => {\n+ \/\/ Stands in for what a browser console does with fake tasks: whatever runs\n+ \/\/ inside a task is shown under that task's name in the async stack. This is\n+ \/\/ the same setup that `ReactServer-test` uses to assert on task names.\n+ let currentTask;\n+\n+ beforeEach(() => {\n+ const {AsyncLocalStorage} = require('node:async_hooks');\n+ currentTask = new AsyncLocalStorage();\n+ (console: any).createTask = taskName => ({\n+ run: taskFn => {\n+ const parentTask = currentTask.getStore() || '';\n+ return currentTask.run(parentTask + '\\n' + taskName, taskFn);\n+ },\n+ });\n+\n+ \/\/ `supportsCreateTask` is captured when ReactFlightClient is required, so\n+ \/\/ the client modules need to be required again with this in place.\n+ jest.resetModules();\n+ patchMessageChannel();\n+ ({act} = require('internal-test-utils'));\n+ React = require('react');\n+ use = React.use;\n+ ReactDOMClient = require('react-dom\/client');\n+ ReactServerDOMClient = require('react-server-dom-webpack\/client');\n+ });\n+\n+ afterEach(() => {\n+ delete (console: any).createTask;\n+ });\n+\n+ \/\/ @gate __DEV__\n+ it('renders a client component inside a \"use client\" task', async () => {\n+ let taskWhileRendering;\n+\n+ const ClientComponent = clientExports(function ClientComponent() {\n+ taskWhileRendering = currentTask.getStore();\n+ return Hello<\/span>;\n+ });\n+\n+ const stream = await serverAct(() =>\n+ ReactServerDOMServer.renderToReadableStream(\n+ ,\n+ webpackMap,\n+ ),\n+ );\n+\n+ function ClientRoot({response}) {\n+ return use(response);\n+ }\n+\n+ const response = ReactServerDOMClient.createFromReadableStream(stream);\n+\n+ const container = document.createElement('div');\n+ const root = ReactDOMClient.createRoot(container);\n+\n+ await act(() => {\n+ root.render();\n+ });\n+\n+ expect(container.innerHTML).toBe('Hello<\/span>');\n+ \/\/ The element's type is a lazy node wrapping the client reference, so the\n+ \/\/ task that the component renders in marks the boundary into the client.\n+ expect(taskWhileRendering).toBe('\\n\"use client\"');\n+ });\n+ });\n });\n","parents":["2042572329425f9ebf35ae6287ea5bab72b2c497"],"commit":{"authorEmail":"mail@hendrik-liebau.de","authorName":"Hendrik Liebau","shortRevision":"8366f3389d","authoredAt":"2026-08-10T16:18:46+02:00","revision":"8366f3389d3717d718b447ebff0e6a785c7e2d4d","subject":"[Flight] Transfer key validation of lazy nodes when they are unwrapped (#37258)"},"files":[{"status":"M","path":"packages\/react-client\/src\/ReactFlightClient.js"},{"status":"M","path":"packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMBrowser-test.js"}]}

dillon1000/react

Files changed