Vue JS hooks and React JS Hooks at a glance (hint: it’s not that complex)
As React Doc says, Hooks are a new feature proposal that lets you use state and other React features without writing a class. It’s currently in React v16.7.0-alpha and for Vue JS it’s experimental.
The good things about hooks and why you don’t need to be worried are explained below.
- Hooks don’t replace our knowledge of React/Vue concepts.
- There are no plans to remove classes from React/Vue by the creators.
- Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.
- Fully backwards compatible.
The motivations for the Hooks feature proposal are the following ones:
- To reuse the Stateful components logic
- Reducing complexity from components to make it easier to understand
- Get rid of the phenomena “Classes confuse both people and machines”
The idea is to give power to functional components in the React ecosystem. These are the primary reasons why React introduces the hooks and so as VUE the very next day. Now, we’ll be diving to codes using Hooks with both React JS and Vue JS.
You can try React hooks API in the React 16 alpha release:
$ yarn add email@example.com
Using Hooks with React JS
In React Previously for creating a counter APP, our code was like as below,
Using React Hook it has become much easier by using the direct API provided by React to the concepts we already know like props, state, context, refs, and lifecycle.
Using Hooks with VUE
As I said ‘Evan You’ Experimentally implemented React hooks in Vue.
Previously using Vue JSX2 I created Counter APP like this
Using Hooks in Vue JS, it can be done like this,
By checking the implementation of Hooks in both React and Vue JS, we found the benefits of using Hooks here a really clear.
- Reduce code implementation, we pass from having a class based to only have a functional based component. This also means a reduction of bytes from bundle size.
- Logic is now shareable, we have decoupled the logic not only for state creation, even for how the state updates.
There are two types of Hook, Basic and Additional in React JS. Hoping, Vue JS will be implementing all of them soon.
- Refs → useRef
- Callbacks → useCallback
- Reducers → useReducer
- Memoized Values → useMemo
- Imperative Methods → useImperativeMethods
- Mutation Effects → useMutationEffect
- Layout Effects → useLayoutEffect
Straight from the React Doc,
How does React associate Hook calls with components?
React keeps track of the currently rendering component. Thanks to the Rules of Hooks, we know that Hooks are only called from React components (or custom Hooks — which are also only called from React components).
useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple
useState() calls each get an independent local state.
Disclaimer from React JS about using Hooks:
Finally, there is no rush to migrate to Hooks. We recommend avoiding any “big rewrites”, especially for existing, complex class components. It takes a bit of a mindshift to start “thinking in Hooks”. In our experience, it’s best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to send us feedback, positive or negative.
Disclaimer from Vue JS about using Hooks:
Totally experimental, don’t use this in production.
Interested to know more about Hooks?
You can read more about hooks from the React DOC, here. Get a curated list of featured Medium articles regarding React JS hooks from the article below.
Medium’s featured articles about React Hooks (React Hooks: All in one Place)
This article intends to make your journey of learning React hooks a bit easier, as you get all important articles…
Happy Hooking, Hope you’ve enjoyed this post :)