In ReactJs Hook Is the Function which Allows you to implement Code faster And Without using Class.
In Reactjs Hook Is Not Work in Class Component it is Only Work in Function Component.
Rules of Hook to Use :-
- Hook Only Used In Function Component.
- Hook Can Not be Called Inside Loop.
- Hook is Always used in Top of Code.
List Of ReactJs Hook Most Used :-
- useState
- useEffect
- useMemo
- useContext
- useRef
- useReducer
This Is the Most Used Hook In ReactJs There Are Many More Hooks In ReactJS But These Are the Most Used Hooks.
1.useState :-
In ReactJs useState Most Important Part, useState is A Storage It Store the Data in a Variable, In ReactJs Any Data Change Means It is a Used State.
useState Can display Data Change output instant.
useState Only Declare In Top Of Page And Inside Function.
Example:-
import {useState} from "react";
function App() {
const [name,setName]=useState("Hello World");
return<div>{name}</div>;
}
export default App;
In the Above Example, We Create a State called name this state stores pair value. The first is the initial value “Hello World” And Second One can Update the State Value.
How to Update State Value?
Example:-
import {useState} from "react";
function App() {
const [name,setName]=useState("Hello World");
const handleStatevalue=()=>{
setName(“Hello World Demo”);
}
return<div><button onClick={handleStatevalue}>Change Name</button><br/>{name}</div>;
}
export default App;
In the Above Example, We Create One Button Called Change Name Inside Button Tag We Create OnClick Method This Method Call Function, And inside the Function We Change State Name.
2.useEffect :-
useEffect is A ReactJs Hook It allows all class Life Cycle Methods in a single Code.
useEffect also has Dependency it allows to run when the dependency value change.
Example :-
import {useState,useEffect} from "react";
function App() {
const [name,setName]=useState("Hello World");
useEffect(()=>{
setName("Hello World 2");
},[]);
return <div>{name}</div>;
}
export default App;
In Above Code We Used the useEffect hook Function this function return callback and the second square bracket is dependency it only Runs on Ones because we don’t use any dependency value.
After rendering all calls useEffect Call and Change the State Name.
Example :-
import {useState,useEffect} from "react";
function App() {
const [name,setName]=useState("Hello World");
const handleChangeState=()=>{
setName("Hello World 2");
}
useEffect(()=>{
console.log(name);
},[name]);
return <div><button onClick={handleChangeState}>Change State </button><br/>{name}</div>;
}
export default App;
In Above Code We use one button to change state value and this button onClick event this event calls a function handleChangeState and this function change state value after state value changes useEffect Call Ones A Display the Output. Whenever state value changes useEffect Call Automatic.
3.useMemo :-
useMemo is the same As useEffect Hook but It Only Runs When the State changes the unique value.
Example :-
import {useState,useMemo} from "react";
function App() {
const [name,setName]=useState("Hello World");
const handleChangeState=()=>{
setName("Hello World 2");
}
useMemo(()=>{
console.log(name);
},[name]);
return <div><button onClick={handleChangeState}></button><br/>{name}</div>;
}
export default App;
4.useContext :-
useContext Is A ReactJs Hook That Allows To Share of Data between Components. Without using props.
This hook is very useful for data pass.
Example :-
import {useState,useContext,createContext} from "react";
const state = {
name:"Hello World"
}
const ContextApi = createContext(state);
function App() {
return <ContextApi.Provider value={state.name}>
<ChildComponent/>
</ContextApi.Provider>;
}
function ChildComponent(){
const data =useContext(ContextApi);
return <p>{data}</p>
}
export default App;
In the Above Example, We Create One State variable inside the variable We Store Value, After We Create Context Provider Variable For Use to Data Transfer And This Variable We Store The State Variable Default Value After Our App Component inside We Create ContextAPi Provider This Provider Tag Inside all components pass the Value of State, after this, we Create Child Component We use useContext hook to get state Value And Display Inside <p> Tag.
Context Provider inside you also uses one or more Components.
5.useRef :-
useRef is a hook it is used like useState but it only one change it will not render the component when changing value.
useRef Create A Mutable Object And its Only Change Value But Not Render the Component And This Also Use For getting DOM Elements.
Example :-
import {useRef} from "react";
function App() {
const buttonClick = useRef(null);
const handleBtnClicked = () => {
buttonClick.current.value="Hello World";
console.log(buttonClick);
};
return <button ref={buttonClick} onClick={handleBtnClicked}></button>
}
export default App;
In the Above Example We Create a useRef state, And One function that can Change the useRef Value, After We Create One Button this Button, We Create onClick Event This Event calls the Function handleBtnClicked, and This Function Change useRef value without the render component.
6.useReducer :-
useReducer hook is the Same As useState But it Does Not Change Direct value this can First get the Action Type After That Type Accordingly Change The State Value.
useReducer is most useful in redux this can separate store this store has one initial state object value this object value pass in all component and useReducer Allows To change the Store Value in Any Component.
Example :-
import {useState,useReducer} from "react";
function reducer(state, action) {
switch(action.type) {
case 'increment':
return state+1;
case 'decrement':
return state-1;
default:
throw new Error();
}
}
function App() {
const [state, dispatch] = useReducer(reducer, 0);
return (
<>
Count : {state}
<button onClick={() => dispatch({type:'increment'})}> + </button>
<button onClick={() => dispatch({type:'decrement'})}> - </button>
</>
)
}
export default App;
In the Above Example, We Create a Reducer Function this Function has two arguments the first argument is state value and the second argument is action type, we have to use a switch case if the argument action type match then this perform action state value increment or decrement.
After our App Component, we have created a useReuder hook this like useState first is state and second is dispatch this dispatch is function and useReducer inside we give two arguments first is reducer function and second is the state default value.
After we create two buttons one increment And the Second is a Decrement inside this, we give an onClick Event in this event we call the dispatch function and this function inside we give a type to perform this task.
