React hooks useState hook [duplicate]
The doubt is , in the webpage the value gets incremented and displays but in console it displays the previous value......what am i not understanding ?
when i click on the button , in the webpage the value gets incremented but whereas at the console output it's still the previous value :/
function App() {
function handleClick()
{
setValue((prev)=>prev+1)
console.log(value)
}
const [value,setValue]=useState(0);
return (
<div className="App" style={{fontSize:"100px"}}>
{value}
<button onClick={handleClick}>increment</button>
</div>
);
}
export default App;
This is beacause setValuse
is async function, and value in state will be update in next renderer.
Check this:
function handleClick()
{
setValue((prev)=>prev+1)
console.log(value)
}
const [value,setValue]=useState(0);
useEffect(() => { console.log(value)}, [value])