Memo components that are not on the fast path show up as two components
Closed this issue · 2 comments
const SimpleMemoComponent = React.memo(function Component() { return null })
const MemoComponent = React.memo(function Component() { return null }, () => true)These two components show up differently in the dev tools tree. It might be useful to show that the component with a comparison function is outside the fast path, but that could maybe be done as a marker in the sidebar instead of in the tree itself.
To clarify, the SimpleMemoComponent above shows up as a single tree element: <Memo(Component)></Memo(Component)>. The MemoComponent shows up as <Memo><Component></Component></Memo>.
Another possible trick is to just have something in the generated name to indicate it isn't the common case. For example (done by making my own .displayName):
but this still runs into the problem of having to know that the parent/child fibers are intrinsically related.
React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).
Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools