17 replies

How does react updates counter variable when used in useState hook

const [counter, setCounter] = useState(0);
const increment = () => setCounter(counter + 1);

return <button onClick={() => {
    increment();
    increment();
}>{counter}</button>

const [counter, setCounter] = useState(0);
const increment = () => setCounter(counter + 1);

return <button onClick={() => {
    increment();
    increment();
}>{counter}</button>

Can someone explain why this implementation only increments the button once, even though increment was called twice?

Also, notice that

counter

counter

is a const, right? How come this value is updated each time we click our component? I'm a bit confused. What is happening under the hood?

KP-C

Kevin Powell - Community•8mo ago•

17 replies

Faker

How does react updates counter variable when used in useState hook

const [counter, setCounter] = useState(0);
const increment = () => setCounter(counter + 1);

return <button onClick={() => {
    increment();
    increment();
}>{counter}</button>

const [counter, setCounter] = useState(0);
const increment = () => setCounter(counter + 1);

return <button onClick={() => {
    increment();
    increment();
}>{counter}</button>

Can someone explain why this implementation only increments the button once, even though increment was called twice?

Also, notice that

counter

counter

is a const, right? How come this value is updated each time we click our component? I'm a bit confused. What is happening under the hood?

How does react updates counter variable when used in useState hook

Similar Threads

How does react updates counter variable when used in useState hook

Similar Threads

Similar Threads

Similar Threads