React Counter (Guarded Decrement)

Solution

Overview

A single count state drives the UI. Increment adds 1, decrement subtracts 1 but clamps at 0. Disabling the minus button at zero communicates the rule to users and prevents invalid negative values. This is a clean example of state-driven UI and controlled updates. Performance & pitfalls: consider edge cases (empty state, rapid clicks), trade-offs in state shape, and accessibility of interactive controls.

1

Single component with guarded decrement

Initialize count with useState(0). Implement inc as setCount(c => c + 1) and dec as setCount(c => Math.max(0, c - 1)). Bind the decrement button’s disabled prop when count === 0, and render the count in the UI so every click immediately reflects the new state. Edge cases & testing: cover invalid inputs, ensure predictable reactivity, and keep the UI stable under rapid updates.

Notes & Pitfalls

Pitfalls

Updating the value without clamping, which allows negatives.
Recomputing from stale state instead of using the current value correctly.

Techniques

Using `useState` for local component state.
Guarding updates with `Math.max`.

Similar questions

Image Slider (Dots + Previous/Next)easy React Chessboard Click/Highlight (N×N Board)easy React Dynamic Table (Rows × Columns)easy

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse React interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 30-day foundations study plan Open Company Prep Open React Framework Prep Guide