Understanding useState in React JS — Beginner-Friendly Guide

State is one of the most important concepts in React. If you understand useState, you understand 50% of React.
In this blog, you’ll learn what state is, why we use useState, and how it works with real examples.

---

✅ What is State in React?

State means the current data of your component — data that can change over time.

Examples of state:

• Counter value

• Input text

• Theme (dark/light mode)

• Modal open/close status

When state changes → React re-renders automatically.

---

✅ Why do we use useState?

useState lets React remember values between re-renders.

It can store:

• Numbers

• Strings

• Booleans

• Objects

• Arrays

Whenever you update the state, React updates the UI.

---

🔵 How useState Works

useState returns an array with two values:

const [stateValue, setStateValue] = useState(initialValue);

✔ stateValue → current value

✔ setStateValue → function to update the value

---

📌 Example 1 — Counter

import { useState } from "react";

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

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

export default Counter;

🔍 Explanation

• Initial value is 0

• Button click updates the state

• React re-renders the UI

---

📌 Example 2 — Input Handling

function InputExample() {
  const [text, setText] = useState("");

  return (
    <div>
      <input 
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />

      <p>You typed: {text}</p>
    </div>
  );
}

✔ Input changes update state instantly

---

📘 Bonus — useState with Objects

const [user, setUser] = useState({ name: "", age: "" });

function updateName(e) {
  setUser({ ...user, name: e.target.value });
}

🔑 Always copy the previous object with ... (spread operator)

---

⭐ Common Mistakes Beginners Make

❌ Updating state directly

count = count + 1; // Wrong

✔ Correct way

setCount(prev => prev + 1);

---

🧠 Best Practices for useState

✔ Use one state per purpose
✔ Never mutate objects/arrays directly
✔ Use callback when depending on previous state
✔ Keep your state minimal

---

🏁 Final Thoughts

useState is the base of React's reactivity. Once you understand it, you can easily build dynamic features like forms, counters, toggles, filters, and modals.

Your next hook to learn → useEffect.

Note: Originally published on Medium.