Що таке "стан" (state)

ReactJunior~2 хв читання

Що таке "стан" (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
В архітектурі	Визначає, як система реагує на події

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

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.