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

Introduction to React

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:

and the code for the above website:

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

Now we will see what is HOOKS 😻

HOOKS

What is a HOOK?🤥

So where to use it?

Where to use hooks?

HOW to add HOOKS?

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

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

ENJOY CODING, CODE DAILY and CODE BETTER

BEng(Hons) in Software Engineering

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store