{"files":[{"status":"A","path":"packages\/react-devtools-shared\/src\/__tests__\/optimisticKeyDevToolsIntegration.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js"}],"commit":{"revision":"e49335e961a77a45be32ad6c9c1877cbe2fe91f4","shortRevision":"e49335e961","authorName":"Sebastian \"Sebbie\" Silbermann","subject":"[DevTools] Display `React.optimisticKey` in key positions (#35760)","authorEmail":"sebastian.silbermann@vercel.com","authoredAt":"2026-02-11T00:35:36+01:00"},"body":"","parents":["57b79b0388b755096216b2b5308113e54eac3be8"],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/optimisticKeyDevToolsIntegration.js b\/packages\/react-devtools-shared\/src\/__tests__\/optimisticKeyDevToolsIntegration.js\nnew file mode 100644\nindex 0000000000..5a6fab25c3\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/optimisticKeyDevToolsIntegration.js\n@@ -0,0 +1,131 @@\n+\/**\n+ * Copyright (c) Meta Platforms, Inc. and affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+import {getVersionedRenderImplementation} from '.\/utils';\n+\n+describe('Store React.optimisticKey', () => {\n+ let act;\n+ let actAsync;\n+ let React;\n+ let TestRenderer;\n+ let bridge;\n+ let store;\n+\n+ let BridgeContext;\n+ let StoreContext;\n+ let TreeContext;\n+\n+ let dispatch;\n+ let state;\n+\n+ beforeAll(() => {\n+ \/\/ JSDDOM doesn't implement getClientRects so we're just faking one for testing purposes\n+ Element.prototype.getClientRects = function (this: Element) {\n+ const textContent = this.textContent;\n+ return [\n+ new DOMRect(1, 2, textContent.length, textContent.split('\\n').length),\n+ ];\n+ };\n+ });\n+\n+ beforeEach(() => {\n+ global.IS_REACT_ACT_ENVIRONMENT = true;\n+\n+ store = global.store;\n+ bridge = global.bridge;\n+\n+ React = require('react');\n+\n+ const utils = require('.\/utils');\n+ act = utils.act;\n+ actAsync = utils.actAsync;\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext =\n+ require('react-devtools-shared\/src\/devtools\/views\/context').BridgeContext;\n+ StoreContext =\n+ require('react-devtools-shared\/src\/devtools\/views\/context').StoreContext;\n+ TreeContext = require('react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext');\n+ });\n+\n+ const {render} = getVersionedRenderImplementation();\n+\n+ const Capture = () => {\n+ dispatch = React.useContext(TreeContext.TreeDispatcherContext);\n+ state = React.useContext(TreeContext.TreeStateContext);\n+ return null;\n+ };\n+\n+ const Contexts = () => {\n+ return (\n+ \n+ \n+ \n+ \n+ <\/TreeContext.TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+ };\n+\n+ \/\/ @reactVersion >= 19.3\n+ it('is included in the tree', async () => {\n+ if (React.optimisticKey === undefined) {\n+ return;\n+ }\n+\n+ function Component() {\n+ return null;\n+ }\n+\n+ await actAsync(() => {\n+ render();\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ \n+ `);\n+ expect(store.getElementAtIndex(0)).toEqual(\n+ expect.objectContaining({key: 'React.optimisticKey'}),\n+ );\n+ });\n+\n+ \/\/ @reactVersion >= 19.3\n+ it('is searchable', async () => {\n+ if (React.optimisticKey === undefined) {\n+ return;\n+ }\n+ await actAsync(() => {\n+ render();\n+ });\n+ let renderer;\n+ act(() => (renderer = TestRenderer.create()));\n+\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ \n+ `);\n+\n+ act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'optimistic'}));\n+ act(() => renderer.update());\n+\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ \n+ `);\n+\n+ act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'react'}));\n+ act(() => renderer.update());\n+\n+ expect(state).toMatchInlineSnapshot(`\n+ [root]\n+ → \n+ `);\n+ });\n+});\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\nindex 9b2022daac..7a01d6c598 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n@@ -2606,7 +2606,12 @@ export function attach(\n \n \/\/ This check is a guard to handle a React element that has been modified\n \/\/ in such a way as to bypass the default stringification of the \"key\" property.\n- const keyString = key === null ? null : String(key);\n+ const keyString =\n+ key === null\n+ ? null\n+ : key === REACT_OPTIMISTIC_KEY\n+ ? 'React.optimisticKey'\n+ : String(key);\n const keyStringID = getStringID(keyString);\n \n const nameProp =\n@@ -6180,7 +6185,10 @@ export function attach(\n return {\n displayName: getDisplayNameForFiber(fiber) || 'Anonymous',\n id: instance.id,\n- key: fiber.key === REACT_OPTIMISTIC_KEY ? null : fiber.key,\n+ key:\n+ fiber.key === REACT_OPTIMISTIC_KEY\n+ ? 'React.optimisticKey'\n+ : fiber.key,\n env: null,\n stack:\n fiber._debugOwner == null || fiber._debugStack == null\n@@ -6196,7 +6204,7 @@ export function attach(\n key:\n componentInfo.key == null ||\n componentInfo.key === REACT_OPTIMISTIC_KEY\n- ? null\n+ ? 'React.optimisticKey'\n : componentInfo.key,\n env: componentInfo.env == null ? null : componentInfo.env,\n stack:\n@@ -7123,7 +7131,12 @@ export function attach(\n \/\/ Does the component have legacy context attached to it.\n hasLegacyContext,\n \n- key: key != null && key !== REACT_OPTIMISTIC_KEY ? key : null,\n+ key:\n+ key != null\n+ ? key === REACT_OPTIMISTIC_KEY\n+ ? 'React.optimisticKey'\n+ : key\n+ : null,\n \n type: elementType,\n \n"}

dillon1000/react

Files changed