Is it possible to change the displayName of a Context.Consumer?

Question

How can I find my way around nested Contexts and avoid this naming hell in React Developer Tools?

Is it maybe possible to change the displayName of a Context.Consumer to give it a more, well, "context"?

What you see below is React Developer Tools showing a bunch of stacked "Context.Consumer" components, which creates a confusing view.

Answer 1

This works (at least on React v16.3.0+):

SomeContext.Consumer.displayName = "SomeContext.Consumer";
SomeContext.Provider.displayName = "SomeContext.Provider";