Skip to main content

Simple Counter

Difficulty: Warm-up

Problem Statement​

Build a counter with an increment button. Display the current count and update it on each click.

Live Demo​

Try the running app below — this is the target behavior for the challenge.

Simple Counter — Live Demo
Count: 0

What Interviewers Expect​

  • Use useState correctly (functional updates when needed).
  • Wire button click to state update.
  • Keep UI readable with clear labels.

Step-by-Step Implementation​

Step 1 — Create state​

Initialize count with useState(0).

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

Step 2 — Render count​

Display count in JSX so UI reflects state.

<p>Count: <strong>{count}</strong></p>

Step 3 — Increment handler​

Use functional update to avoid stale state bugs.

<button onClick={() => setCount((c) => c + 1)}>Increase</button>

Complete Implementation​

Copy-paste ready single-file solution. Use this as your reference after attempting the challenge yourself, or paste it into CodeSandbox / StackBlitz to run locally.

App.jsx
import React, {useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{display: 'flex', alignItems: 'center', gap: '1rem'}}>
      <span>
        Count: <strong>{count}</strong>
      </span>
      <button type="button" id="mainButton" onClick={() => setCount((c) => c + 1)}>
        Increase
      </button>
      <button type="button" onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

Final Checklist​

  • UI works for primary flow
  • Edge cases handled (empty/disabled/loading where relevant)
  • State updates are immutable
  • Components are readable and reasonably split
  • You can explain trade-offs out loud in an interview

Next Challenge​

Continue to the next item in the sidebar when you're comfortable implementing this from scratch in 30–45 minutes.