React used to be so clean and readable - what happened?
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.
This is actually a really weird example of using the Context API. I have no idea why you would want to use it to manage a single switch of state.
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.
I think it makes more sense if you start thinking outside the Toggle component itself.
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.
Fair enough, I suppose. I still think the additional complexity of having to bring in the context for the save of passing 1 variable through the whole tree is overkill though.
I'm developping a web app with fairly complex forms (imagine form sections, form templating...). The immediate use case of Context that comes to mind would be to pass down the `readonly` prop from the top-level Form component all the way down to the Field component, without having to drill through `FormSection`, `Template`, `TemplateSection` or any other component between the Form and the Field.
In the case of a form, what’s wrong with composing a whole tree of custom “presentation” components in one render? Does this take up too much space?
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.
This is actually addressing something that you cant really easily do in other frameworks (or even previously in React). The idea is to return control of rendering to the caller rather than have the component be responsible for fully rendering the entire thing. I.e. a toggle component only knows how to toggle and you can choose what goes in it. Ryan Florence has a much better illustration of why you'd want to do this: https://www.youtube.com/watch?v=hEGg-3pIHlE
He's not showing off. He used vs code for a while but I believe got frustrated with issues, so he went back to something more stable and familiar for him. I can't blame him there.
I would not attribute malice to such an insignificant detail. My guess would be that he prefers VIM over the others. I prefer VS Code myself, but an editor is a very personal choice for a developer.
Frameworks and their abstractions tend to evolve out of what we find people need to use in the real world when building their applications.
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!
Frameworks evolve out of a single group of people's needs. Unfortunately once the entire world gets involved they often end up including every possible need anyone could have.
> they often end up including every possible need anyone could have.
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
I worked on a React project for a good six months and even though I hadn't touched it in a while I still felt like I had a good grasp on things. Looking over the code samples in that article, and some of the other things that the article links to, I really struggled to make sense of it all.
Real functional languages have "lexical scope" and "dynamic scope", both are necessary for proper functional programming. React.js "functions" don't evaluate depth-first like a traditional call stack, but rather "breadth first" (because it offers optimization opportunities) and this breaks dynamic scope, so these Context hacks are an attempt to get it back. You are right though, I think React.js is not the end state and the harder we push it the more the "almost-functional-programming" abstraction is going to leak.
In a year every React app will be wrapped in a context called "theGlobalVariables" because while the languages and frameworks change, the programmers don't.
I admire the spirit of the post but it seems contrived and hard to grok.
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?
The new context api isn't meant to replace stateless components and recompose [0], it's meant to be a more sound context API that lives almost exclusively in library code, replacing usage of the old context + (maybe) 5% more use cases.
Can you briefly describe what you mean by recompose? I'm a backend dev tasked with writing some react, and what I'm using currently is redux+react, but that's about it. More information would be appreciated so I can research :)
I wrote a small library [1] for localization messages using the new Context API; I'm pretty sure that any other base for it would have made its implementation significantly more complicated.
Seems fairly complicated. React devs should read about XAML, where components have “templates” that allow the consumer of the component to specify how it’s rendered, leaving the component itself to provide behaviors and a default template. I think Flutter works similarly.
39 comments
[ 3.2 ms ] story [ 72.4 ms ] threadIt'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."
https://github.com/airbnb/enzyme/issues/1553
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
[1] https://www.npmjs.com/package/react-message-context
Example XAML ToggleSwitch template (notice how consumer is free to specify animations too): https://msdn.microsoft.com/en-us/library/windows/apps/mt2991...
Disclosure: I work for Microsoft.