nytimes / react-tracking

🎯 Declarative tracking for React apps.
https://open.nytimes.com/introducing-react-tracking-declarative-tracking-for-react-apps-2c76706bb79a
Other
1.87k stars 123 forks source link

Take advantage of useDebugValue to display data in devtools #193

Closed bgergen closed 2 years ago

bgergen commented 2 years ago

We're taking advantage of React's useDebugValue hook here in order to display contextual tracking data when a user inspects the hook in React devtools. 2 open questions:

  1. Is there any other data internal to the library that would be useful to display here?
  2. ~Is it necessary for us to call this twice? I like having it in the higher-level useTracking hook because it makes it more discoverable. Otherwise, devs would need to inspect the nested useTrackingImpl hook in order to discover it. I added it also to useTrackingImpl because that makes it visible for components that are using the HoC rather than the hook, since that hook is shared between both. It's redundant, but covers both use cases. Def open to thoughts on this.~ Decided to remove from the useTrackingImpl hook—I don't think devs would expect to see it there for a component using the decorator so it probably wouldn't get much use.

Screenshot

Screen Shot 2022-01-06 at 6 03 23 PM
tizmagik commented 2 years ago

Neat! Hadn't thought of using the debug hook. Do you have a screenshot of what this looks like in the devtools?

bgergen commented 2 years ago

@tizmagik Just added a screenshot! What's really nice about it is that the callback function only gets called if the user is inspecting the hooks in the devtools.