React State Management with useState: A Beginner’s Guide

React has revolutionized the way we build user interfaces, and one of its most powerful features is Hooks. Hooks let you use React features like state and lifecycle methods without writing a class. Today, I'll share how I used the useState Hook to build a simple counter app.

---

What is useState?

The useState Hook is a function provided by React to manage state in functional components. State allows components to "remember" values between renders and update the UI dynamically.

Syntax:

const [state, setState] = useState(initialValue);

• state: The current state value.

• setState: A function to update the state.

• initialValue: The default value of the state.

---

My Counter App Using useState

Here’s how I implemented a counter app using the useState Hook:

Code:

import { useState } from 'react';
import './App.css';

function App() {
  // Initialize the state with a default value of 15
  let [counter, setCounter] = useState(15);

  // Function to increment the counter
  const addValue = () => {
    setCounter(counter + 1);
    console.log(counter);
  };

  // Function to decrement the counter
  const removeValue = () => {
    setCounter(counter - 1);
    console.log(counter);
  };

  return (
    <>
      <h1>Chai aur React</h1>
      <h2>Counter value: {counter}</h2>
      <button onClick={addValue}>Add value {counter}</button>
      <br />
      <br />
      <button onClick={removeValue}>Remove value {counter}</button>
    </>
  );
}

export default App;

---

How It Works

1. State Initialization:

   • I initialized the state using useState(15), setting the default value of counter to 15.

2. Updating State:

   • The setCounter function updates the counter value.

   • Calling setCounter(counter + 1) increments the value, while setCounter(counter - 1) decrements it.

3. Dynamic UI Updates:

   • The <h2> element dynamically displays the updated value of counter.

   • Buttons trigger the addValue and removeValue functions to update the state.

4. No Manual DOM Manipulation:

   • Unlike vanilla JavaScript, there’s no need for getElementById or manual DOM updates. React re-renders the UI automatically when the state changes.

---

Benefits of Using useState

• Simpler Code:

  • useState eliminates the need for class components and this.setState().

• Dynamic UI Updates:

  • The UI reflects changes immediately when state updates.

• Easier State Management:

  • The useState Hook provides a clean way to handle local component state.

---

Why Hooks Are Special

In traditional React, managing state required class components. Hooks like useState make functional components more powerful, readable, and concise. They simplify the process of building interactive user interfaces.

---

What’s Next?

This was just the beginning of my journey into React Hooks. Next, I plan to learn about useEffect, which helps manage side effects like data fetching, subscriptions, and DOM manipulation. Stay tuned as I explore more Hooks and advanced React concepts!

---

Let me know what you think about this article. Have you used useState in your projects? What’s your favorite Hook? Share your thoughts below! 🚀