5 ms·
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 the
by hazza1 8y ago
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.
- yzmtf2008 8y agoYou don't need to think about them. If you a state library like redux or mobx, chances are you'll never touch Context API at all. For simple use cases, setState is really all you need.
- k__ 8y agoMost people underestimate how much you can accomplish with a clean architecture and setState.
- fleetfox 8y agoIf you want clean declarative APIs you need context to build them.
- wakeless 8y agoThis 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.
- AWebOfBrown 8y agoI 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.
- wakeless 8y agoFair 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.
- matthewmacleod 8y agoThat's entirely true. It becomes much more applicable where there's more complex state that's used throughout an application.
- williamdclt 8y agoI'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.
- guscost 8y agoIn 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.
- marcus_holmes 8y agoI agree. It's like React is slowly morphing into Java and all the classfactory.singleton().instance.objectstore stuff
- thecatspaw 8y agoand even in java this "classfactory.singleton().instance.objectstore" doesnt really happen if you kind of know what you're doing
- chacham15 8y agoThis 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 https://www.youtube.com/watch?v=hEGg-3pIHlE
- romanovcode 8y agoJust a side note while watching that video. Seems to me that video could be 10 minutes if he would use Sublime, VS or Atom. Does he uses VIM just to show-off? Seems like everything is super slow because of it.
- vuldin 8y agoHe'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.
- hamstercat 8y agoI 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.
- root_axis 8y agoSeems to me that vim is superior to the alternatives you listed, but that's just my opinion.
- romanovcode 8y agoSeemed to me he was struggling with VIM usage. I never said VIM is worse/better.
- matthewmacleod 8y agoFrameworks 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!
- weego 8y agoFrameworks 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.
- spraak 8y ago> 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
- grandpoobah 8y agoI 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.
- dustingetz 8y agoReal 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.
- root_axis 8y agoThis is totally incorrect. Context has nothing to do with JavaScript scoping behavior. Directly from the React documentation: "Context provides a way to pass data through the component tree without having to pass props down manually at every level."
- dustingetz 8y agoThat is what dynamic scope is, and javascript doesn't have it, but ClojureScript does, and React still breaks it.
- root_axis 8y agoI'm sorry but you're not making any sense. What does the react context api have to do with dynamic scoping?
- greydius 8y agoToday I learned: Haskell is not a "proper" functional programming language
- dustingetz 8y agoIt surprised me to find out that you're right, for anyone following along, I ended up here: https://news.ycombinator.com/item?id=3453141 https://news.ycombinator.com/item?id=3453141
- madeofpalk 8y agoReally? The old Context api was fairly terse and hard to use. Definitely not what I would call "clean and readable".
- qofcourse 8y agoIn a year every React app will be wrapped in a context called "theGlobalVariables" because while the languages and frameworks change, the programmers don't.