Блок 4 · Урок 3 из 7

Состояние и реактивность

Главная «магия» React — меняете данные, а интерфейс сам перерисовывается; и как этим управляют, когда данных много.

⏱ ≈ 7 минут ⚛️ React, состояние 🎯 цель: понимать, что делает агент, когда говорит «положим в useState» или «добавим стор»

Зачем это вам

Почти любое приложение, которое вы строите с агентом, живёт на React или его надстройках (Next.js, Remix). Когда агент говорит «положим это в useState», «интерфейс реактивный», «тут prop drilling — добавим Context», он описывает фундаментальный механизм: как данные в приложении связаны с тем, что видит пользователь. Не понимая этого, вы не сможете объяснить агенту, что именно должно меняться и когда, — а значит, будете получать непредсказуемый результат. Этот урок даёт ровно тот уровень понимания, который нужен грамотному заказчику агента.

Как это работает

Состояние — это данные компонента, которые могут меняться

В блоке 2 мы говорили о состоянии как о временной памяти приложения. В React это понятие более конкретно: состояние (state) — это данные, которые компонент помнит между перерисовками и которые могут изменяться в ответ на действия пользователя.

Примеры состояния: что ввёл пользователь в поле поиска, открыт ли выпадающий список, сколько товаров в корзине, какой шаг формы сейчас активен. Всё это — данные, которые меняются прямо в браузере, без обращения к серверу.

Главное свойство React — реактивность: когда состояние меняется, React сам находит все части экрана, которые это состояние показывают, и обновляет только их. Вам не нужно вручную лезть в DOM (структуру страницы, о которой мы говорили в блоке 1) и переписывать элементы — вы меняете значение, React обновляет вид.

Чтобы завести состояние в компоненте, агент использует useState — это встроенный инструмент React, который даёт вам: (1) текущее значение и (2) функцию, чтобы его поменять. Как только вы вызываете эту функцию, React перерисовывает компонент с новым значением. Синтаксис сейчас не важен — важно понимать, что useState = «значение + кнопка обновить».

📌 Простая проверка: если что-то на экране должно меняться в ответ на действия пользователя — это кандидат на состояние (state). Если данные приходят снаружи и компонент их только показывает — это пропсы (из прошлого урока).

Когда состояния становится много

Prop drilling и общее состояние

Каждый компонент может держать своё состояние. Но что если одни и те же данные нужны сразу нескольким компонентам в разных частях дерева?

Один способ — передавать данные пропсами от родителя к детям, от детей — к их детям, и так далее. Это работает, но быстро становится неудобным: промежуточные компоненты получают пропс только для того, чтобы передать его дальше, хотя сами его не используют. Этот антипаттерн называют prop drilling (протаскивание пропсов) — как сверлить дырку через все этажи, чтобы протянуть провод.

Для таких случаев существуют инструменты общего состояния. Context — встроенный механизм React: вы кладёте данные в «контейнер», и любой компонент в поддереве может их прочитать напрямую, минуя промежуточные уровни. Стор (store — Zustand, Redux) — внешняя библиотека, которая делает то же самое, но гибче и удобнее при сложных данных: это центральная «коробка» с состоянием, к которой обращаются любые компоненты приложения.

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

Аналогия, которую можно пересказать

Excel: ячейки с числами и формулы

«Ячейка с числом»— состояние (state): данные, которые меняются
«Формулы, ссылающиеся на ячейку»— интерфейс, который показывает состояние
«Пересчёт сам при смене числа»— реактивность: вид обновляется автоматически
«Общий лист для общего числа»— Context / стор: общее состояние для многих компонентов

Меняете число в исходной ячейке — все формулы, которые на неё смотрят, пересчитываются сами, вручную ничего не правите. React работает так же: меняете состояние — все части экрана, которые его показывают, обновляются сами. Это и есть реактивность. А когда на одно число смотрит много листов, удобнее держать его в одном «общем листе» (Context или стор), а не копировать в каждый.

Запомните одно

Вы меняете данные — React сам обновляет экран

В старом подходе (чистый JS из блока 1) вы сами лезли в DOM и переписывали элементы. В React вы этого не делаете: вы меняете состояние, а React сам разбирается, что перерисовать. Это и есть реактивность — главная причина, по которой React стал стандартом для современных приложений. Всё остальное (useState, Context, Zustand) — инструменты для того, чтобы этим состоянием управлять.

Что это даёт на практике

Фраза агента → что он имеет в виду

«Положим в useState»
Заведу состояние в этом компоненте; при его смене экран обновится сам.
«Интерфейс реактивный»
Меняем данные — вид перерисовывается автоматически, вручную ничего делать не нужно.
«Тут prop drilling»
Данные тащим через слишком много уровней пропсами; лучше вынесем в общий стор или контекст.
«Добавим Context / Zustand»
Заведём общее состояние, чтобы несколько компонентов читали одно и то же без протаскивания.

Состояние компонента (state) — данные, которые компонент помнит и которые могут меняться (см. блок 2).

Реактивность — автоматическое обновление интерфейса при изменении состояния.

useState — способ завести в компоненте состояние и функцию его поменять (понятийно, без синтаксиса).

Prop drilling (протаскивание пропсов) — передача данных через много уровней пропсов; неудобно при росте приложения.

Context / стор (Zustand, Redux) — общее состояние, доступное многим компонентам без протаскивания через промежуточные уровни.

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. Что такое реактивность в React?

2. Что делает состояние (state) в компоненте?

3. Что такое prop drilling?

4. Агент предлагает Context или стор (Zustand), когда…

Куда мы идём

Программа курса — 7 блоков