[DevTools] Display React.optimisticKey in key positions

[everettbu]

Mirror of facebook/react#35760
Original author: eps1lon

---

Summary

Current display was inconsistent (omitted when inspecting while stringified as Symbol(react.optimistic_key) in the tree).

This displays it as React.optimisticKey mirroring the export.

How did you test this change?

• Added test

[greptile-apps]

Greptile Overview

Greptile Summary

This PR improves the consistency of how React.optimisticKey is displayed in DevTools. Previously, it was inconsistently shown as null when inspecting and as Symbol(react.optimistic_key) in the tree. Now it's uniformly displayed as 'React.optimisticKey' to mirror the actual export name.

• Updated key display logic in 4 locations to show 'React.optimisticKey' instead of null
• Added comprehensive tests for tree display and search functionality
• However, two PathFrame functions (getPathFrame and getVirtualPathFrame) at lines 8698 and 8706-8710 were not updated, which could cause path tracking to fail when selecting components that use React.optimisticKey

Confidence Score: 3/5

• This PR is mostly safe but has incomplete implementation that could cause bugs in path tracking
• The core changes are correct and well-tested, but two PathFrame functions weren't updated, creating an inconsistency that could break element selection/tracking when React.optimisticKey is used
• Pay close attention to packages/react-devtools-shared/src/backend/fiber/renderer.js lines 8698 and 8706-8710

Important Files Changed

Filename	Overview
packages/react-devtools-shared/src/tests/optimisticKeyDevToolsIntegration.js	New test file verifying React.optimisticKey displays correctly in DevTools tree and is searchable
packages/react-devtools-shared/src/backend/fiber/renderer.js	Updates display of React.optimisticKey from null/stringified Symbol to 'React.optimisticKey', but misses two PathFrame functions

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (2)

packages/react-devtools-shared/src/backend/fiber/renderer.js
Inconsistent handling of REACT_OPTIMISTIC_KEY - should return 'React.optimisticKey' instead of null to match other locations (lines 2613, 6189, 6207, 7134). This could cause path matching to fail when tracking components that use React.optimisticKey.

      key: key === REACT_OPTIMISTIC_KEY ? 'React.optimisticKey' : key,

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-shared/src/backend/fiber/renderer.js
Line: 8698:8698

Comment:
Inconsistent handling of `REACT_OPTIMISTIC_KEY` - should return `'React.optimisticKey'` instead of `null` to match other locations (lines 2613, 6189, 6207, 7134). This could cause path matching to fail when tracking components that use `React.optimisticKey`.

```suggestion
      key: key === REACT_OPTIMISTIC_KEY ? 'React.optimisticKey' : key,
```

How can I resolve this? If you propose a fix, please make it concise.

---

packages/react-devtools-shared/src/backend/fiber/renderer.js
Inconsistent with other locations - this should return the string 'React.optimisticKey' instead of null when the key matches the constant. Path matching may fail otherwise.

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-shared/src/backend/fiber/renderer.js
Line: 8706:8710

Comment:
Inconsistent with other locations - this should return the string `'React.optimisticKey'` instead of `null` when the key matches the constant. Path matching may fail otherwise.

How can I resolve this? If you propose a fix, please make it concise.

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.