What is Hook?
Hooks are a new addition in React 16.8. Because of Hooks in react we can use state and other React features without writing a class in function component. React provides a few built-in Hooks like useState, useEffect etc.

When use Hooks:
If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We’re going to do that right now

Rules of Hooks: 1. Only call Hooks at top level- We should not call Hooks inside the loops, conditions or nested functions instead always use the hooks at the top level of your React function. 2. Only call hooks from React function – we should not call the hooks fronm regular Javascrip function instead call Hooks from React function, components or call Hooks from custom Hooks. 3. React relies on the order in which Hooks are called. 4. Hooks don’t work inside classes.

Build-In Hooks:
Declaring State – useState() –
useState is Hook that allows you to declare the React state to function component. We call it inside the function component to add some local state to it. useState returns pair value – current state and function that lets you update
React will preserve this state between re-renders.
You can call this function from event handler or somewhere else.

Syntax –
Import {useState} from ‘React’; // Importing useState Hook from React.
const [name, setName] = useState(‘Ghanshyam’) ; // Declaring state
variable.

When we declare a state variable with useState, it returns a pair – an array with two items. So by writing square bracket we are doing array Destructuring
const nameStateVariable = useState(‘Ghanshyam’) ; – The first item is current value – The second item is function that let us update it.

const nameStateVariable = useState(‘Ghanshyam’); const name = nameStateVariable[0]; // Frist item of Array const setName = nameStateVariable[1]; // Second item of Array
Note – You can call useState as many times as you want.
Accessing state –
In function we can use state variable directly.
Ex.

My name is {name}

Updating state –
Ex.
setName(‘Ram’);
Effect Hooks – useEffect() –
The Effect Hook lets you perform side effects in function component. Data fetching setting up a subscription, and manually changing a DOM in React components are all examples of side effect.useEffect is a hook for encapsulating code that has ‘side effects’. If you are familiar withReact class lifecycle methods,
You can think of useEffect Hook as componentDidMount, componentDidUpdate and componentWillUnmount combined.
Syntax –
Import {useState, useEffect} from ‘React’; // Importing useEffect Hook from React.
useEffect(Function, Array) – Function passes to useEffect will run after the render is commited to the screen. – Second argument to useEffect that is the array of values that the effect depends on.
useEffect(() => {
console.log(‘Hello useEffect’);
},[count]);
Note – You can call useState as many times as you want.

What Does useEffect Do :
By using this Hook, you tell React that your component needs to do something after render. React will remember the function that you passed and call it latter after performing the DOM updates. In this effect We set the document title, we could also perform data fetching or call some other imperative API.