I want to use Context API, but I'm put off by this:
Note
Don’t use context just to avoid passing props a few levels down. Stick to cases where the same data needs to be accessed in many components at multiple levels.
It just tells me not to use it, without saying why. And it doesn't tell me how to decide what counts as "many components" or "multiple levels". It's very off-putting.
Can it be rephrased to clarify the potential downsides I might run into? (Is the issue just that Context brings its own complexity, which should be weighed up against the complexity of prop-plumbing, or are there other downsides?)
callumlocke
All 2 comments
Developers new to React typically hate “prop plumbing”—probably because JSX forces you to often repeat the prop name twice (e.g. something={something}). But props are pretty much like function arguments.
You wouldn’t think to start using global variables or dependency injection just because you need to pass some argument through a chain of tree functions. But that’s exactly how React beginners feel until they get used to passing props down. The intention here is to avoid presenting context as a solution to verbosity.
I’m open to different wordings. The current one is intentionally FUD-y to serve as a filter for people who don’t feel experienced with React. If they’re not sure they know what they’re doing, they’ll avoid it. By the time they recognize this is a bit of a FUD, they probably already know React well enough to at least understand prop plumbing is not bad by itself (even if verbose), and should be familiar with other strategies to avoid prop drilling, like accepting props.children.
What are specific dangers of using context? It couples specific ancestor and grandchildren components, so it’s harder to trace the data flow, and what affects what. It’s easier to accidentally break some child by removing some distant parent. It makes components less reusable. For inexperienced developers, just like with global variables or dependency injection, context makes it too easy to create incomprehensible architectures.
gaearon
on 21 Jun 2018
Going to close this -- if you have other ideas please send a PR!
gaearon
on 4 Jul 2018
Related issues
trungdq88
·
3Comments
tajo
·
4Comments
gajomon
·
4Comments
tesseralis
·
3Comments
mbrowne
·
5Comments
Most helpful comment
Developers new to React typically hate “prop plumbing”—probably because JSX forces you to often repeat the prop name twice (e.g.
something={something}). But props are pretty much like function arguments.You wouldn’t think to start using global variables or dependency injection just because you need to pass some argument through a chain of tree functions. But that’s exactly how React beginners feel until they get used to passing props down. The intention here is to avoid presenting context as a solution to verbosity.
I’m open to different wordings. The current one is intentionally FUD-y to serve as a filter for people who don’t feel experienced with React. If they’re not sure they know what they’re doing, they’ll avoid it. By the time they recognize this is a bit of a FUD, they probably already know React well enough to at least understand prop plumbing is not bad by itself (even if verbose), and should be familiar with other strategies to avoid prop drilling, like accepting
props.children.What are specific dangers of using context? It couples specific ancestor and grandchildren components, so it’s harder to trace the data flow, and what affects what. It’s easier to accidentally break some child by removing some distant parent. It makes components less reusable. For inexperienced developers, just like with global variables or dependency injection, context makes it too easy to create incomprehensible architectures.