6 ms·

Hooks seem to be a drastic change in how we're going to write React components in the future. I'm quite satisfied with the current way of writing components whi

Hooks seem to be a drastic change in how we're going to write React components in the future. I'm quite satisfied with the current way of writing components which is to me is very explicit (with no magic). With Hooks React is taking a different direction from their original motto of explicit design patterns. From the looks of it, Hooks seems like a counter-intuitive design pattern but traditionally that's how most of the JS concepts were before they went mainstream. I'm going to wait and see for some production success stories become giving it serious thought.

beaconstudios 8y ago
Hooks fix some of the composition headaches you get from render props, which is the current standard for composition (the heritage being HOCs -> render props -> hooks). They're basically mixins with weird syntax.
- WorldMaker 8y ago
  The syntax isn't even that weird? It's just function calls. The only "weird" bit is using array destructuring for multi-return and that's been in ES/JS for some time now, and definitely shouldn't look that weird to anyone that has worked in Python, as one example (and C# now supports destructuring even).
  - beaconstudios 8y ago
    The weirdness is because the state or context seemingly comes from thin air - there's no explicit location for the data.
    - WorldMaker 8y ago
      That's not really a syntax problem, though. Also, hidden state/context is also not that weird? Do you need to know the exact location of the memory/stream that `console.log()` writes to in order to log the console? The physical details of how `navigator.compass.getHeading()` gets its information to use a compass heading? Both of those trampoline off into native code and the details of what the actual "explicit" locations for them is both irrelevant and highly variable depending on browser and system. Unless you are looking at the namespace "objects" such as `console` or `navigator.compass` as "explicit locations", but you can add namespaces to your imports if that helps you feel like things are more "grounded". Import it and use it as `React.useState()` instead, for instance.
      - beaconstudios 8y ago
        Alright, weird semantics then. The hooks calls are unusual compared to normal Javascript code. If you read the other comments on this thread you'll see that I'm not the only one saying that. It comes down to the fact that it's a call, inside a render function, that has different behaviour on each call to said parent function. It's very magical - and the React team admit that, so I'm not sure what exactly you are arguing against. It's not like I'm new to Javascript either - I've been coding in JS for over 10 years. I understand how it works, but it's still weird-looking code. You can hack up the language to make stuff like the new hooks library, even without the unique quirks of React's internals. But libraries that intentionally do that to generate magical effects are generally considered "weird" too.
        WorldMaker 8y ago
        I appreciate something about it feels weird to a number of people, and it feels that way to me at times, too. I'm just pointing out: In JS call order always matters (it's an imperative language full of side effects), and many calls have side effects that very much differ based on the order you call them. Even if the gut reaction to hooks is that they "feel" magical or quirky, it's not that different from how a lot of black box function calls already work in the language, it's just maybe more obvious with hooks because they are more explicit in the rules on when you should call them. Which isn't to denigrate feeling weird about hooks. Again, even I still feel weird about them sometimes. Just that it is less unusual than that initial gut reaction seems to think it is.
Accacin 8y ago
I thought the same at first, but Dan Abramov and his blog[1] has changed my mind. [1]: https://overreacted.io/why-do-hooks-rely-on-call-order/ https://overreacted.io/why-do-hooks-rely-on-call-order/
danabramov 8y ago
In case you’re curious, I recently wrote up a deep dive on React from first principles that includes Hooks. https://overreacted.io/react-as-a-ui-runtime/ https://overreacted.io/react-as-a-ui-runtime/ Personally I don’t see them as being either “magic” or “implicit”. You might find my post helpful for conceptualizing how they fit into the picture. (Warning: it is a longread. But it also explains 90% of React on a single page.)
- koolba 8y ago
  That’s a great read.
- arethuza 8y ago
  I'm fairly new to the React world, but the content of that article was really interesting!
- news_hacker 8y ago
  Thanks for writing this. Really enjoy your writing style and hope you continue to write more!
- BilalBudhani 8y ago
  what a coincidence I just finished reading this article yesterday (and even Tweeted about it https://twitter.com/BilalBudhani/status/1092784595756556294 https://twitter.com/BilalBudhani/status/1092784595756556294). TBH, After reading the article I'm definitely putting effort to understand the thought process behind this change. Thank for writing up such a detailed & informative explanation on concepts in React.
- a-wu 8y ago
  I'm learning React and even though you prefaced it with "not beginner friendly", that was very helpful for understanding what goes on. Thanks!
- james_s_tayler 8y ago
  "on a single page" - I see what you did there.
jules 8y ago
Hooks make a lot more sense from a traditional FRP perspective. The code you write with hooks is basically identical to the code you'd write with early FRP systems. For instance, useState is called newWire in FranTk. The difference is that hooks have various limitations about where you can create them and how you can pass them around, which those FRP systems don't have. That's the result of React using plain old data as state, instead of having a signal abstraction as in FRP. In React the component function gets re-executed every time the state changes, whereas with FRP the component function gets executed once and builds up a dataflow graph that deals with the changes. That makes hooks very natural because they're just nodes in the dataflow graph.
talkingtab 8y ago
My litmus test for technology is whether it results in a) fewer lines of code b) simpler code and c) does it make me more productive. My experience with using hooks is that I rip out lots of cruft and it is easier for me to get my head around how to write things so I am more productive. The cost is learning a new paradigm, but the benefit for me was very high.
- case_of_snakes 8y ago
  I strongly recommend you temper your criterion `a` by how much the abstractions help or impede your understanding of the code later on, especially when trying to diagnose a bug.
  - williamdclt 8y ago
    I suppose that's b)
seandhi 8y ago
Edit: this is one reason I don’t do the social media thing. I read that in a totally different frame of mind than you wrote it in, probably. I am not one to get all preachy. I personally get caught up in analysis paralysis sometimes because everyone has convincing arguments. It’s because there are many right answers. There’s probably some deeper psychology there... dunno but it’s on me. No offense, but it would sometimes be good to remember that quote about sufficiently advanced technology being indistinguishable from magic when taking such an authoritative tone. There are probably some other equally talented developers who do ‘get it’ who might be a little unsure of themselves and continue to hold back and feel like an imposter. Anyway, that’s not really a call to change or anything. You do you. But I did want to remind everyone else, especially those unsure of themselves, that those are, like, their opinion... you also do you.
palerdot 8y ago
I have the exact opposite perception. Previously, I used to convert a function/stateless component, just because I need one transient state and it felt very verbose to switch to class components, while all it needed was one state and corresponding setState. With Hooks, all of them just become more transparent (you explicitly have to hook all the states, not just use one state and add later add more states to track). Though I admit I felt uncomfortable initially, it just feels right once you start working with them. I really like hooks!!!
sametmax 8y ago
Glad to read that as the top comment, because when they came out, I expressed strong doubts about this new features, and I mostly received mad comments in return. The alienated react fans stated that I didn't understand what modern code was, what a great idea those were and how from now on, everything will be better. Now hooks are certainly a technically interesting pattern. I can see why it can be desirable by some. But I can't shake the feeling it has too of a big potential for misuse and could add a lot of complexity to a react, a tool that already has a big cognitive load with an ecosystem letting easily creep technical debt. Besides, an important part of the JS community, up to now, has let me inconvinced about its ability to do the right thing, not to mention learning from other's past mistakes or even admitting when something is a problem at all.
- hombre_fatal 8y ago
  > Glad to read that as the top comment, because when they came out, I expressed strong doubts about this new features, and I mostly received mad comments in return. The alienated react fans stated that I didn't understand what modern code was, what a great idea those were and how from now on, everything will be better. Your post boils down to "Seems like it might be nice, but there might be bad sides, too" which seems fair, but the rest of your post is dressed up in a weird gloating dismissiveness and an exaggerated narrative about you, the epic heroic, fighting back the baying React Fans like in Doom's cover art. I wouldn't celebrate your skepticism just yet, especially not just because you found someone else on HN to commiserate with. There have been what I think are some convincing arguments for it in the comments and linked urls like https://overreacted.io/react-as-a-ui-runtime/ https://overreacted.io/react-as-a-ui-runtime/.
  - sametmax 8y ago
    No my answer boils down to: - hooks are technically interesting, but make it easy for humans to screw up. It's a precise critic. - the JS community has bad habits that can catalyse this, and above all, may lead them to avoid seing what's wrong - they get angry when we say it, and dismiss it as nonsense. Case in point.
marter 8y ago
Maybe you just don’t understand them yet.
deleted 8y ago
[deleted]

beaconstudios 8y ago

Hooks fix some of the composition headaches you get from render props, which is the current standard for composition (the heritage being HOCs -> render props -> hooks). They're basically mixins with weird syntax.

WorldMaker 8y ago
The syntax isn't even that weird? It's just function calls. The only "weird" bit is using array destructuring for multi-return and that's been in ES/JS for some time now, and definitely shouldn't look that weird to anyone that has worked in Python, as one example (and C# now supports destructuring even).
- beaconstudios 8y ago
  The weirdness is because the state or context seemingly comes from thin air - there's no explicit location for the data.
  - WorldMaker 8y ago
    That's not really a syntax problem, though. Also, hidden state/context is also not that weird? Do you need to know the exact location of the memory/stream that `console.log()` writes to in order to log the console? The physical details of how `navigator.compass.getHeading()` gets its information to use a compass heading? Both of those trampoline off into native code and the details of what the actual "explicit" locations for them is both irrelevant and highly variable depending on browser and system. Unless you are looking at the namespace "objects" such as `console` or `navigator.compass` as "explicit locations", but you can add namespaces to your imports if that helps you feel like things are more "grounded". Import it and use it as `React.useState()` instead, for instance.
    - beaconstudios 8y ago
      Alright, weird semantics then. The hooks calls are unusual compared to normal Javascript code. If you read the other comments on this thread you'll see that I'm not the only one saying that. It comes down to the fact that it's a call, inside a render function, that has different behaviour on each call to said parent function. It's very magical - and the React team admit that, so I'm not sure what exactly you are arguing against. It's not like I'm new to Javascript either - I've been coding in JS for over 10 years. I understand how it works, but it's still weird-looking code. You can hack up the language to make stuff like the new hooks library, even without the unique quirks of React's internals. But libraries that intentionally do that to generate magical effects are generally considered "weird" too.
      - WorldMaker 8y ago
        I appreciate something about it feels weird to a number of people, and it feels that way to me at times, too. I'm just pointing out: In JS call order always matters (it's an imperative language full of side effects), and many calls have side effects that very much differ based on the order you call them. Even if the gut reaction to hooks is that they "feel" magical or quirky, it's not that different from how a lot of black box function calls already work in the language, it's just maybe more obvious with hooks because they are more explicit in the rules on when you should call them. Which isn't to denigrate feeling weird about hooks. Again, even I still feel weird about them sometimes. Just that it is less unusual than that initial gut reaction seems to think it is.

Accacin 8y ago

I thought the same at first, but Dan Abramov and his blog[1] has changed my mind. [1]: https://overreacted.io/why-do-hooks-rely-on-call-order/ https://overreacted.io/why-do-hooks-rely-on-call-order/

danabramov 8y ago

In case you’re curious, I recently wrote up a deep dive on React from first principles that includes Hooks. https://overreacted.io/react-as-a-ui-runtime/ https://overreacted.io/react-as-a-ui-runtime/ Personally I don’t see them as being either “magic” or “implicit”. You might find my post helpful for conceptualizing how they fit into the picture. (Warning: it is a longread. But it also explains 90% of React on a single page.)

koolba 8y ago
That’s a great read.
arethuza 8y ago
I'm fairly new to the React world, but the content of that article was really interesting!
news_hacker 8y ago
Thanks for writing this. Really enjoy your writing style and hope you continue to write more!
BilalBudhani 8y ago
what a coincidence I just finished reading this article yesterday (and even Tweeted about it https://twitter.com/BilalBudhani/status/1092784595756556294 https://twitter.com/BilalBudhani/status/1092784595756556294). TBH, After reading the article I'm definitely putting effort to understand the thought process behind this change. Thank for writing up such a detailed & informative explanation on concepts in React.
a-wu 8y ago
I'm learning React and even though you prefaced it with "not beginner friendly", that was very helpful for understanding what goes on. Thanks!
james_s_tayler 8y ago
"on a single page" - I see what you did there.

jules 8y ago

Hooks make a lot more sense from a traditional FRP perspective. The code you write with hooks is basically identical to the code you'd write with early FRP systems. For instance, useState is called newWire in FranTk. The difference is that hooks have various limitations about where you can create them and how you can pass them around, which those FRP systems don't have. That's the result of React using plain old data as state, instead of having a signal abstraction as in FRP. In React the component function gets re-executed every time the state changes, whereas with FRP the component function gets executed once and builds up a dataflow graph that deals with the changes. That makes hooks very natural because they're just nodes in the dataflow graph.

talkingtab 8y ago

My litmus test for technology is whether it results in a) fewer lines of code b) simpler code and c) does it make me more productive. My experience with using hooks is that I rip out lots of cruft and it is easier for me to get my head around how to write things so I am more productive. The cost is learning a new paradigm, but the benefit for me was very high.

case_of_snakes 8y ago
I strongly recommend you temper your criterion `a` by how much the abstractions help or impede your understanding of the code later on, especially when trying to diagnose a bug.
- williamdclt 8y ago
  I suppose that's b)

seandhi 8y ago

Edit: this is one reason I don’t do the social media thing. I read that in a totally different frame of mind than you wrote it in, probably. I am not one to get all preachy. I personally get caught up in analysis paralysis sometimes because everyone has convincing arguments. It’s because there are many right answers. There’s probably some deeper psychology there... dunno but it’s on me. No offense, but it would sometimes be good to remember that quote about sufficiently advanced technology being indistinguishable from magic when taking such an authoritative tone. There are probably some other equally talented developers who do ‘get it’ who might be a little unsure of themselves and continue to hold back and feel like an imposter. Anyway, that’s not really a call to change or anything. You do you. But I did want to remind everyone else, especially those unsure of themselves, that those are, like, their opinion... you also do you.

palerdot 8y ago

I have the exact opposite perception. Previously, I used to convert a function/stateless component, just because I need one transient state and it felt very verbose to switch to class components, while all it needed was one state and corresponding setState. With Hooks, all of them just become more transparent (you explicitly have to hook all the states, not just use one state and add later add more states to track). Though I admit I felt uncomfortable initially, it just feels right once you start working with them. I really like hooks!!!

sametmax 8y ago

Glad to read that as the top comment, because when they came out, I expressed strong doubts about this new features, and I mostly received mad comments in return. The alienated react fans stated that I didn't understand what modern code was, what a great idea those were and how from now on, everything will be better. Now hooks are certainly a technically interesting pattern. I can see why it can be desirable by some. But I can't shake the feeling it has too of a big potential for misuse and could add a lot of complexity to a react, a tool that already has a big cognitive load with an ecosystem letting easily creep technical debt. Besides, an important part of the JS community, up to now, has let me inconvinced about its ability to do the right thing, not to mention learning from other's past mistakes or even admitting when something is a problem at all.

hombre_fatal 8y ago
> Glad to read that as the top comment, because when they came out, I expressed strong doubts about this new features, and I mostly received mad comments in return. The alienated react fans stated that I didn't understand what modern code was, what a great idea those were and how from now on, everything will be better. Your post boils down to "Seems like it might be nice, but there might be bad sides, too" which seems fair, but the rest of your post is dressed up in a weird gloating dismissiveness and an exaggerated narrative about you, the epic heroic, fighting back the baying React Fans like in Doom's cover art. I wouldn't celebrate your skepticism just yet, especially not just because you found someone else on HN to commiserate with. There have been what I think are some convincing arguments for it in the comments and linked urls like https://overreacted.io/react-as-a-ui-runtime/ https://overreacted.io/react-as-a-ui-runtime/.
- sametmax 8y ago
  No my answer boils down to: - hooks are technically interesting, but make it easy for humans to screw up. It's a precise critic. - the JS community has bad habits that can catalyse this, and above all, may lead them to avoid seing what's wrong - they get angry when we say it, and dismiss it as nonsense. Case in point.

marter 8y ago

Maybe you just don’t understand them yet.

deleted 8y ago

[deleted]