В чём разница между локальным и глобальным состоянием?

Question

IT Interview Practice · Accepted Answer

**Локальное состояние** принадлежит одному компоненту (или небольшому поддереву) и не требуется в других местах. **Глобальное состояние** делится между многими, часто удалёнными компонентами во всём приложении.

## Локальное состояние — привязано к одному компоненту

```jsx
function SearchBox() {
  const [query, setQuery] = useState(""); // only THIS component needs `query`
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
```

Локальное состояние находится внутри компонента (`useState`, `ref`, `data()`). Примеры: значения входных полей, открыто ли выпадающее меню, состояние при наведении курсора, черновик формы. Никакой другой компонент о нём не знает.

## Глобальное состояние — общее для всего приложения

```jsx
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
```

Глобальное состояние — это данные, которые многие несвязанные компоненты должны читать или обновлять согласованно: аутентифицированный пользователь, тема оформления, корзина покупок, уведомления приложения. Оно находится в Context, хранилище (Redux/Zustand/Pinia) или подобном решении.

## Как принять решение

```text
Ask: "How many components need this, and how far apart are they?"

One component (or parent+child)         → LOCAL state
Many unrelated components / whole app    → GLOBAL state
```

## Частая ошибка: чрезмерная глобализация

```jsx
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);

// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
```

Делать всё глобальным добавляет шаблонный код, связывает компоненты и может снизить производительность (больше переотрисовок). Лучшая практика — **держать состояние максимально локальным**, и поднимать его в глобальное только когда совместное использование действительно требуется.

## Почему это важно

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

Когда состояние остаётся локальным, компоненты остаются простыми, самодостаточными и производительными; обращение к глобальному состоянию только когда данные действительно общие, позволяет избежать ненужной сложности.

Частая ошибка — помещение всего в глобальное хранилище "на всякий случай" — приводит к раздутым, тесно связанным приложениям.

Управляющее правило: **локализовать по умолчанию, глобализировать только когда требуется совместное использование.**

Локальное состояние — привязано к одному компоненту

Глобальное состояние — общее для всего приложения

Как принять решение

Частая ошибка: чрезмерная глобализация

Почему это важно

Похожие вопросы