UseState In React

1. What is `useState`?

The useState hook is a function that declares a state variable in a functional component.
It returns an array with two elements:
- The current state value.
- A function that allows you to update the state.

2. Basic Syntax of `useState`

The basic syntax of useState looks like this:

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

state: The current state value.
setState: A function used to update the state.
initialValue: The value the state will initially hold (can be any data type like a string, number, array, or object).

3. Example 1: Basic Counter Using `useState`

Let’s create a simple counter that increments by 1 each time you click a button.

Step 1: Create the Component with `useState`

import React, { useState } from "react";

function Counter() {
  // Declare a state variable `count` and a function `setCount` to update it.
  const [count, setCount] = useState(0);

  // Function to increment the count value
  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

🔹 Explanation:

useState(0) initializes count with a value of 0.
setCount(count + 1) updates the count state each time the button is clicked.
When you click the button, it increments the count and re-renders the component with the new state value.

4. Example 2: Toggle Button Using `useState`

Now, let's create a toggle button that switches between two states: ON and OFF.

Step 1: Create the Toggle Button Component

import React, { useState } from "react";

function ToggleButton() {
  // Declare a state variable `isToggled`
  const [isToggled, setIsToggled] = useState(false);

  // Function to toggle the state
  const toggle = () => setIsToggled(!isToggled);

  return (
    <div>
      <p>{isToggled ? "ON" : "OFF"}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

export default ToggleButton;

🔹 Explanation:

useState(false) initializes isToggled to false.
When the button is clicked, toggle() updates the state using setIsToggled(!isToggled), switching the state between true and false.
The text displayed changes based on whether isToggled is true or false.

5. Example 3: Updating State with an Object Using `useState`

You can also use useState with objects or arrays. In this example, let’s use an object for managing a user's information.

Step 1: Create a Component with Object State

import React, { useState } from "react";

function UserInfo() {
  // Declare state with an object
  const [user, setUser] = useState({ name: "Zia", age: 25 });

  // Function to update the user's age
  const updateAge = () => setUser({ ...user, age: user.age + 1 });

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={updateAge}>Increase Age</button>
    </div>
  );
}

export default UserInfo;

🔹 Explanation:

useState({ name: "Zia", age: 25 }) initializes the user state with an object containing name and age.
setUser({ ...user, age: user.age + 1 }) updates the age field by creating a new object with the updated value, using the spread operator (...). This ensures that the other fields remain unchanged.

6. Example 4: Updating State with an Array Using `useState`

You can also use useState with an array. Let’s create a list that allows adding new items to it.

Step 1: Create a Component with Array State

import React, { useState } from "react";

function ShoppingList() {
  // Declare state with an array
  const [items, setItems] = useState(["Apple", "Banana"]);

  // Function to add a new item to the list
  const addItem = () => setItems([...items, "Orange"]);

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Orange</button>
    </div>
  );
}

export default ShoppingList;

🔹 Explanation:

useState(["Apple", "Banana"]) initializes items as an array with two elements.
setItems([...items, "Orange"]) creates a new array by spreading the existing items and adding "Orange" to the end.
Each item in the items array is displayed as a list item (<li>).

7. Key Points to Remember About `useState`

State Initialization: The argument you pass to useState is the initial value of the state variable.
State Updater Function: The function returned by useState (e.g., setCount) is used to update the state.
Re-renders: Whenever state is updated, React will re-render the component to reflect the new state.
State is Immutable: You should never directly modify the state. Always use the state updater function.

8. Conclusion

The useState hook is an essential feature in React that allows you to add state to your functional components. It makes your components interactive and dynamic. Whether you’re managing numbers, strings, arrays, or objects, useState helps you keep track of and modify state efficiently.

By mastering useState, you can build more responsive and dynamic React applications.

REACT

1. What is useState?

2. Basic Syntax of useState

3. Example 1: Basic Counter Using useState

Step 1: Create the Component with useState

4. Example 2: Toggle Button Using useState

Step 1: Create the Toggle Button Component

5. Example 3: Updating State with an Object Using useState

Step 1: Create a Component with Object State

6. Example 4: Updating State with an Array Using useState

Step 1: Create a Component with Array State

7. Key Points to Remember About useState

8. Conclusion

1. What is `useState`?

2. Basic Syntax of `useState`

3. Example 1: Basic Counter Using `useState`

Step 1: Create the Component with `useState`

4. Example 2: Toggle Button Using `useState`

5. Example 3: Updating State with an Object Using `useState`

6. Example 4: Updating State with an Array Using `useState`

7. Key Points to Remember About `useState`