dillon1000/react

Commit

[DevTools] Hide State and Props in the Sidebar for Suspense (#34630)

We're showing too much noise in the side-panel when selecting a Suspense
boundary. The interesting thing to see directly is the "Suspended by".

The "props" are mostly useless because the `"name"` prop is already in
the tree. I'm now also showing it in the title bar of the selected
element panel. The "children" and "fallback" props are just the thing
that you can see in the tree view anyway.

The "state" is this weird section with just one field in it, which we
already have duplicated in the top toolbar as well. We can just delete
this. I make sure to show the icon and a "suspended..." section while
the boundary is still loading but now yet resuspended by force
suspending.

While still loading:

<img width="600" height="193" alt="Screenshot 2025-09-27 at 11 54 37 PM"
src="https://github.com/user-attachments/assets/1c3f3a96-46e0-4b11-806f-032569c7d5b5"
/>

After loading:

<img width="602" height="266" alt="Screenshot 2025-09-27 at 11 54 53 PM"
src="https://github.com/user-attachments/assets/c43cc4cb-036f-4ced-9b0d-226c6320cd76"
/>

Resuspended after loading:

<img width="602" height="300" alt="Screenshot 2025-09-27 at 11 55 07 PM"
src="https://github.com/user-attachments/assets/0be01735-48a7-47dc-b5cf-e72ec71e0148"
/>
Browse files
Changed paths6 files
First-parent comparison
M packages/react-devtools-shared/src/backend/fiber/renderer.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js ModifiedD packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js DeletedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…