Suggest an edit

Improve this article

Refine the answer for “What is "state" (State)?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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.*

Markdown · drag & drop images · ⌘B / ⌘I shortcuts727 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.