Какие способы хранения состояния существуют в React?

React не навязывает один способ хранения состояния, а предоставляет несколько уровней.

Определение

Состояние (state) — данные, которые влияют на отображение UI и могут изменяться со временем.

Основные способы хранения состояния

1. Локальное состояние компонента

const [count, setCount] = useState(0);

Используется когда:

1. Состояние нужно только одному компоненту.

2. Оно напрямую связано с его UI.

2. Поднятое состояние (Lifting state up)

Состояние хранится в ближайшем общем родителе и передаётся через props.

Используется когда:

1. Несколько компонентов должны синхронизироваться.

2. Нужно общее управление данными.

3. Context API

const ThemeContext = createContext();

Используется когда:

1. Данные нужны многим компонентам.

2. Не хочется прокидывать props через несколько уровней.

4. Глобальное состояние (сторы)

Примеры: Redux, Zustand, MobX (концептуально).

Используется когда:

1. Сложное состояние приложения.

2. Много логики и бизнес-правил.

3. Нужно централизованное управление.

5. URL как состояние

1. Query-параметры.

2. Параметры маршрута.

Используется для:

1. Навигации.

2. Шаринга состояния через ссылку.

Вывод

Состояние следует хранить как можно ближе к месту использования, поднимая его выше только при необходимости.