Counter
Build a simple counter component with increment, decrement, and reset functionality. The classic first React component — demonstrates useState and event handlers.
Requirements
- Display the current count as a large number
- Increment button increases count by 1
- Decrement button decreases count by 1 (can go negative)
- Reset button sets count back to 0
- Show a status label: Positive / Negative / Zero
- Color the count green when positive, red when negative
Key Patterns
useState(0)Functional update: setCount(c => c + 1)Derived state (no extra useState for label)Event handlers onClickConditional styling
Important
Interview Tip
Always use functional updates when the new state depends on the previous state: setCount(c => c + 1) instead of setCount(count + 1). This avoids stale-closure bugs in async contexts. The label and color are derived values — never put them in state, compute them inline from count.