So I'm trying to understand the best practice use-cases of React Context API vs the standard Composition pattern.
One of the edge-cases, in my opinion, would be an authenticated user that the App uses its data (e.g. User: {name: string, pass: string, posts: Array<>, ...}) throughout the code (in different components).
I tried deciphering what React Docs has to say about it, but it's kinda awkward because it seem to be sort of self-contradictory.
In the beginning the Docs gives a couple of examples for Context usage:
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
But then it goes to say that in many cases Composition would be enough, and the given example is about a current user:
For example, consider a Page component that passes a
userandavatarSizeprop several levels down so that deeply nestedLinkandAvatarcomponents can read it... One way to solve this issue without context is to pass down the Avatar component itself so that the intermediate components don’t need to know about theuseroravatarSizeprops
So essentially after saying that Context would be good for user data handling, the Docs gives an example using Composition.
I'm not trying to nit-pick on, or mock the Docs, definitely not my intent. What I'm trying to understand is, since obviously both ways are applicable, what is the best practice for user data handling throughout the App? Are there any considerations I should take when choosing between those two methods, aside from comfortability? I see that in the Docs it says about Context:
Apply it sparingly because it makes component reuse more difficult
How so, especially in this case? I can understand it in cases where you don't know what data your component would require (and hence the use of props.children), but that isn't such a case.