Skip to content

Commit

Permalink
[Debug Tools] Introspect Promises in use() (#28297)
Browse files Browse the repository at this point in the history
Alternative to #28295.

Instead of stashing all of the Usables eagerly, we can extract them by
replaying the render when we need them like we do with any other hook.
We already had an implementation of `use()` but it wasn't quite
complete.

These can also include further DebugInfo on them such as what Server
Component rendered the Promise or async debug info. This is nice just to
see which use() calls were made in the side-panel but it can also be
used to gather everything that might have suspended.

Together with #28286 we cover the
case when a Promise was used a child and if it was unwrapped with use().
Notably we don't cover a Promise that was thrown (although we do support
that in a Server Component which maybe we shouldn't). Throwing a Promise
isn't officially supported though and that use case should move to the
use() Hook.

The pattern of conditionally suspending based on cache also isn't really
supported with the use() pattern. You should always call use() if you
previously called use() with the same input. This also ensures that we
can track what might have suspended rather than what actually did.

One limitation of this strategy is that it's hard to find all the places
something might suspend in a tree without rerendering all the fibers
again. So we might need to still add something to the tree to indicate
which Fibers may have further debug info / thenables.

DiffTrain build for commit 7a32d71.
  • Loading branch information
sebmarkbage committed Feb 12, 2024
1 parent db59a3e commit ac5a55d
Show file tree
Hide file tree
Showing 7 changed files with 9 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25917,7 +25917,7 @@ if (__DEV__) {
return root;
}

var ReactVersion = "18.3.0-canary-3f93ca1c8-20240212";
var ReactVersion = "18.3.0-canary-7a32d718b-20240212";

// Might add PROFILE later.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9167,7 +9167,7 @@ var devToolsConfig$jscomp$inline_1025 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-3f93ca1c8-20240212",
version: "18.3.0-canary-7a32d718b-20240212",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1206 = {
Expand Down Expand Up @@ -9198,7 +9198,7 @@ var internals$jscomp$inline_1206 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-3f93ca1c8-20240212"
reconcilerVersion: "18.3.0-canary-7a32d718b-20240212"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1207 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9595,7 +9595,7 @@ var devToolsConfig$jscomp$inline_1067 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-3f93ca1c8-20240212",
version: "18.3.0-canary-7a32d718b-20240212",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1247 = {
Expand Down Expand Up @@ -9626,7 +9626,7 @@ var internals$jscomp$inline_1247 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-3f93ca1c8-20240212"
reconcilerVersion: "18.3.0-canary-7a32d718b-20240212"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1248 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ if (__DEV__) {
) {
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
}
var ReactVersion = "18.3.0-canary-3f93ca1c8-20240212";
var ReactVersion = "18.3.0-canary-7a32d718b-20240212";

// ATTENTION
// When adding new symbols to this file,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -590,4 +590,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-3f93ca1c8-20240212";
exports.version = "18.3.0-canary-7a32d718b-20240212";
Original file line number Diff line number Diff line change
Expand Up @@ -586,7 +586,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-3f93ca1c8-20240212";
exports.version = "18.3.0-canary-7a32d718b-20240212";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
3f93ca1c8dec1fd85df4dbb748a2df9438fc699f
7a32d718b9ea0eb9ea86e9d21d56a5af6c4ce9ed

0 comments on commit ac5a55d

Please sign in to comment.