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.

Motivation:

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 react@v16.7.0-alpha

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.

, 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.

Basic

State →useState

→useState Context → useContext

→ useContext Side-Effects → useEffect

Additional

Refs → useRef

→ useRef Callbacks → useCallback

→ useCallback Reducers → useReducer

→ useReducer Memoized Values → useMemo

→ useMemo Imperative Methods → useImperativeMethods

→ useImperativeMethods Mutation Effects → useMutationEffect

→ 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).

There is an internal list of “memory cells” associated with each component. They’re just JavaScript objects where we can put some data. When you call a Hook like 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.

Happy Hooking, Hope you’ve enjoyed this post :)