Recently on Twitter a question was asked, roughly, how to untangle 2 react contexts that use state/callbacks provided by each other.
Several answers were suggested, ranging from combining them into a single context, to using callbacks from one context to sync state with another.
While I have no doubt that any of the provided solutions could be made to work, I couldn't help but think about another solution that I think is more in the react style of composition.
So, without further ado, my solution:
Much like the unix philosophy of "Do 1 thing, and do it well", each context is reduced to a single responsibility. The two original contexts can now be used independently, with the third context doing only the composition.
Feel free to provide feedback. Good? Bad? Pro's / Con's?