Hacker News Reader

Comment by spanhandler | Hacker News Reader

One of the goofiest things about JavaScript is how some of its most important and basic features and properties—say, prototypal inheritance and functions-are-objects—fall in the "you should probably never use these in any way that actually leverages their notable capabilities in JS, and if you think you need to, think again, and please... don't" category.

The result is that practically no-one wants to write in whatever a "JS native" paradigm might look like. Everyone wants to write it like C, or like Java, or like OCaml, or whatever. Mind, I don't think it's a bad thing people avoid writing "JS native" style, because I certainly don't want to be handed a codebase in which anyone's done anything remotely interesting with prototypal inheritance—it's just something I find interesting about the community of such a popular language.

View on HN

This. Though pretentious "experts" push it as "a must know for senior JS developers". Same with closures. Sure, it's nice to know when you create a closure by accident, but using it on purpose? Come on. It's all hacks for implementing "private" modules.

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

1. React is a confusing mess of UI/logic mixing.

2. Where are the closures and what's the necessity to use them?

1. 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.

> 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.

Don’t think I get how React hooks are comedy. Can you elaborate?

They'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.

Does that built-in method lookup table contain all the re-rendering and general state management work that React does with its hook?

Nah, 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.

I 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.

> 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.

React 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/

Where else would you propose putting UI rendering logic?

That's not JavaScript. Is it JSX?

JSX 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()
    })

Reply on news.ycombinator.com