[DevTools] Display React.optimisticKey in key positions

Author: eps1lon

packages/react-devtools-shared/src/__tests__/optimisticKeyDevToolsIntegration.js

@@ -89,7 +89,7 @@ describe('Store React.optimisticKey', () => {
 
     expect(store).toMatchInlineSnapshot(`
       [root]
-          <Component key="Symbol(react.optimistic_key)">
+          <Component key="React.optimisticKey">
     `);
     expect(store.getElementAtIndex(0)).toEqual(
       expect.objectContaining({key: 'React.optimisticKey'}),
@@ -109,23 +109,23 @@ describe('Store React.optimisticKey', () => {
 
     expect(state).toMatchInlineSnapshot(`
       [root]
-           <Fragment key="Symbol(react.optimistic_key)">
+           <Fragment key="React.optimisticKey">
     `);
 
     act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'optimistic'}));
     act(() => renderer.update(<Contexts />));
 
     expect(state).toMatchInlineSnapshot(`
       [root]
-           <Fragment key="Symbol(react.optimistic_key)">
+           <Fragment key="React.optimisticKey">
     `);
 
-    act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'symbol'}));
+    act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'react'}));
     act(() => renderer.update(<Contexts />));
 
     expect(state).toMatchInlineSnapshot(`
       [root]
-      →    <Fragment key="Symbol(react.optimistic_key)">
+      →    <Fragment key="React.optimisticKey">
     `);
   });
 });

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -2606,7 +2606,12 @@ export function attach(
 
       // This check is a guard to handle a React element that has been modified
       // in such a way as to bypass the default stringification of the "key" property.
-      const keyString = key === null ? null : String(key);
+      const keyString =
+        key === null
+          ? null
+          : key === REACT_OPTIMISTIC_KEY
+            ? 'React.optimisticKey'
+            : String(key);
       const keyStringID = getStringID(keyString);
 
       const nameProp =
@@ -6179,7 +6184,10 @@ export function attach(
       return {
         displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
         id: instance.id,
-        key: fiber.key === REACT_OPTIMISTIC_KEY ? null : fiber.key,
+        key:
+          fiber.key === REACT_OPTIMISTIC_KEY
+            ? 'React.optimisticKey'
+            : fiber.key,
         env: null,
         stack:
           fiber._debugOwner == null || fiber._debugStack == null
@@ -6195,7 +6203,7 @@ export function attach(
         key:
           componentInfo.key == null ||
           componentInfo.key === REACT_OPTIMISTIC_KEY
-            ? null
+            ? 'React.optimisticKey'
             : componentInfo.key,
         env: componentInfo.env == null ? null : componentInfo.env,
         stack:
@@ -7120,7 +7128,12 @@ export function attach(
       // Does the component have legacy context attached to it.
       hasLegacyContext,
 
-      key: key != null && key !== REACT_OPTIMISTIC_KEY ? key : null,
+      key:
+        key != null
+          ? key === REACT_OPTIMISTIC_KEY
+            ? 'React.optimisticKey'
+            : key
+          : null,
 
       type: elementType,