Introduction

When it comes to web development, who doesn't love using one of the most awesome and lively featured Javascript library, React, often referred to as ReactJS. Today we are going to know about of the most awesome feature of ReactJS' version 16.8.
Cutting the chase, I was introduced to the awesome world of React by my mentors at my current workplace, and since then I am after React and learning it as much as I can in a befitting manner. And no doubt, one of the most fascinating features to me was React Hooks.

What are hooks in React?

Hooks were introduced in React Version 16.8. One of their most awesome and well knows feature is it that they let you use state and other React features in a Functional Component.
So Basically, Hooks are the functions which literally, Hook Into, React state, and lifecycle features from functional components.

How Hooks work?

Before we know how React hooks work, let us define what closure is. “Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.”

To make it a bit easy to understand, hooks let you use the functions instead of switching between HOCs, Classes, and functions. As Hooks are regular Javascript functions, thus you can use the built-in Hooks and create your own custom one.

Always remember

• Hooks should always be called at the Top Level.

By following this rule, you are making sure that Hooks are always called in the same order as they were declared each time your component renders. (Remember that don't ever call the hooks inside the functions that are nested and also inside the loops.)

• Hooks should always be called from React Functions. Don't call Hooks from regular JavaScript functions. Instead, you can

1. Call Hooks from React Function components.
2. Call Hooks from custom Hooks.

Can't quench your thirst for learning more about hooks in react? Stay tuned for more articles on types, examples, usages, and other aspects of mastering the art of using hooks in React.