Understanding useState in React: A Beginner's Guide

When building React applications, we often need to store information that can change over time. For example, a counter can increase or decrease, an input field can contain text, or a button can show and hide content.

React provides a Hook called useState to handle this kind of changing data.

In this blog, let's understand useState with simple examples.

What is useState?

useState is a React Hook that allows a functional component to store and update data.

The basic syntax is:

const [value, setValue] = useState(initialValue);

Here:

• value → current state value
• setValue → function used to update the state
• initialValue → starting value

For example:

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

Initially, count is 0.

Creating a Simple Counter

Let's create a counter that increases when we click a button.

import { useState } from "react";

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

  function increase() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>

      <button onClick={increase}>
        Increase
      </button>
    </div>
  );
}

export default App;

When the button is clicked:

setCount(count + 1);

React updates the state and renders the component again.

The result will be:

Count: 0
   ↓
Count: 1
   ↓
Count: 2
   ↓
Count: 3

Increase and Decrease

We can use the same state to create both Increase and Decrease buttons.

import { useState } from "react";

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

  function increase() {
    setCount(count + 1);
  }

  function decrease() {
    setCount(count - 1);
  }

  function reset() {
    setCount(0);
  }

  return (
    <div>
      <h1>Count: {count}</h1>

      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default App;

Now we have three operations:

setCount(count + 1); // Increase
setCount(count - 1); // Decrease
setCount(0);         // Reset

Why Can't We Use a Normal Variable?

A common beginner mistake is:

let count = 0;

function increase() {
  count++;
}

This doesn't work properly for React UI updates.

React doesn't automatically re-render the component when a normal variable changes.

Instead, we use:

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

and update it using:

setCount(count + 1);

When the state changes, React knows that the component needs to render again.

useState with Input

useState is also commonly used with input fields.

import { useState } from "react";

function App() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        onChange={(e) => setName(e.target.value)}
      />

      <h2>Hello {name}</h2>
    </div>
  );
}

export default App;

If the user types:

Adhi

The UI displays:

Hello Adhi

Here:

setName(e.target.value);

updates the state with whatever the user types.

Important Rule

Don't directly modify state.

❌ Avoid:

count++;

❌ Avoid:

count = count + 1;

✅ Use:

setCount(count + 1);

The setter function tells React that the state has changed.

Multiple State Variables

A component can have more than one state.

const [name, setName] = useState("");
const [age, setAge] = useState(0);

For example:

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

  return (
    <div>
      <input onChange={(e) => setName(e.target.value)} />

      <button onClick={() => setAge(age + 1)}>
        Increase Age
      </button>

      <h2>Name: {name}</h2>
      <h2>Age: {age}</h2>
    </div>
  );
}

Each state variable can be updated independently.

Functional State Updates

When the new state depends on the previous state, you can also write:

setCount(prevCount => prevCount + 1);

This is especially useful when multiple state updates happen close together.

For example:

function increase() {
  setCount(prevCount => prevCount + 1);
}

Common useState Examples

useState can be used for many things:

• Counters
• Form inputs
• Login forms
• Show/Hide elements
• Dark mode
• Todo lists
• Shopping cart quantities
• Selected items
• Tabs
• Modal windows

Conclusion

useState is one of the most important React Hooks for beginners.

The main idea is simple:

useState → Store data
setState → Update data
React → Re-render the UI

The basic syntax to remember is:

const [value, setValue] = useState(initialValue);

Once you understand useState, you'll have a strong foundation for learning other React concepts such as useEffect, props, forms, and component communication.