Usestate Hook | Hooks | React Tutorial

Using the useState hook for state management

The useState hook is a fundamental hook in React that allows you to add state to functional components. It returns an array with the current state value and a function to update it. This tutorial covers how to use the useState hook for state management in React functional components.

Key Points:

The useState hook adds state to functional components.
It returns an array with the current state value and a function to update it.
State updates trigger re-renders, ensuring the UI stays in sync with the data.

Basic Usage

To use the useState hook, import it from React and call it inside your functional component. The hook takes the initial state as an argument and returns an array with the current state value and a function to update it.

// Basic usage of useState
import React, { useState } from 'react';

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

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

export default Counter;

Updating State

The function returned by useState is used to update the state. It takes the new state value as an argument. When the state is updated, the component re-renders with the new state value.

// Updating state with useState
import React, { useState } from 'react';

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

    const increment = () => {
        setCount(count + 1);
    };

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

export default Counter;

Setting Initial State

The initial state is set by passing the initial value to the useState hook. This initial value can be any valid JavaScript value, such as a number, string, array, or object.

// Setting initial state with useState
import React, { useState } from 'react';

function User() {
    const [name, setName] = useState('John Doe');

    return (
        <div>
            <p>Name: {name}</p>
        </div>
    );
}

export default User;

Functional Updates

If the new state value depends on the previous state value, you can pass a function to the state updater function. This function receives the previous state and returns the new state.

// Functional updates with useState
import React, { useState } from 'react';

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

    const increment = () => {
        setCount(prevCount => prevCount + 1);
    };

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

export default Counter;

Using Multiple State Variables

You can use multiple useState hooks to manage multiple state variables in a component. Each hook call manages its own piece of state.

// Using multiple state variables with useState
import React, { useState } from 'react';

function User() {
    const [name, setName] = useState('John Doe');
    const [age, setAge] = useState(30);

    return (
        <div>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
            <button onClick={() => setAge(age + 1)}>Increment Age</button>
        </div>
    );
}

export default User;

Managing Complex State

The useState hook can also be used to manage complex state objects. You can update specific properties of the state object using the spread operator.

// Managing complex state with useState
import React, { useState } from 'react';

function UserProfile() {
    const [user, setUser] = useState({ name: 'John Doe', age: 30 });

    const incrementAge = () => {
        setUser(prevUser => ({ ...prevUser, age: prevUser.age + 1 }));
    };

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

export default UserProfile;

Summary

In this tutorial, you learned how to use the useState hook for state management in React functional components. The useState hook allows you to add state to functional components, update state, set initial state, perform functional updates, use multiple state variables, and manage complex state objects. Understanding the useState hook is essential for managing component state in modern React applications.

React - useState Hook