Naming Containers for Debugging Purposes

I want to be able to distinguish different container context providers by name when using React DevTools.

Unnamed context providers:

Even though I know I could just have a single container provider for my whole app (and therefore the naming would not be necessary as it would be clear what the provider is), I currently am migrating from raw-context usage and still have my contexts separated.

All of my contexts do this with the createContainer API:

const {Provider, useTrackedState} = createContainer(() => useState({...}));

// derive some custom hooks from useTrackedState...

export {Provider as SpecificSystemProvider};

And when I stitch together all of my providers, during runtime, I am unable to distinguish from the different providers I’ve created (regardless if they are globally scoped or locally scoped), as seen in the screenshot.

Provider.displayName = 'SpecificSystemProvider'; does not seem to work 😢

The React Context docs says you can name the underlying Context object with displayName, so could createContainer() have an optional containerName parameter that changes the internal context.displayName for debugging purposes?

[dai-shi]

https://www.npmjs.com/package/react-tracked/v/1.7.6 is published. thanks for your contribution. closing.

[seanblonien]

Yea looks good to me, tested these changes with my enterprise app and seems to work as simply as we’d expect it (not much to it really).

Yes, totally cool with contributing to OSS, I love what you do and the amazing packages you’ve given to the community ❤