[DevTools] Measure the Rectangle of Suspense boundaries as we reconcile #34090
Conversation
github-actions
bot
added
the
React Core Team
| if (!publicInstance) { | ||
| // The publicInstance may not have been initialized yet if there was no ref on this node. | ||
| // We can't initialize it from any existing Hook but we could fallback to this async form: | ||
| // renderer.extraDevToolsConfig.getInspectorDataForInstance(instance).hierarchy[last].getInspectorData().measure(callback) |
There was a problem hiding this comment.
@hoxyq The current technique is required to be async which should be fine with the new React Native APIs. However, currently we can only read the size this way if the publicInstance has been initialized which is now lazy. So it works sometimes. Sometimes it'll be blank. #33943
So this works sometimes but not always.
We don't have access to initialize this from the injected hooks. We do have access to the extraDevToolsConfig which has some info we can use. However, that's only available as an async API which would require a more complex implementation here. That would work for old versions too.
We could also add another injected devtools hook for measuring instances but that would require upgrading React Native versions to get them.
eps1lon
left a comment
eps1lon
left a comment
There was a problem hiding this comment.
Don't unblock me too fast 😄
sebmarkbage
force-pushed
the
devtoolssuspenserects
branch
from
c997760 to
57992a5
Compare
Consider making this capability injected by the renderer.
We only do this if we're not the Suspense boundary that's suspended or if we're in a hidden tree. This lets all Suspense boundaries show their content's rect, rather than their fallback's rect (which might be null).
If they didn't, we can bail out there. If they did, we also check their children.
sebmarkbage
force-pushed
the
devtoolssuspenserects
branch
from
748681a to
136f8bd
Compare
2 participants
Stacked on #34089.
This measures the client rects of the direct children of Suspense boundaries as we reconcile. This will be used by the Suspense tab to visualize the boundaries given their outlines.
We could ask for this more lazily just in case we're currently looking at the Suspense tab. We could also do something like monitor the sizes using a ResizeObserver to cover when they change.
However, it should be pretty cheap to this in the reconciliation phase since we're already mostly visiting these nodes on the way down. We have also already done all the layouts at this point since it was part of the commit phase and paint already. So we're just reading cached values in this phase. We can also infer that things are expected to change when parents or sibling changes. Similar technique as ViewTransitions.