5 ms·

They absolutely do not have their place. Just about everything is worse with class components. I’ll take a dozen useEffects over a single class component any da

They absolutely do not have their place. Just about everything is worse with class components. I’ll take a dozen useEffects over a single class component any day. That said, the hooks model is far from perfect. They give you a lot of rope to hang yourself with and were badly introduced. Within weeks the internet was ablaze with terrible advice. When so many people get it wrong, the library is to blame. And I wish hooks were as robust as Solid.js’ signals model.

mmis1000 4y ago
I don't think hook themselves are a bad thing. But the way react implements hook probably is. The react team invented their hook format the suite themselves the most, but that probably isn't for other. Vue 3 also has hook now. But none of these defects in the article exist. In vue. To use some value in a effect, you just use it and it is tracked. If you need to clear up your code. You cut some code into a useXxx function, and your reusable utility is done. You can use it everywhere now. You don't really need to specify dependency of whatever by yourself. If you must manipulate a dom, you just manipulate it. It will work as long as you revert the change before vue want to update it again.(And vue do provide a hook for you to attach a handler when these happen) These restrictions are added by the way react implements hook, but not hook themselves. Hooks are just more user friendly services (by allow the hook to attach to component instance without all the glue codes(addListener or whatever))
- gherkinnn 4y ago
  Vue 1.x was great, v2 lost its way, and Vue 3 with the composition API looks fantastic on paper. (I haven’t used it in any meaningful way) I’m even more impressed with the extended Vue ecosystem like Vite, Vitest.
  - mmis1000 4y ago
    I used it in a few project. And it reduces the code by a lot. For example. To make a mutex to prevent duplicate submit of form. You use need to declare a instance field and wraps the code that do the submit. That alone is 3 lines of code but don't even include error handling. But now I sealed it into a one line hook const wrap = useMutex() const submit = wrap(async () = { … }) And then the submit can't run in parallel now.
  - KronisLV 4y ago
    > Vue 3 with the composition API looks fantastic on paper. (I haven’t used it in any meaningful way) Recently worked on migrating a large codebase over from a legacy solution to Vue 3 with composition API, it was a pretty enjoyable experience, especially with Pinia! Though I'd say that the problem was that most component libraries/frameworks out there actually don't support Vue 3 well enough. Last I checked, only the following were viable with Vue 3: - Ant Design - Element Plus - PrimeVue (went with this, also has icons and a layout solution; also alternatives available for React and Angular) Most of the other ones considered weren't quite there yet: - Vuetify - Quasar - BootstrapVue - Vue Material - Buefy - View UI - Vuikit - Chakra UI I mean, is it really so hard to get a bunch of pre-built components for Vue 3 with Bootstrap, or Bulma? It feels a bit like the Python 2 to Python 3 migration in some respects.
    - Hawxy 4y ago
      > Most of the other ones considered weren't quite there yet From what I recall, quasar managed to update very quickly. Vuetify is currently in Beta for Vue 3 as they went with a greenfield rewrite to deal with tech debt. I rolled it out to a production site recently and it works well. BootstrapVue completely dropped the ball, despite the corporate sponsorships the original maintainers went missing for a whole year & bailed. It got new maintainers at the start of the year, but they've been delayed by current geopolitical events.
      - KronisLV 4y ago
        > From what I recall, quasar managed to update very quickly. This is true, at least there now is Vue 3 support, just checked: https://quasar.dev/ https://quasar.dev/ Though I can't edit the original post anymore. Oh well, thanks for clearing that up.
KronisLV 4y ago
> I’ll take a dozen useEffects over a single class component any day. Someone actually did in a project once and that lead to render loops that were hard to debug or solve: https://blog.kronis.dev/everything%20is%20broken/modern-react-is-broken https://blog.kronis.dev/everything%20is%20broken/modern-reac... Instead of a clear message about what caused that loop and maybe a walkthrough of the last N iterations (which changes caused which logic to be triggered), the error message was just a vague and lazy error (even AngularJS errors were better back in the day, filling in details in the docs as URL parameters). Then again, over the years I've formed the opinion that both approaches are bad, just in different ways. There is no silver bullet, just look at how even desktop software and UI solutions struggled to be workable throughout the decades, of course things won't be that much better in regards to front end. However, Vue's approach to hooks seems refreshing: creating and nesting components still isn't as easy as in React, but getting things done feels a little bit less cryptic and not as confusing, especially with something like Pinia!

mmis1000 4y ago

I don't think hook themselves are a bad thing. But the way react implements hook probably is. The react team invented their hook format the suite themselves the most, but that probably isn't for other. Vue 3 also has hook now. But none of these defects in the article exist. In vue. To use some value in a effect, you just use it and it is tracked. If you need to clear up your code. You cut some code into a useXxx function, and your reusable utility is done. You can use it everywhere now. You don't really need to specify dependency of whatever by yourself. If you must manipulate a dom, you just manipulate it. It will work as long as you revert the change before vue want to update it again.(And vue do provide a hook for you to attach a handler when these happen) These restrictions are added by the way react implements hook, but not hook themselves. Hooks are just more user friendly services (by allow the hook to attach to component instance without all the glue codes(addListener or whatever))

gherkinnn 4y ago
Vue 1.x was great, v2 lost its way, and Vue 3 with the composition API looks fantastic on paper. (I haven’t used it in any meaningful way) I’m even more impressed with the extended Vue ecosystem like Vite, Vitest.
- mmis1000 4y ago
  I used it in a few project. And it reduces the code by a lot. For example. To make a mutex to prevent duplicate submit of form. You use need to declare a instance field and wraps the code that do the submit. That alone is 3 lines of code but don't even include error handling. But now I sealed it into a one line hook const wrap = useMutex() const submit = wrap(async () = { … }) And then the submit can't run in parallel now.
- KronisLV 4y ago
  > Vue 3 with the composition API looks fantastic on paper. (I haven’t used it in any meaningful way) Recently worked on migrating a large codebase over from a legacy solution to Vue 3 with composition API, it was a pretty enjoyable experience, especially with Pinia! Though I'd say that the problem was that most component libraries/frameworks out there actually don't support Vue 3 well enough. Last I checked, only the following were viable with Vue 3: - Ant Design - Element Plus - PrimeVue (went with this, also has icons and a layout solution; also alternatives available for React and Angular) Most of the other ones considered weren't quite there yet: - Vuetify - Quasar - BootstrapVue - Vue Material - Buefy - View UI - Vuikit - Chakra UI I mean, is it really so hard to get a bunch of pre-built components for Vue 3 with Bootstrap, or Bulma? It feels a bit like the Python 2 to Python 3 migration in some respects.
  - Hawxy 4y ago
    > Most of the other ones considered weren't quite there yet From what I recall, quasar managed to update very quickly. Vuetify is currently in Beta for Vue 3 as they went with a greenfield rewrite to deal with tech debt. I rolled it out to a production site recently and it works well. BootstrapVue completely dropped the ball, despite the corporate sponsorships the original maintainers went missing for a whole year & bailed. It got new maintainers at the start of the year, but they've been delayed by current geopolitical events.
    - KronisLV 4y ago
      > From what I recall, quasar managed to update very quickly. This is true, at least there now is Vue 3 support, just checked: https://quasar.dev/ https://quasar.dev/ Though I can't edit the original post anymore. Oh well, thanks for clearing that up.

KronisLV 4y ago

> I’ll take a dozen useEffects over a single class component any day. Someone actually did in a project once and that lead to render loops that were hard to debug or solve: https://blog.kronis.dev/everything%20is%20broken/modern-react-is-broken https://blog.kronis.dev/everything%20is%20broken/modern-reac... Instead of a clear message about what caused that loop and maybe a walkthrough of the last N iterations (which changes caused which logic to be triggered), the error message was just a vague and lazy error (even AngularJS errors were better back in the day, filling in details in the docs as URL parameters). Then again, over the years I've formed the opinion that both approaches are bad, just in different ways. There is no silver bullet, just look at how even desktop software and UI solutions struggled to be workable throughout the decades, of course things won't be that much better in regards to front end. However, Vue's approach to hooks seems refreshing: creating and nesting components still isn't as easy as in React, but getting things done feels a little bit less cryptic and not as confusing, especially with something like Pinia!