Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке "стан" (state)». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке "стан" (State)

**Стан (state)** - це **поточне значення даних**, які описують **"що відбувається"** у програмі **в даний момент часу**.

Простіше кажучи:

> **State** - це "пам'ять" застосунку про його поточний стан справ.

---

## Приклади стану в житті

Уяви собі:

- Світло в кімнаті може бути **увімкнене** або **вимкнене** -> це його *стан*
- Користувач на сайті може бути **авторизований** або **ні** -> це *стан*
- Кошик в інтернет-магазині містить **3 товари** -> це *стан*

---

## Приклад на JavaScript

```javascript
let count = 0; // <- поточний стан лічильника

function increment() {
  count++; // змінюємо стан
  console.log("Лічильник:", count);
}

increment(); // Лічильник: 1
increment(); // Лічильник: 2
```

Тут `count` - це **стан** програми.
Функція `increment` змінює його з часом.

---

## Стан у React

У React компонент має **власний стан (state)** - дані, які визначають, *що він відображає*.

```javascript
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // <- стан компонента

return (
    <div>
      <p>Лічильник: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}
```

Тут:

- `count` - значення стану,
- `setCount` - функція, яка оновлює цей стан,
- зміна стану -> **оновлює інтерфейс**.

---

## Чому стан важливий

Тому що **вся поведінка програми залежить від нього**.

Наприклад:

| Стан | Поведінка |
|---|---|
| Користувач не авторизований | Показуємо форму входу |
| Користувач увійшов | Показуємо особистий кабінет |
| Товар додано в кошик | Змінюємо іконку кошика |
| Модальне вікно відкрите | Блокуємо фон і показуємо вікно |

---

## Типи стану

| Тип | Приклад | Де зберігається |
|---|---|---|
| **Локальний (UI state)** | Чи відкритий dropdown, обрана вкладка | У компоненті |
| **Глобальний (application state)** | Авторизація, налаштування, кошик | У Redux / Context / Zustand |
| **Серверний (server state)** | Дані з API (`/users`) | На сервері / кешується клієнтом |
| **Постійний (persistent state)** | localStorage, IndexedDB | У браузері / БД |
| **Обчислюваний (derived state)** | `totalPrice = sum(items)` | Обчислюється на основі інших даних |

---

## Приклад: стан форми

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

// користувач вводить дані
formState.name = "Tim";
formState.subscribed = true;

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

Тут стан зберігає, **що ввів користувач** у кожен момент часу.

---

## Стан як "моментальний знімок" (snapshot)

Якщо ти відкриєш гру чи застосунок - усе, що бачиш на екрані,
це візуалізація **поточного стану**.

Приклад у термінах часу:

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

Кожна дія (event) змінює стан -> стан визначає, що показати.

---

## Приклад в архітектурі (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
```

Це класичний **автомат станів (state machine)**:

- є скінченна кількість станів;
- переходи між ними строго визначені.

---

## Зміна стану = зміна поведінки

| Стан | Інтерфейс |
|---|---|
| `loading = true` | Показуємо спінер |
| `loading = false` | Показуємо дані |
| `error = true` | Показуємо повідомлення про помилку |

---

## Підсумок

| Що таке state | Поточний "знімок" даних програми |
|---|---|
| Де використовується | У всіх програмах - від лічильників до SPA |
| Чому важливо | Від нього залежить логіка та інтерфейс |
| Як змінюється | Через події, дії користувача, відповіді API |
| У React | Зміна `state` -> оновлення DOM |
| В архітектурі | Визначає, як система реагує на події |

---

**Головна ідея:**

> Стан - це "душа" застосунку.
> Він описує *що є зараз*, і саме від нього залежить,
> *що побачить користувач і як програма себе поведе.*

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати647 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.