Migrating to React’s New Context API
blog.kentcdodds.com
blog.kentcdodds.com
It's great these abstractions exist but for me I want a framework where I don't need to think about them. Vue comes closest to the original feeling I got when starting out with React.
For simple use cases, setState is really all you need.
The far better examples are providing a "theme" across multiple disparate components, and each of them being able to access the colours, or styles. (You could also just use CSS)
The other good example is being able to set the logged in user into a context and then being able to consume the context if you need access to the logged in user.
For passing down the state to the actual button(s), as Kent says, you could just use React.Children.map(). When you think about consuming that state from other components that need to know the toggle state, things get a bit messier, as many of those components might not be direct children of the actual <Toggle />. Maybe the toggling affects something in your navbar, for example.
In that case, the alternative to using context would be a global store, where the state provider sits above all components (think Redux, MobX).
If you're only consuming the toggle state from child / grandchild / sibling etc. components, the alternative typically involves passing down the toggle state from some parent / grandparent component, which means passing this.state.toggled down 2+ levels, instead of simply importing the context's consumer and subscribing where needed.
Context is now a reasonably simple and clean alternative to those options, but this example leaves envisioning the pain alleviated as an exercise for the reader.
You don’t always need to pass the prop through each individual component, instead you can render a section (or the whole form) together as one larger context-specific UI component, where everything in the render call has access to the same prop values.
Does he uses VIM just to show-off? Seems like everything is super slow because of it.
Context is generally a pretty powerful thing when used properly, and allows developers to build nice, readable code in more complex applications by extracting some of the complexity elsewhere, while maintaining a conceptually clean model. It's already used in common libraries like React Router, and establishing a first-class API for it seems like a good move in general.
And remember – if it's not useful for your particular use case, don't use it!
I don't think that's what is happening here with React. It'd be much different than it is already if that were the case, but instead it's stayed pretty lean
"Context provides a way to pass data through the component tree without having to pass props down manually at every level."
As soon as you go down the state and lifecycle method route my spidy senses start tingling.
I have yet to see an example on the new context api that wouldn't be clearer with stateless components + recompose. Perhaps someone could point me to the advantages?
[0] https://twitter.com/dan_abramov/status/984510107923963904