Q) What is React Hook?

Hooks are new addition in React 16.X version.

Hooks we can declare only in function component.

Hooks allow function components to have access to state , lifecycle methods and
other React features.

React provides a few built-In hooks like useState(),useEffect(),useReducer() and

It is possible to create custom hook in react.

1) useState() hook
----------------
A useState() is a Hook that allows us to add React state to function components.

Project structure
-----------------
myapp12
|
|---node_modules
|
|---public
| |
|---[Link]
|---[Link]
|---[Link]

|-----src
| |
|---[Link]
|---[Link]
|
|---[Link]
|---[Link]

step1:
------
Create a react application i.e myapp12
ex:
npx create-react-app myapp12

step2:
-----
Switch to the project.
ex:
cd myapp12

step3:
------
 Download web-vitals dependency in our project.
ex:
npm install web-vitals

step4:
------
Run react application.
ex:
npm start

step5:
------
Test the application by using below request url.
ex:
[Link]

step6:
-----
Write a below code inside [Link] file.

[Link]
------
import React from 'react'
import { useState } from 'react'

function App()
{

const [name,setName]=useState("Alan");

const handleClick=()=>
{
setName("Jose");
}

return (
<div>
<h1>Name : {name} </h1>
<button onClick={handleClick}> Change </button>
</div>
)
}

export default App

2) useEffect() hook
-------------------
It is used to perform side effects in function components.

Data fetching , setting up a subscription, changing the document title and manually
changing the DOM in React components are examples of side effects.

Project structure
-----------------
myapp12
|
|---node_modules
|
|---public
| |
|---[Link]
|---[Link]
|---[Link]

|-----src
| |
|---[Link]
|---[Link]
|
|---[Link]
|---[Link]

step1:
------
Create a react application i.e myapp12
ex:
npx create-react-app myapp12

step2:
-----
Switch to the project.
ex:
cd myapp12

step3:
------
Download web-vitals dependency in our project.
ex:
npm install web-vitals

step4:
------
Run react application.
ex:
npm start

step5:
------
Test the application by using below request url.
ex:
[Link]

step6:
-----
Write a below code inside [Link] file.

[Link]
------
import React from 'react'
import { useState,useEffect } from 'react';

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

const handleClick=()=>
{
setCount(count+1);
}

useEffect(()=>{
[Link]=`You have ${count} clicked`;
});

return (
<div>
<h1>Count : {count} </h1>
<button onClick={handleClick}> Increment </button>
</div>
)
}

export default App

3) useReducer() hook
--------------------
The useReducer() Hook is similar to the useState() Hook.

It allows for custom state logic.

The useReducer Hook accepts two arguments.

useReducer(<reducer>, <initialState>)

The useReducer Hook returns the current state and a dispatch method.
ex:
const [state,dispatch]= userReducer(reducer,initialState);

Project structure
-----------------
myapp12
|
|---node_modules
|
|---public
| |
|---[Link]
|---[Link]
|---[Link]

|-----src
| |
|---[Link]
|---[Link]
|
|---[Link]
|---[Link]
step1:
------
Create a react application i.e myapp12
ex:
npx create-react-app myapp12

step2:
-----
Switch to the project.
ex:
cd myapp12

step3:
------
Download web-vitals dependency in our project.
ex:
npm install web-vitals

step4:
------
Run react application.
ex:
npm start

step5:
------
Test the application by using below request url.
ex:
[Link]

step6:
-----
Write a below code inside [Link] file.

[Link]
----------
import {useReducer} from 'react';

const initialState=0;
const reducer=(state,action)=>
{
switch(action)
{
case 'increment': return state+1;
case 'decrement': return state-1;
case 'reset': return initialState;
default: return state;
}
}
function App()
{
const [count,dispatch]=useReducer(reducer,initialState);

return (
<div>
<h1>Count : {count}</h1>
 <button onClick={()=>dispatch('increment')}>Increment</button>
<button onClick={()=>dispatch('decrement')}>Decrement</button>
<button onClick={()=>dispatch('reset')}>Reset</button>

</div>
)
}
export default App;

Custom Hooks
==============
Hooks which are created by the user based on the application requirement are called
custom hooks.
ex:
myCustomHook()
customHook()
ihubHook()
myCustomCounter()

Project Structure
-------------------
myapp13
|
|----node_modules
|
|----public
| |
|----[Link]
|----[Link]
|----[Link]
|
|-----src
| |
|----[Link]
|----[Link]
|----[Link]
|
|-----[Link]
|-----[Link]

[Link]
---------------
import React from 'react'
import {useState} from 'react'

function CustomHook()
{

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

const handleClick=()=>
{
 setCount(count+1);
}

return(
{
count,
handleClick
})
}

export default CustomHook

[Link]
--------
import React from 'react'
import customHook from './CustomHook';

function App() {

const data=customHook();

return (
<div>
<h1>Count : {[Link]}</h1>
<button onClick={[Link]}>Increment</button>
</div>
)
}

export default App