Hooks are coming to steal your Mixins
Happy Halloween Vuempires and Zombiettes!!!
Hooks are the cats pajamas right now in the React world. Everyone and their grandma is hooking up! Yes, this will be one of those posts, full of puns. Sorry not sorry
So what are Hooks actually?
They are a pretty nifty way of extracting away state logic from components, using a sort of shared functions. Think of it as external state services that can be plugged in and composed into components.
But that doesn’t really explain allot now does it. What best than the source of the whole thing — React Conf 2018
I would advise you watch the whole thing, doesn’t matter that its React specific, the concept is the same.
Another good read is from the React Docs — https://reactjs.org/docs/hooks-intro.html Just skip to the good parts, no need to read their Classes problems.
Now, where does Vue plug into this thing? Here is what Evan has to say about it, in a nutshell:
Caught your attention? Does this mean Mixins are going away? Nah, don't think so. The Vue community has been quite disturbed by this thought, and been spamming all over, so I don't think the Vue team will do that.
Rather think of it as a cool extra feature. Like how the React folks have done it, optional. And it didn’t take long to get a Proof of Concept going on.
This is an example implementation by Evan You — Vue creator, that shows it’s quite possible to use the Hooks concept it the Vue ecosystem. As a POC its not production ready at all, so please do not start implementing it like the React folks. Everyone is rewriting their plugins now… can’t blame em, those classes some times were pretty… eh. Anyway…
Vue has Mixins, and they do an awesome job for the majority of cases. They are easy to read, can be mixed into a component and boom, you are sharing logic. However they come just short when it comes to more advanced use cases, like name collisions or composing Functional Components that have their own state.
You can use Hooks to extract in-component state management logic and reuse that logic by composing it back into multiple other components.
Example counter component Evan did, but with extracted internals.
Example using a functional component as just a plain template
Here is a short post that got featured in the Vue Newsletter this week, explaining it a bit further.
For more info you could checkout the whole Twitter thread that Evan started and many people came with pretty good arguments:
https://twitter.com/youyuxi/status/1056670607121760257
You can also take a look at Scoth.io’s take on the React side of things— https://scotch.io/tutorials/getting-started-with-react-hooks
This Facebook thread is also hot right now on the topic
I my self am still figuring out how I could mix hooks into my daily workflow. Stay tuned for more updates.
