Что такое состояние

Понимаем, почему обычной переменной недостаточно и зачем React вводит понятие «состояние».

Состояние (state) — данные, которые принадлежат компоненту, меняются со временем и при изменении вызывают перерисовку интерфейса.

Пропсы приходят снаружи, состояние живёт внутри

Пропсы компонент получает от родителя и менять их не может. Но компоненту часто нужны собственные изменяемые данные: введённый текст, открыт ли список, сколько лайков. Это и есть состояние — личная память компонента.

Почему обычная переменная не работает

Логично попробовать обычную переменную. Но это не сработает — и важно понять почему:

function Counter() {
  let count = 0; // обычная переменная

  function handleClick() {
    count = count + 1;     // меняем переменную
    console.log(count);    // в консоли число растёт...
  }

  return <button onClick={handleClick}>Счёт: {count}</button>;
}

В консоли число увеличивается, но на экране всегда 0. Причина двойная:

1. Изменение обычной переменной не сообщает React, что нужно перерисоваться.
2. Даже если бы React перерисовался, он заново вызвал бы функцию Counter, и count снова стал бы 0 — переменная живёт лишь до конца вызова функции.

Что нужно от состояния

Чтобы счётчик работал, нужны две вещи: данные должны сохраняться между перерисовками, а их изменение — запускать перерисовку. Обычная переменная не умеет ни того, ни другого. Эту задачу решает хук useState, с которым мы познакомимся в следующем уроке.

Состояние — это «снимок»

Важная модель мышления: при каждой перерисовке React как бы делает «снимок» — заново вызывает функцию компонента, и она видит текущее значение состояния. Меняя состояние, вы готовите следующий снимок, а не правите текущий. Эта идея пригодится дальше, когда мы будем разбирать обновления.

Что такое «хук»

Скоро вы встретите слово «хук» (useState, useEffect и др.). Хук — это специальная функция, которая «подключает» компонент к возможностям React: памяти (состоянию), побочным эффектам и так далее. Все они начинаются с use.

Итог

• Состояние — это изменяемая личная память компонента; пропсы приходят снаружи и меняться не могут.
• Обычная переменная не годится: её изменение не вызывает перерисовку, а сама она сбрасывается при каждом вызове функции.
• Нужен механизм, который сохраняет данные между перерисовками и запускает обновление — это хук useState.