React Js

React is all about building interactive user interfaces, and to make interfaces interactive, we often need to manage data that can change over time. This is where the useState hook comes in.

Let’s explore what it is, how it works, and how to use it in your own React projects.

---

What is useState?

The useState hook is a function provided by React that lets you add state to a functional component.

In simple words:

It allows you to store data in a component and update it when something happens (like a button click).

Before hooks were introduced, only class components could hold state. But with useState, even functional components can manage state.

---

🛠️ How to Use useState

To use the useState hook, you need to import it from React.

✅ Syntax:

import React, { useState } from 'react';

const [stateVariable, setStateFunction] = useState(initialValue);

• stateVariable: the current state value.
• setStateFunction: the function used to update that state.
• initialValue: the default value you want the state to start with.

---

💡 Simple Example: Counter App

Let’s make a basic counter where the number increases when you click a button.

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1); // update the state
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}

export default Counter;

🧠 What’s Happening Here?

1. useState(0) creates a count variable with a starting value of 0.
2. setCount is a function that updates the count value.
3. When the button is clicked, setCount(count + 1) increases the value and re-renders the component.

---

📝 Updating State

There are two common ways to update state:

1. Directly with a new value:

setCount(5); // sets count to 5

2. Using previous state (recommended for dependent updates):

setCount(prev => prev + 1); // safe for multiple updates

This is helpful when you’re doing multiple state updates at once.

---

🎯 Managing Different Types of State

🟢 Numbers:

const [age, setAge] = useState(25);

🔤 Strings:

const [name, setName] = useState('John');

📋 Arrays:

const [items, setItems] = useState([]);

You can add new items like this:

setItems(prev => [...prev, newItem]);

🧱 Objects:

const [user, setUser] = useState({ name: '', email: '' });

To update one property:

setUser(prev => ({ ...prev, name: 'Alice' }));

---

⚠️ Common Mistakes to Avoid

❌ Do not update state directly:

// Wrong
count = count + 1;

✅ Always use the setter function:

setCount(count + 1);

❌ Avoid calling useState inside loops, conditions, or nested functions.

✅ Always call it at the top level of your component.

---

📦 Multiple useState Hooks

You can use useState multiple times in one component:

const [name, setName] = useState('');
const [email, setEmail] = useState('');

This is useful when you want to manage different pieces of state separately.

---

🧪 Practice Project Idea

Here’s a fun idea to practice:

🔹 To-do List App

• Input field to type tasks.
• Button to add the task to a list.
• Display all tasks in a list.
• Option to delete a task.

---

🧼 Final Thoughts

The useState hook is your first step toward building dynamic, interactive web apps with React. It’s simple yet powerful and works beautifully for small and large applications alike.

Learn it well—it’s the foundation of state management in React!

---

✅ Summary

Term	Meaning
useState	Adds state to functional components
stateVariable	Stores current value
setStateFunc	Updates value and re-renders component
initialValue	Sets default state when component loads

---