How to Create a Counter App in React: Simple Step-by-Step Guide

To create a counter app in React, use a functional component with the useState hook to track the count value. Update the count by calling the state setter function inside event handlers like button clicks to increase or decrease the count.

Syntax

A React counter app uses a functional component with the useState hook to hold the current count. The hook returns the current state and a function to update it. You then create buttons that call this update function to change the count.

• useState(initialValue): sets up state with an initial value.
• count: current state value.
• setCount: function to update the state.
• Event handlers like onClick call setCount to change the count.

jsx

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // state setup

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

Example

This example shows a complete React counter app. It displays the current count and two buttons to increase or decrease the count. The count updates immediately when you click the buttons.

jsx

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

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

  return (
    <main style={{ fontFamily: 'Arial, sans-serif', textAlign: 'center', marginTop: '2rem' }}>
      <h1>Simple Counter</h1>
      <p style={{ fontSize: '2rem' }}>Count: {count}</p>
      <button onClick={() => setCount(count + 1)} style={{ marginRight: '1rem', padding: '0.5rem 1rem' }}>
        Increase
      </button>
      <button onClick={() => setCount(count - 1)} style={{ padding: '0.5rem 1rem' }}>
        Decrease
      </button>
    </main>
  );
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<Counter />);

Output

Simple Counter
Count: 0
[Increase] [Decrease]

Common Pitfalls

Common mistakes include:

• Not using useState and trying to change variables directly, which won't update the UI.
• Updating state incorrectly by referencing stale values instead of the latest state.
• Forgetting to wrap event handlers in functions, causing immediate execution instead of on click.

Always use the setter function from useState and pass a function or new value to update state.

jsx

import React, { useState } from 'react';

/* Wrong: Directly modifying count variable (no UI update) */
function WrongCounter() {
  let count = 0;
  function increase() {
    count = count + 1; // This won't update the UI
  }
  return <button onClick={increase}>Increase</button>;
}

/* Right: Using useState setter function */
function RightCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Increase</button>;
}

Quick Reference

Concept	Description	Example
useState	Hook to add state to functional components	const [count, setCount] = useState(0);
State Setter	Function to update state and re-render UI	setCount(count + 1)
Event Handler	Function called on user actions like clicks	setCount(count + 1)}>Increase
Functional Component	React component as a function returning JSX	function Counter() { return ; }

Key Takeaways

Use the useState hook to hold and update the counter value in a functional component.

Always update state using the setter function from useState to trigger UI updates.

Wrap event handlers in functions to avoid immediate execution.

React re-renders the component automatically when state changes.

Keep the component simple and focused on one piece of state for clarity.