React is Simple!

Think React state is easy? One wrong move and your counter breaks.

Why It Happens

React batches state updates.
Using setState(state + 1) can overwrite updates with stale values.
The functional form setState(prev => prev + 1) ensures correctness.

Don't

const [count, setCount] = useState(0);

setCount(count + 1);
setCount(count + 1); 
// ❌ Result: count = 1

Do

const [count, setCount] = useState(0);

setCount(prev => prev + 1);
setCount(prev => prev + 1);
// ✅ Result: count = 2

Explanation

  • setCount(count + 1) → uses an old snapshot of state.
  • setCount(prev => prev + 1) → React passes the freshest value.

Updating state without prev is like asking for “one more slice” 🍕…
but the box already got emptied. Always ask from the current box.

3

If you have a fediverse account, you can quote this note from your own instance. Search https://hackers.pub/ap/notes/0198e5c1-6bb1-787d-a67e-4e0dfcd0e84e on your instance and quote it. (Note that quoting is not supported in Mastodon.)