Lesson 15 — useState Hook Explained (With Examples)

by

Introduction 😊

In the previous lesson, you learned about React Hooks and why they were introduced.

Now it’s time to learn the most important and most used hook in React —
👉 useState ⚛️

Almost every React application uses useState.

In this lesson, you will learn:

  • What useState is
  • Why useState is used
  • How to use useState step by step
  • Multiple state examples
  • Common beginner mistakes

Let’s start 🚀

What Is useState? 🤔

useState is a React Hook that allows function components to store and update data.

👉 In simple words:

useState helps React remember values and update the UI when they change.

Examples of data managed by useState:

  • Counter value 🔢
  • Input text ⌨️
  • Toggle ON / OFF 🔘
  • User login status 👤

Importing useState 📦

Before using useState, you must import it.

import { useState } from "react";

⚠️ Forgetting this import is a very common beginner mistake.

Basic Syntax of useState 🧠

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

Example:

const [count, setCount] = useState(0);
  • count → current state value
  • setCount → function to update state
  • 0 → initial value

Example 1: Simple Counter 🔢

import { useState } from "react";

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

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

export default Counter;

👉 Every time you click the button:

  • State changes
  • React re-renders the UI automatically

Example 2: Updating State Using Previous Value 🔄

Sometimes state updates depend on the previous value.

setCount(prevCount => prevCount + 1);

✔ This is the safe and recommended approach.

Example 3: useState with String 📝

function Greeting() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}</p>
    </div>
  );
}

👉 Perfect example of handling form input.

Example 4: useState with Boolean 🔘

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}

Example 5: useState with Object 🧩

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

Updating object state:

setUser({ ...user, age: 10 });

⚠️ Always use the spread operator when updating objects.

Multiple useState Hooks in One Component 🔁

You can use useState multiple times.

const [name, setName] = useState("");
const [age, setAge] = useState(0);

👉 This keeps state simple and manageable.

Common Mistakes Beginners Make ❌

  • Forgetting to import useState
  • Updating state directly
  • Not using spread operator for objects
  • Using state for static data

💡 Keep state minimal and meaningful.

When Should You Use useState? 🤔

Use useState when:

  • Data changes over time
  • UI depends on user interaction
  • Component needs internal memory

Do NOT use useState for:

  • Constant values
  • Data passed from parent (use props)

Conclusion 🎯

useState is the foundation of state management in React.

Key takeaways:

  • useState stores and updates component data
  • State changes trigger UI updates
  • useState works only in function components
  • Correct usage avoids bugs and confusion

👉 If you understand useState, you understand the heart of React 💙

Frequently Asked Questions (FAQs) ❓

Can I use multiple useState hooks?

Yes. You can use as many as needed.

Does useState update immediately?

No. State updates are asynchronous.

Can useState store arrays and objects?

Yes. But always update them immutably.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 16 — useEffect Hook Explained
Handling side effects and lifecycle behavior in React.

Leave a Comment