Managing State with useState

In this tutorial, we will learn what state is, why it matters, and how to manage it using the useState hook in React. By the end, you will be able to build interactive components where the UI updates whenever the state changes.

What Is State?

State is data that changes over time inside a component.

Examples of state in real applications:

A counter increasing
A text input updating
A button showing loading status
A theme switching between light and dark

Props are inputs from the parent. State belongs to the component itself.

You can think of state like a component’s memory. When the memory changes, the UI updates.

Introducing `useState`

React gives you the useState hook to manage state in functional components.

You import it like this:

import { useState } from "react";

Then you call it inside your component:

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

This gives you:

count the current value
setCount the function that updates the value
0 the initial value

Whenever you call setCount, React updates the UI.

Your First State Example: A Counter

Create a new file:

src/Counter.jsx

Add this code:

import { useState } from "react";
 
export default function Counter() {
  const [count, setCount] = useState(0);
 
  function increment() {
    setCount(count + 1);
  }
 
  return (
    <>
      <title>useState Counter</title>
      <meta name="description" content="Beginner friendly useState example" />
 
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increase</button>
    </>
  );
}

Now add it to your app:

import Counter from "./Counter.jsx";
 
export default function App() {
  return <Counter />;
}

How This Works

The component renders with an initial value of 0.
When you click the button, increment() calls setCount().
React updates the state.
Because the state changed, React re-renders the UI.
The UI now shows the updated number.

You did not manually update the DOM. React did it for you.

That is the power of declarative UI.

Updating State Safely

Sometimes you want to update state based on the previous state. React provides a safe way to do this using a function:

setCount(prev => prev + 1);

This ensures you always work with the most recent value, even if updates happen quickly.

Managing Text Input State

Here is a simple example where the UI updates as the user types.

Create:

src/TextInput.jsx

Add:

import { useState } from "react";
 
export default function TextInput() {
  const [text, setText] = useState("");
 
  return (
    <>
      <title>useState Text Input</title>
      <meta name="description" content="Managing text input with state" />
 
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Type something"
      />
 
      <p>You typed: {text}</p>
    </>
  );
}

Whenever the input changes, the state updates, and React re-renders the paragraph.

Key Principles of `useState`

State belongs to the component
Changing state always causes a re render
Props flow down, but state stays inside
Initialize state with a simple value
Use a setter function to update state

Common Beginner Mistakes

Avoid these:

Trying to change state directly:

count = 5; // incorrect

Always use the setter.

Expecting state to change immediately after calling the setter. React schedules updates, then re renders.
Storing unnecessary or computed values in state. Keep it minimal.

useState is the starting point of interactivity in React. It gives components their own memory so your UI can change based on user actions. By understanding how state works, you unlock the core power of React’s declarative system.

React Tutorial