State in React Step by Step with Examples

State in React lets a component hold data that can change over time. You can use it to track values inside a component and update the UI without reload.

What is State in React?

State in React holds data inside a component and controls how that part of the UI behaves.

It stores values and lets React know which parts need new output after a change.

Here is the syntax:

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

This code shows a component with a state. It creates a value named count and a function named setCount to change it.

React reads the state and updates only the parts that depend on that value.
It makes the UI react to user input or to data changes without full reload of the page.

So, how to declare and use state in React?

You can use useState inside a function component to add state.
React gives you a pair: the state value and a function to change that value.

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

You can then display that value in the UI and call the function to change it after an event.

Updating State with setState and Hooks

You call the state setter to update the value. React then triggers a re-render of the part that uses it.

Class components use this.setState while function components use the setter from useState.

Multiple State Values in One Component

You can call useState more than once in a component. This allows you to hold separate values without mixing them into one object.

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

Each call creates its own independent value and function.

Examples

Counter with Increment:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Add One</button>
    </div>
  );
}

This example builds a simple counter with state. It holds a number and updates it each time the button is clicked by the user.

Toggle Light Mode:

import { useState } from 'react';

function LightSwitch() {
  const [isOn, setIsOn] = useState(false);
  return (
    <div>
      <p>Light is {isOn ? 'On' : 'Off'}</p>
      <button onClick={() => setIsOn(!isOn)}>Switch</button>
    </div>
  );
}

This example shows how a Boolean state can change a text label. It switches between two values and updates the text without a page reload.

Form Input with Multiple State Values:

import { useState } from 'react';

function UserForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <p>{name} {email}</p>
    </form>
  );
}

This example uses two separate state values. It reads text from inputs and shows the result below in real time as you type.

Advanced Counter with Custom Step:

import { useState } from 'react';

function StepCounter() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);
  return (
    <div>
      <input
        type="number"
        value={step}
        onChange={e => setStep(Number(e.target.value))}
      />
      <button onClick={() => setCount(count + step)}>Increase</button>
      <p>{count}</p>
    </div>
  );
}

This example adds another state for the step. It lets the user choose how much to add each time by changing the number in the input.

Wrapping Up

You learned what state is and how React uses it to drive updates.

Here is a quick recap:

• React state holds data, useState adds state to a component, and the setter updates it without a full reload.

FAQs

import React, { useState } from "react";

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

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

// Functional component with useState
import React, { useState } from "react";

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

  return (
    <div>
      <p>Hello {name}</p>
      <button onClick={() => setName("David")}>Change Name</button>
    </div>
  );
}

Similar Reads