Что такое состояние (state) в React и как оно используется?

Правильный ответ

Состояние (state) — это объект, который хранит данные о компоненте и может изменяться с течением времени. Изменение состояния вызывает повторный рендеринг компонента.

1. Что такое состояние (state) в React?

Состояние (state) в React — это встроенный механизм для хранения и управления изменяемыми данными внутри компонента. В отличие от пропсов (props), которые передаются извне и являются неизменяемыми, состояние полностью контролируется самим компонентом.

Когда состояние изменяется, React автоматически перерисовывает компонент (и его дочерние элементы, если необходимо), чтобы отразить новые данные. Это делает state ключевым инструментом для создания интерактивных пользовательских интерфейсов.

2. Основные характеристики состояния

2.1. Локальность

Состояние принадлежит конкретному компоненту и не доступно напрямую извне (если не передаётся через props).

2.2. Изменяемость

В отличие от props, state можно изменять с помощью специального метода setState (в классовых компонентах) или функции-сеттера (в функциональных компонентах с хуками).

2.3. Батчинг

Обновление состояния может происходить не мгновенно. React может группировать несколько вызовов setState для оптимизации производительности.

2.4. Инициализация

Состояние обычно инициализируется при создании компонента:

• В классовых компонентах — в конструкторе.

• В функциональных компонентах — через useState.

3. Как использовать состояние в React?

С появлением React Hooks (16.8+) функциональные компоненты получили возможность использовать состояние.

import React, { useState } from 'react';
//
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => { setCount(count + 1); };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Увеличить</button>
    </div>
  );
}

Особенности:

• Используется хук useState.

• useState возвращает массив: текущее значение и функцию-сеттер.

• Можно использовать несколько useState для разных данных.

4. Правила работы с состоянием

4.1. Не изменяйте state напрямую

❌ Неправильно:

state = 10; // Не вызовет ререндер

✅ Правильно:

setCount(10);

4.2. Обновление на основе предыдущего состояния

Если новое состояние зависит от предыдущего, используйте функцию setCount.

setCount((prevCount) => prevCount + 1);

5. Подъём состояния (Lifting State Up)

Если несколько компонентов должны работать с одними данными, состояние выносится в ближайшего общего родителя.

function ParentComponent() {
  const [sharedValue, setSharedValue] = useState('');
  return (
    <>
      <ChildA value={sharedValue} onChange={setSharedValue} />
      <ChildB value={sharedValue} />
    </>
  );
}

6. Глобальное состояние (Zustand, Redux, Context API)

Для сложных приложений с множеством компонентов локального состояния может быть недостаточно. В таких случаях используют:

• Context API (встроен в React).

• Zustand, Redux, MobX (сторонние решения).

7. Заключение

Состояние — это мощный механизм React для управления динамическими данными. Оно позволяет:

• Создавать интерактивные интерфейсы.

• Контролировать данные внутри компонента.

• Автоматически обновлять UI при изменениях.

Используйте его правильно, избегая прямых изменений и вынося общее состояние вверх по иерархии компонентов. Для больших приложений рассмотрите глобальные решения, такие как Context API или Zustand, Redux.