Что такое state в React?

Question

Accepted Answer

## Что важно понять

**State** — локальные данные компонента, которые могут меняться со временем и при изменении запускают повторный рендер. Это «память» интерфейса: открыт ли модал, текст в поле, список задач, статус загрузки.

В функциональных компонентах state создают через `useState` (или `useReducer` для более сложной логики):

```jsx
function SearchBox() {
  const [query, setQuery] = useState('');

return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Поиск"
    />
  );
}
```

Принципы работы со state:
- обновляйте через setter (`setQuery`), не мутируя старое значение напрямую;
- для объектов и массивов создавайте новые копии: `{ ...prev, x: 1 }`, `[...items, next]`;
- вызов setter планирует обновление; новый рендер увидит значение позже (учитывайте батчинг);
- если следующий state зависит от предыдущего, используйте updater: `setCount(c => c + 1)`;
- поднимайте state наверх (`lifting state up`), если одними данными пользуются несколько детей.

Чего не стоит класть в state: значения, которые можно вычислить из props или другого state на лету; «кэш» без нужды; огромные структуры, которые меняются по крупицам без нормализации.

State ≠ props: props приходят снаружи, state принадлежит компоненту (или общему родителю, который раздаёт его вниз уже как props).

## Итог

State — изменяемые данные компонента; обновление через setter приводит к перерисовке UI.