5 ms·
Closures are handy for a number of things. Many event listeners are closures const [username, setUsername] = useState('') const onChange = event => set
by neurotrace 6y ago
Closures are handy for a number of things. Many event listeners are closures
const [username, setUsername] = useState('')
const onChange = event => setUsername(event.target.value)
const onSave = () => dispatch(saveUsername(username))
return (
<div>
<input value={username} onChange={onChange} />
<button onClick={onSave}>Save</button>
</div>
)
This code contains two closures
- throw1234651234 6y ago1. React is a confusing mess of UI/logic mixing. 2. Where are the closures and what's the necessity to use them?
- klodolph 6y ago1. UI and logic are inherently mixed. It takes a lot of effort and design sense to partially separate them, and trying to completely separate them is ill-advised. If this is confusing, it’s due to the fact that making a modern UI is an inherently complicated problem (and not something that is just made more complicated by frameworks). 2. onChange and onSave are both closures. It isn’t technically necessary to use closures, but you need to find the correct setUsername from onChange, and since setUsername isn’t a global variable, closures are the natural and easy way to do it.
- spanhandler 6y ago> 1. React is a confusing mess of UI/logic mixing. Hooks have shown that Super Serious programming can also be comedy, which is pretty cool.
- doteka 6y agoDon’t think I get how React hooks are comedy. Can you elaborate?
- spanhandler 6y agoThey're low-level interfaces to a custom property and method lookup table in a language that already has that built-in. I guess it might just be me but I get a little chuckle every time I read/read-praise-about/use them. I dunno, the functions-or-bust crowd happily doing and championing manual OO machinery fiddling amuses me.
- SketchySeaBeast 6y agoDoes that built-in method lookup table contain all the re-rendering and general state management work that React does with its hook?
- spanhandler 6y agoNah, but that could have been build on traditional methods and properties just as well, without having to re-implement those first. It's not like every component doesn't resolve to an instance of an object anyway. [EDIT] what they couldn't have done, probably, would have been cleanly implementing that on top of class-based components without then having to tell their large and influential functions-are-the-only-way constituency that they'd need to write a lot more classes in the future. I suspect aversion to having to deliver that message is part of why we ended up with hooks as the solution, and classes left behind instead.
- SketchySeaBeast 6y agoI can understand why it may seem non-optimal, but I don't have much of a dog in the fight, and I refactored a hobby project to react hooks a little while ago and found it both much less code and much less complicated. But to each their own.
- dragonwriter 6y ago> what they couldn't have done, probably, would have been cleanly implementing that on top of class-based components without then having to tell their large and influential functions-are-the-only-way constituency that they'd need to write a lot more classes in the future. They were saying that for a long time before hooks when the only way they had it implemented at all was for classes, and functional components were usable for much narrower use cases. I suppose, if they could have done it cleanly with classes, they would have, whatever that meant saying to those downstream who aesthetically preferred functions. I don't know if it inherently worked better with functions, if the core devs themselves are just more proficient in that style, or if it was just a confluence of experience and the timing that the push to improve functional components occurred, but in the end functional components are just much cleaner.
- chrisweekly 6y agoReact is a UI runtime^1, designed and refined for the purpose of managing what gets rendered, in a performant and maintainable way. 1. https://overreacted.io/react-as-a-ui-runtime/ https://overreacted.io/react-as-a-ui-runtime/ Where else would you propose putting UI rendering logic?
- gabrielsroka 6y agoThat's not JavaScript. Is it JSX?
- neurotrace 6y agoJSX is just an extension of JavaScript. I wrote React-like code because that's very common right now but this would also be true for more traditional JS. const todoItems = [] addTodoItem.addEventListener(event => { todoItems.push(event.target.value) renderTodoItems() })