Resolves #195 (and generally improves performances for props-heavy components)
Prior to this change, inspecting a component serialized the first 5 nested levels of props/state/context data. This was okay for most cases- but in some extreme cases (objets with a lot of nested properties) this could cause a performance bottleneck. After this PR, we truncate nested objects much more aggressively. Now we only send their data over the bridge on-demand (similar to how v3 DevTools worked).
Internally, this technique is referred to as "dehydrating" and "hydrating" the values. Past a certain depth, nested values get "dehydrated" such that only metadata is sent across the bridge. The UI then requests these values be "hydrated" on-demand (when the user expands them) to fill in the missing data.
The old DevTools also had a pretty annoying behavior when it came to inspected props (see e.g. https://github.com/facebook/react-devtools/issues/1296, https://github.com/facebook/react-devtools/issues/1335). Specifically, when a component that had been "hydrated" updated, the hydration state was lost and all expanded paths were collapsed again. This PR does not preserve that behavior. Once a path has been "hydrated" it will not be dehydrated again by an update.
Here is a before (left) and after (right) comparison:
Resolves #195 (and generally improves performances for props-heavy components)
Prior to this change, inspecting a component serialized the first 5 nested levels of props/state/context data. This was okay for most cases- but in some extreme cases (objets with a lot of nested properties) this could cause a performance bottleneck. After this PR, we truncate nested objects much more aggressively. Now we only send their data over the bridge on-demand (similar to how v3 DevTools worked).
Internally, this technique is referred to as "dehydrating" and "hydrating" the values. Past a certain depth, nested values get "dehydrated" such that only metadata is sent across the bridge. The UI then requests these values be "hydrated" on-demand (when the user expands them) to fill in the missing data.
The old DevTools also had a pretty annoying behavior when it came to inspected props (see e.g. https://github.com/facebook/react-devtools/issues/1296, https://github.com/facebook/react-devtools/issues/1335). Specifically, when a component that had been "hydrated" updated, the hydration state was lost and all expanded paths were collapsed again. This PR does not preserve that behavior. Once a path has been "hydrated" it will not be dehydrated again by an update.
Here is a before (left) and after (right) comparison: