What is "state" (State)?

ReactJunior~3 min read

What is "state" (State)

State is the current value of the data that describes "what is happening" in a program at a given moment in time.

More simply:

State is an application's "memory" of its current situation.

Examples of state in everyday life

Imagine:

The light in a room can be on or off -> that is its state
A user on a website can be logged in or not -> that is state
A shopping cart contains 3 items -> that is state

Example in JavaScript

javascript

let count = 0; // <- the counter's current state

function increment() {
  count++; // change the state
  console.log("Count:", count);
}

increment(); // Count: 1
increment(); // Count: 2

Here count is the program's state. The increment function changes it over time.

State in React

In React, a component has its own state - data that determines what it renders.

javascript

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // <- component state

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

Here:

count is the state value,
setCount is the function that updates that state,
changing the state -> updates the interface.

Why state matters

Because the entire behavior of the program depends on it.

For example:

State	Behavior
User is not logged in	We show the login form
User is logged in	We show the account dashboard
Item added to cart	We change the cart icon
Modal is open	We block the background and show the window

Types of state

Type	Example	Where it is stored
Local (UI state)	Whether a dropdown is open, the selected tab	In the component
Global (application state)	Authentication, settings, cart	In Redux / Context / Zustand
Server state	Data from an API (`/users`)	On the server / cached on the client
Persistent state	localStorage, IndexedDB	In the browser / DB
Derived state	`totalPrice = sum(items)`	Computed from other data

Example: form state

javascript

const formState = {
  name: "",
  email: "",
  subscribed: false,
};

// the user enters data
formState.name = "Tim";
formState.subscribed = true;

console.log(formState);
// { name: "Tim", email: "", subscribed: true }

Here the state stores what the user entered at each moment in time.

State as a "snapshot"

If you open a game or an app, everything you see on the screen is a visualization of the current state.

An example in terms of time:

javascript

[ State 1 ] -> [ State 2 ] -> [ State 3 ]
  ^ click        ^ API response  ^ logout

Every action (event) changes the state -> the state determines what to show.

An architecture example (state machine)

javascript

const trafficLight = {
  state: 'green',
  next() {
    if (this.state === 'green') this.state = 'yellow';
    else if (this.state === 'yellow') this.state = 'red';
    else this.state = 'green';
  }
};

trafficLight.next();
console.log(trafficLight.state); // yellow

This is a classic state machine:

there is a finite number of states;
transitions between them are strictly defined.

Changing state = changing behavior

State	Interface
`loading = true`	We show a spinner
`loading = false`	We show the data
`error = true`	We show an error message

Summary

What state is	The current "snapshot" of the program's data
Where it is used	In every program - from counters to SPAs
Why it matters	The logic and interface depend on it
How it changes	Through events, user actions, API responses
In React	Changing `state` -> updating the DOM
In architecture	Determines how the system reacts to events

Main idea:

State is an application's "soul". It describes what exists right now, and it is exactly what determines what the user sees and how the program behaves.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.