useState

React is a JavaScript library for building user interfaces. One of its most powerful features is the ability to create dynamic, interactive components that respond to user input or data changes. To achieve this, React uses something called state—and the useState hook is the simplest way to use state in a functional component.

What is State?

In React, state refers to data that can change over time. For example, a counter that increases when a button is clicked, or a text input that updates as the user types. React will re-render the component every time this state changes, allowing your UI to update automatically.

Why useState?

Before hooks were introduced, React used class components to handle state. But since React 16.8, hooks allow you to use state in functional components, making your code simpler and more readable. The most commonly used hook is useState.

How to Use useState

Here’s the basic syntax:

import React, { useState } from 'react';

function ExampleComponent() {
  const [value, setValue] = useState(initialValue);
}

• useState(initialValue) initializes the state.
• It returns two things:
  1. The current state value (value)
  2. A function to update that value (setValue)

Example: Counter

Let’s see a simple example of a counter app:

import React, { useState } from 'react';

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

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

How it works:

• The component uses useState(0) to start the count at 0.
• When the button is clicked, setCount(count + 1) updates the count.
• React automatically re-renders the component with the new count.

Updating State

You should never change the state variable directly. Instead, always use the update function (setValue). For example:

//  Wrong
count = count + 1;

// Right
setCount(count + 1);

Multiple States

You can use useState as many times as needed in one component:

function UserInfo() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  return (
    <div>
      <input placeholder="Name" onChange={(e) => setName(e.target.value)} />
      <input type="number" placeholder="Age" onChange={(e) => setAge(e.target.value)} />
      <p>Hello, {name}. You are {age} years old.</p>
    </div>
  );
}

Initial State Can Be Any Type

The initial state you pass to useState can be:

• A number: useState(0)
• A string: useState('')
• A boolean: useState(false)
• An object: useState({ name: '', age: 0 })
• An array: useState([])

When to Use useState

Use useState when:

• You want to store and update values that change during the component’s lifetime.
• You’re working with inputs, toggles, counters, filters, forms, etc.

Summary

• useState is a React hook used to add state to functional components.
• It returns a state variable and a function to update it.
• State changes cause the component to re-render with new data.
• You can use multiple useState hooks for different values.

Final Tip

Always import useState from React at the top of your component file:

import React, { useState } from 'react';