Render only once using UseEffect
CODE
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
CODE
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 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 *
CODE
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
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR