Hooks in ReactJS

Hooks in react JS are the newest feature in the history of React, we will learn how the hooks play an important role in the new React and how they are compatible with functional components.

What are Hooks?

In react, we use both class-based components and functional base components as well. As we have seen the functional-based components are like more clean and less and organized code, but they have their disadvantages we were not able to use the props, state and state change in them

They used generally when to summon the output, unlike class-based components, we can use state and state change in them.

=> React Hook is not only JavaScript functions that can be only be used inside functional components or inside other hooks. Hooks usually follow a rule, it is not hard and fast rule neither syntax but we write hooks as

Advantages:-

They are highly reusable
They can be used inside the other hooks to we can react wrapper hell
We can Share logics between components using hooks
We can also write the write custom hooks as we will see further

Note:- For Hooks to be used we need the React version of 16.8 and above

Rules of Hook

There are some basic rules we use in the React these rules are applied using any Hook

We can write custom hooks inside the pre-defined hooks.
We always have to use Hooks in the root level of the components.
React hooks cannot be used inside of the functions it is possible for function inside the function in normal JS but in hooks are exceptions.
We cannot use inside the Conditional Statements like ‘if’.

How to useState works?

We can only use the useState inside the functional components, so first, we describe a component.

The useState is a replacement of the typical state and state management we used to do inside the class-based components.

These help us use the functional component through-out the react app and we can avoid the jumble between the class-based and functional components

We can also use modern JavaScript ES6 to write the functional components and hooks which is up-to-dated JavaScript with clean code.

The Hooks always have only two objects, one is the current state and the other which it returns is the updated state.

In the given example we will see the use of useState.

Create a react app using command create-react-app command and clean it
Import React and useState in the App.js file.
```
import React, { useState } from 'react';
```
Create a functional component named App using ES6 JavaScript
We create two object variables to save the state and stateChange.
```
const[count,setCount]  = useState(0);
```
Then return the JSX to Display the count and two-button one to increase the counter when clicking and others to reset the counter.
Then export the App.

App.js

import React, { useState } from 'react';
import './App.css';

const App = () => {

  const[count,setCount]  = useState(0);

  return (
  <div>
    <h2>Counter using Hooks</h2>
  <p>Count is : {count}</p>
  <button style={{border: '2px solid black'}} onClick={() => setCount(count+1)}>Increase</button>
  <button style={{marginLeft: '5px', border: '2px solid black'}} onClick={() => setCount(0)}>Reset</button>
  </div>
  )
}

export default App;

What is Effect Hook?

Effect Hooks are pre-build Hooks in React which can be used for doing the side/simultaneous stuff

For example, we are scrapping some information from the web then it takes a few milliseconds to extract that information, till then our state is not updated. Effect Hook renders the page and holds it for the information to gather and re-render again while updating the state.

This is how we can integrate with the previous problem

In the App.js introduce useEffect import from react
use it display and re-render the counts that will be displayed
Export the file

App.js

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
       <button onClick={() => setCount(count + 1)}>
        Reset
      </button>
    </div>
  );
}

export default App;