react-context-devtool
react-context-devtool copied to clipboard
deeppatel234
Improve context name display
This improves how contexts that are not explicitely named (e.g. debug_id8 etc.) are displayed in the sidebar.
The idea was to simply show the first three keys of the context object. By this you usually get a pretty good idea about what context it is.
| Before | After |
|---|---|
 |
 |
Hello @bernhardc ,
Thank you for contributing to react-context-devtool.
you can assign a display name to the context using https://github.com/deeppatel234/react-context-devtool#set-display-name-for-context-api.
we can not show object first n keys as display name because the value is not fixed to object every time. it should be number, string, function only. and this computation is to do some overhead to the rendering of your app.
Well yes you can manually assign a display name, but this PR would provide some convenience out of the box without needing that manual step. Also there may be some context from external libraries where you can't set the display name.
Also as you can see in the code, there is already a check whether the context value is an object. I also don't see any performance implications - why would that Object.keys() call introduce some measurable overhead?
It would be useful to have a way to sort/group Contexts. In the screenshot below, you can see that MUI contexts are mixed up with user-defined contexts, which makes it difficult to quickly debug. If I prefix it with something, sometimes the names are randomly listed as well. Some basic grouping/filter based on name would be awesome.
