React Counter App using useState Hook (Step-by-Step)

📌 INTRODUCTION

The useState hook is one of the most important concepts in React. It allows functional components to manage and update state.

In this program, we will build a simple counter app that:

• Displays a number
• Increments the value on button click
• Demonstrates dynamic UI updates

👉 This is a must-know program for exams, viva, and interviews.

---

📘 PROBLEM STATEMENT

👉 Create a counter app using functional components in React.

---

💡 CONCEPTS USED

• React Hooks (useState)
• Functional Components
• Event Handling
• JSX

---

⚙️ PREREQUISITES

• Node.js installed
• Basic React setup

---

🧠 LOGIC EXPLANATION

1. Create a state variable using useState
2. Display the value
3. Create a button
4. Update state on button click

---

💻 PROGRAM CODE

Open src/App.js:

import { useState } from "react";

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

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Counter App</h1>
      <h2>{count}</h2>

      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

👉 Initially:

Counter App
0
[Increment Button]

👉 After clicking button:

1 → 2 → 3 → ...

---

🔍 STEP-BY-STEP EXPLANATION

• useState(0) → initializes state with value 0
• count → current value
• setCount() → updates state
• onClick → event handler
• UI updates automatically when state changes

---

⚡ ADD MORE FEATURES (IMPORTANT)

1. Decrement Button

<button onClick={() => setCount(count - 1)}>
  Decrement
</button>

---

2. Reset Button

<button onClick={() => setCount(0)}>
  Reset
</button>

---

3. Full Version

import { useState } from "react";

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

  return (
    <div style={{ textAlign: "center" }}>
      <h1>Counter App</h1>
      <h2>{count}</h2>

      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default App;

---

🎯 WHY useState IS IMPORTANT

• Enables dynamic UI updates
• Core concept of React
• Used in almost every React application
• Required for hooks-based development

---

📚 REAL-WORLD USE CASE

• Form handling
• Counters, timers
• UI interactions
• Dashboard updates

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is useState?

👉 A React hook used to manage state in functional components.

---

Q2. What does useState return?

👉 An array with state value and setter function.

---

Q3. What happens when state changes?

👉 React re-renders the component.

---

Q4. Can we use useState in class components?

👉 No, it is only for functional components.

---

Q5. What is the initial value in useState?

👉 The value passed inside useState().

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Hello World – Program 5
👉 Arrow Function – Program 1

---

📌 CONCLUSION

The counter app is the best example to understand how React handles state.

👉 Once you master useState, you can build complex interactive applications easily.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites