[DevTools] Only schedule a single update per Supense when changing timeline

[everettbu]

Mirror of facebook/react#35927
Original author: eps1lon

---

Changing the Suspense timeline milestone was brute force. We sent the Fiber to each renderer for update. Not only is that wasteful, it can also break React if the Fibers from one renderer were not compatible with another renderer.

E.g. scheduling an update on a Fiber from React canary with React experimental would crash. Instead of pendingIndicator being null | () => {}, React would see undefined since pendingIndicator simply doesn't exist in React canary.

Test plan

Before:

CleanShot.2026-02-28.at.17.02.27.mp4

After:

CleanShot.2026-02-28.at.16.59.45.mp4

[greptile-apps]

Greptile Summary

This PR fixes a crash when DevTools manages multiple React renderers (e.g., React canary + React experimental) by scoping Suspense milestone updates to the correct renderer instead of broadcasting to all renderers. Each SuspenseTimelineStep now carries a rendererID, allowing the frontend to group suspended sets by renderer and send targeted overrideSuspenseMilestone messages.

• Added rendererID to SuspenseTimelineStep type and threaded it through all timeline construction methods in store.js
• Refactored SuspenseTimeline.js to group suspended nodes by rendererID and send one bridge message per renderer
• Changed agent.js to accept a rendererID parameter instead of iterating all renderers, though the null-safety guard present in sibling methods is missing
• Updated tests to pass the new required rendererID parameter

Confidence Score: 4/5

• This PR is safe to merge with one minor defensive coding concern in agent.js.
• The core logic change is sound and well-motivated — it fixes a real cross-renderer crash. The implementation correctly threads rendererID through all relevant paths, and the SuspenseTimeline.js refactor properly initializes empty sets for all renderers before grouping. The one concern is the missing null check in agent.js for the renderer lookup, which is inconsistent with all sibling methods and could throw a TypeError if a stale rendererID is used.
• packages/react-devtools-shared/src/backend/agent.js — missing null check for renderer lookup

Important Files Changed

Filename	Overview
packages/react-devtools-shared/src/backend/agent.js	Changed overrideSuspenseMilestone from iterating all renderers to targeting a specific rendererID, but missing null check for the renderer lookup unlike all sibling methods.
packages/react-devtools-shared/src/devtools/store.js	Threads rendererID through timeline step construction methods with proper lookups and error handling for both initial paint and transition code paths.
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.js	Refactored changeTimelineIndex to group suspended sets by rendererID and send per-renderer bridge messages, correctly initializing empty sets for all renderers first.
packages/react-devtools-shared/src/frontend/types.js	Added rendererID: number field to SuspenseTimelineStep type.
packages/react-devtools-shared/src/bridge.js	Added rendererID: number to OverrideSuspenseMilestone type definition, consistent with agent.js type.
packages/react-devtools-shared/src/tests/store-test.js	Updated test calls to overrideSuspenseMilestone to include the new required rendererID parameter.

_{Last reviewed commit: 2bf26ec}

[greptile-apps]

_{6 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Missing null check for renderer lookup

Every other renderer lookup in this class (e.g., overrideSuspense at line 782, overrideError at line 770, logElementToConsole at line 757) guards against an invalid rendererID with a renderer == null check and a console.warn. This method skips that check and instead casts the result directly to RendererInterface, then immediately accesses renderer.supportsTogglingSuspense. If the rendererID is invalid or the renderer was unregistered, this will throw a TypeError instead of gracefully warning.

Suggested change

	const renderer = ((this._rendererInterfaces[
	(rendererID: any)
	]: any): RendererInterface);
	if (renderer.supportsTogglingSuspense) {
	const renderer = this._rendererInterfaces[rendererID];
	if (renderer == null) {
	console.warn(`Invalid renderer id "${rendererID}"`);
	} else if (renderer.supportsTogglingSuspense) {

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-shared/src/backend/agent.js
Line: 794-797

Comment:
**Missing null check for renderer lookup**

Every other renderer lookup in this class (e.g., `overrideSuspense` at line 782, `overrideError` at line 770, `logElementToConsole` at line 757) guards against an invalid `rendererID` with a `renderer == null` check and a `console.warn`. This method skips that check and instead casts the result directly to `RendererInterface`, then immediately accesses `renderer.supportsTogglingSuspense`. If the `rendererID` is invalid or the renderer was unregistered, this will throw a `TypeError` instead of gracefully warning.

```suggestion
    const renderer = this._rendererInterfaces[rendererID];
    if (renderer == null) {
      console.warn(`Invalid renderer id "${rendererID}"`);
    } else if (renderer.supportsTogglingSuspense) {
```

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.