Render only once using UseEffect
import { useEffect, useState } from "react";
function Input(){
const[name,setName] = useState('')
useEffect(()=>console.log("Component Mounted"),[]);
return(
<>
<input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
<p>Hi! Welcome {name}</p>
</>
)
}
export default Input
Output:
Note:
React is running in Strict Mode during development
React intentionally mounts, unmounts, and remounts components once in development to detect side effects. Because of that, it is printed twice in console, this happens only in development mode but in production build, it runs once
Render Every time using UseEffect
import { useEffect, useState } from "react";
function Input(){
const[name,setName] = useState('')
useEffect(()=>console.log("Component Mounted"));
return(
<>
<input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
<p>Hi! Welcome {name}</p>
</>
)
}
export default Input
Output:
Render Only when State changes using UseEffect
import { useEffect, useState } from "react";
function Input(){
const[name,setName] = useState('')
useEffect(()=>console.log("Component Mounted"),[name]);
return(
<>
<input value={name} type="text" onChange={(e)=>setName(e.target.value)}></input>
<p>Hi! Welcome {name}</p>
</>
)
}
export default Input
Output:
Note:
State Variable name is updated 4 times so the useEffect re-rendered 4 times the call back function
Two States and One Effect
Effect runs when count or name is changed
import { useEffect, useState } from "react";
function Input(){
const[name,setName] = useState('')
const[count,setCount]=useState(0)
useEffect(()=>console.log("Component Mounted"),[name,count]);
return(
<>
<input value={name} type="text" onChange={(e)=>{setName(e.target.value)
}
}></input>
<button value={count} onClick={(e)=>{
setCount(count+1)}
}>+</button>
<p>Hi! Welcome {name} and Count {count}</p>
</>
)
}
export default Input
Output
Note:
State variable name is updated thrice and so effect ran thrice
State variable count is updated thrice and so effect ran thrice for it as well
*Show Even only when count becomes Even *
import { useEffect, useState } from "react";
function Input(){
const[name,setName] = useState('')
const[count,setCount]=useState(0)
useEffect(()=>{
if(count%2===0){
console.log("even")
}
},[count]);
return(
<>
<input value={name} type="text" onChange={(e)=>{setName(e.target.value)
}
}></input>
<button value={count} onClick={(e)=>{
setCount(count+1)}
}>+</button>
<p>Hi! Welcome {name} and Count {count}</p>
</>
)
}
export default Input
Output
Note:
count is incermented 16 times and even is printed on console only 8 times for even counts only