Why are Hooks so Popular?
What are the similarities and differences between the Hooks in React and Vue?
React started supporting the Hooks feature in version 16.8.x. Later frameworks such as Vue3, SolidJS, and Preact also announced support for the Hooks feature one after another. Even backend frameworks like Midway have implemented Hooks-like APIs.
So why is it so popular? What magic does it have?
What are Hooks?
You may already be familiar with React Hooks, but Hooks are actually software engineering terms that usually refer to:
When the system runs to a certain period, the callback function registered to the timing will be called.
There are many “hooks” in the browser. Such as onload event, addEventListener etc. And there are similar APIs in operating systems such as Windows.
Why Hooks?
1. State logic reuse
Before Hooks, if you wanted to implement state logic reuse in React, you might choose a solution such as higher order components. In Vue2.x, you need to use mixins. But mixins have several disadvantages:
Implicit dependencies, hard-to-trace properties: Since mixins run in the same namespace, it’s hard to trace the root cause. You also can’t arbitrarily modify one of them, as it may be referenced in many places. These dependencies are hidden from the developer. You even need to know all the reference relationships to be able to modify it.
Naming conflicts: There is no guarantee that two specific mixins will work together. You have to check if you have the same named variable in both.
Increased complexity over time: Every time a new feature is added, the previous mixin may not apply, so we need to add additional logic. It might be simple in early development, but as the project continues to iterate, all mixins become more and more abstract. This makes the code increasingly difficult to maintain.
So how does Hooks solve it?
Hooks allow state logic to be extracted from components, which allows these state logic to be tested individually and reused. And the source of each variable is clearly traceable, which will undoubtedly make our development easier.
2. Code organization
Imagine a scenario where we might start subscribing to a message on component initialization and then unsubscribe on component unloading. Lifecycles are needed to help us in traditional Class components. With Hooks, we can combine these related parts into separate Hooks, which can be shared between multiple components. Instead of being forced to divide according to the life cycle.
This is actually the embodiment of high cohesion and low coupling. Aggregating related code makes it easier for us to debug and modify. It also greatly improves the maintainability and readability of the code.
3. Easier than Class
Class needs to understand how this works in JavaScript, and the same is true in Vue.
Using Hooks in function components is just a single function to reuse state logic without fear of this binding.
4. Friendly progressive test
Not only React, but also the new Hooks in Vue3, you can choose Hooks progressively. It can coexist with the previous code, and you can slowly realize the benefits brought by Hooks.
Hooks in React and Vue
1. Usage restrictions
React can only use hooks in function components, and Hooks can only be used at the top level, not in loops, conditionals or nested functions.
Vue3 can only use hooks during the setup cycle. This is an earlier lifecycle than created and will only be called once per component render update.
So why is this happening?
This is because React converts code written in JSX into Fiber nodes. The state corresponding to those Hooks will be stored on the corresponding Fiber node in the form of a linked list. When taking out the corresponding Hooks, you need to use .next to access them in sequence. This means that once the order is different, the corresponding value will be wrong, which will lead to bugs.
In Vue3, the Proxy monitoring mechanism is used. It can easily and accurately know that the data has changed, and it can also know which components it affects. This component can then be updated directly.
2. Advantages and disadvantages
React as a whole is all about immutability, and so are React Hooks. The advantage of this is that you can clearly understand the context of the program and know where it comes from. And this also brings a mental burden to developers. Without optimization, Hooks will be called every rendering update. To avoid this, you need to use useMemo or useCallback to optimize.
And there are some developers who will be lazy and not actively optimize their application anywhere, so this will do a lot of unnecessary CPU work.
And the overall orientation of Vue is mutability. It spends a lot of effort at compile time, analyzing templates and applying a lot of AOT optimizations. There are relatively few things that React can do at compile time, and there are few optimizations.
Vue’s responsive tracking technology can make updates more nuanced. It renders the smallest possible range without providing any optimizations. It will not bring a lot of mental burden to developers.
But Vue requires you to understand its features very well. If the application is large, the mutability causes it to query more paths to know why the update happened this time. And the path to immutability is clearly clear.
That’s all for today. I’m Zachary and I’ll keep outputting stories related to web development. If you like such stories and want to support me, please consider becoming a Medium member. It costs $5 per month and gives you unlimited access to Medium content. I’ll get a little commission if you sign up via my link.
Your support is very important to me — thank you.
