What is a React HOOK? Where to use hooks? HOW to add HOOKS in react?

First of all we start from the basic high-level idea for the newbies out here. Lets start off with react basics…. You all can also take a look of basic implementation of website using hooks which i have attached at the end .😻

NOTE: If you already have experience in react and here only to learn about hooks then, skip the the “Introduction to React ” and move to “Hooks” section down 👇 ……

Introduction to React

React is a JavaScript library for building user friendly and interactive user interfaces created by FACEBOOK. React will update and render out the change when the data gets updated. Lets imagine React is building built by completing all the building blocks. The smallest building blocks of the react are the elements.

The next building block is a Components. These components help to build reusable and independent user interfaces. We can create components using classes and functions.

Example of a class component which prints “Hello world “as the output is shown below.

Example of a functional component which prints “Hello world” as the output is shown below.

Now we can further categorize these components into stateful and stateless components. Before that, what is a state? 😵

State is a built-in object where we store the property values that belongs to the component. The below code shows a stateful class component.

Here in this class component, books is a state property that is initialized as a null array. So now a question arise for you. How to implement stateful functional component right? 😕

The answer is Yes! 😍 but we cant use the keywords “ this. state” in functional component😮, instead we gonna use keywords “useState”..

This is a ECommerce website with very complicated use of state in class component:

NISHY SHOPPING

and the code for the above website:

nishyjana/nishy-shopping-app

These might be helpful for the beginners who just started to learn react.

Now we will see what is HOOKS 😻

HOOKS

As mentioned above ,what exactly is this useState? Here is the point HOOKS comes in to play. But what it is?

What is a HOOK?🤥

HOOKS is a special function that let us to build add state to a functional component. Hooks are introduced in React 16.8

So where to use it?

Where to use hooks?

When we write a functional component and if we want to add state to it, we can change the functional component into a class component since we cant add state to a function, or as the alternate way we can use HOOKS to add state in a functional component. This is a situation we use HOOKS . But How to add HOOKS?

HOW to add HOOKS?

Now we see an example of a variable called count in state that is initialized to zero in both stateful class and functional component..

figure-1 stateful class component

figure- 2 Functional component with HOOKS

Both figure-1 and figure-2 shows how to add state to both class and functional component. The figure-2 shows the implementation of HOOKS.

In figure-2, “useState ”is the keyword which is equivalent to “this. state” in figure-1.

AND the picture below show how to initialize the state in class component, where the count is initialized to 0.

AND the picture below shows , how to initialize the state in a functional component.

This is the high-level idea of what is hook and hook implementation.. We will see about the hook features used in hooks and how similar are they to class components.

1. useState() 👉 This is hook, which is almost similar to “this. state” in class component
2. setCount in above example 👉 This is almost similar to setState in class component
3. useEffect() 👉 This is a hook which is almost similar to React class lifecycle methods such as componentDidMount, componentDidUpdate and componentWillUnmount all three combined.

RULES OF HOOKS

There are few rules where we should use hooks and shouldn't use it.

We can call HOOKS when:

• We can call Hooks from React function components.
• We can call Hooks from custom Hooks.

We cant call HOOKS when:

• Hooks inside loops, conditions, or nested functions

This is the explanation of

What is a HOOK?

Where to use hooks?

HOW to add HOOKS?

Hope you have got an basic understanding of hooks and the usage of it. 😍

You can take a look of a Demo of using HOOKS in functional component very basic example website :

React BASics

Code for the above website :

nishyjana/react-basics

ENJOY CODING, CODE DAILY and CODE BETTER