useState Hook

The useState hook is one of the most commonly used hooks in React. It allows you to add state to your functional components. Before the introduction of hooks, state management was only possible in class components, but now, with the useState hook, functional components can handle state as well, making them more powerful and flexible.

1. What is the useState Hook?

The useState hook is used to declare state variables inside a functional component. It returns an array with two elements:

• The current state value: The current value of the state variable.
• A function to update the state: A function that allows you to update the state.

You call useState() with the initial state value, and it returns an array containing the current state and a function to update it.

2. Syntax of useState Hook

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

• state: The current state value.
• setState: The function used to update the state.
• initialState: The initial value of the state.

3. Basic Example of useState Hook

Here’s a basic example of how to use the useState hook to create a counter in a functional component:

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1); // increment count
  const decrement = () => setCount(count - 1); // decrement count

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

export default Counter;

In this example:

• The useState(0) initializes the count state with 0.
• setCount is used to update the count value when the buttons are clicked.

4. Updating State with the setState Function

The setState function is used to update the state. It can accept either:

• A new value directly, or
• A callback function that receives the previous state and returns the new state.

Example with Direct Value:

setCount(count + 1); // Directly updates the count value

Example with Callback Function:

setCount(prevCount => prevCount + 1); // Safer way to update state based on previous state

Using a callback function is helpful when the new state depends on the previous state, especially in asynchronous situations.

5. Handling Multiple State Variables

If you need to manage more than one piece of state in a component, you can call useState multiple times:

import React, { useState } from 'react';

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

  const handleNameChange = (e) => setName(e.target.value);
  const handleEmailChange = (e) => setEmail(e.target.value);

  return (
    <form>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={handleNameChange}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={handleEmailChange}
      />
    </form>
  );
}

export default Form;

In this example, we use two separate state variables, name and email, to manage the form inputs.

6. Lazy Initialization with useState

If your initial state value requires some computation or expensive operation, you can pass a function to useState instead of a direct value. This ensures that the computation is only done when the component is first rendered.

const [state, setState] = useState(() => computeInitialState());

This will only call computeInitialState when the component first mounts.

7. State with Objects or Arrays

When managing more complex state like objects or arrays, the useState hook can still be used. However, when updating the state, you should ensure that the previous state is properly maintained and not overwritten.

Example with Object:

import React, { useState } from 'react';

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

  const updateName = () => setUser(prevUser => ({ ...prevUser, name: 'Jane' }));

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

export default Profile;

In this example, we update the user state, ensuring that the existing state is preserved by spreading the previous user object and updating only the specific property.

Example with Array:

import React, { useState } from 'react';

function ShoppingList() {
  const [items, setItems] = useState(['Apple', 'Banana']);

  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;

Here, we update the items array by creating a new array with the existing items and adding a new one.