Academy
easyReact Native#1

useState counter with validation

Prompt

Create a React Native component that renders a counter with +1 and -1 buttons. The counter must never go below 0. Show the current count.

Solution

const [count, setCount] = useState(0)
return (
  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
    <Button title="-" onPress={() => setCount(c => Math.max(0, c - 1))} />
    <Text style={{ fontSize: 24 }}>{count}</Text>
    <Button title="+" onPress={() => setCount(c => c + 1)} />
  </View>
)
Mentor's take

This warm-up is really about where state transitions live. The invariant "never below 0" belongs inside the updater — setCount(c => Math.max(0, c - 1)) — not in an if guard around the call site. With the clamp in the updater, every future caller (a swipe gesture, a reset button) inherits the rule for free; with a guard outside, each new caller must remember it.

The functional-update form matters for correctness, not style. setCount(count - 1) closes over the count value from the render that created the handler. React batches state updates, so two rapid presses can both read the same stale value and only decrement once. c => c - 1 receives the latest state at apply time, so updates compose no matter how they're batched.

Red flag: writing if (count > 0) setCount(count - 1). It usually works in a demo, but it reads stale state under batching and duplicates the invariant at every call site. Interviewers use this exact counter to probe whether you understand closures over render snapshots.

Say it: "I put invariants inside the functional updater so they hold under React's batching and for every future caller, instead of guarding each call site with stale closed-over state."