Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить "state colocation"?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке **state colocation**

**State colocation** - це принцип:

> «Тримай стан якомога ближче до місця, де він використовується.»

Тобто:
якщо стан потрібен лише **одному компоненту** -
не піднімай його "нагору" до батька,
а зберігай прямо в тому компоненті, де він реально використовується.

---

### Приклад без colocation (погано)

```javascript
function App() {
  const [isOpen, setIsOpen] = useState(false); // зберігається занадто високо

return (
    <div>
      <Header />
      <Modal isOpen={isOpen} setIsOpen={setIsOpen} />
      <Footer />
    </div>
  );
}
```

Тут `isOpen` впливає **лише на** `Modal`,
але зберігається в `App` і передається вниз через пропси.

→ Це **ускладнює** компонент `App`,
і призводить до **зайвих ререндерів** при зміні стану.

---

### З colocation (правильно)

```javascript
function Modal() {
  const [isOpen, setIsOpen] = useState(false);

return (
    <>
      <button onClick={() => setIsOpen(true)}>Відкрити</button>
      {isOpen && <div className="modal">Модалка!</div>}
    </>
  );
}
```

Тепер стан живе **там, де він реально використовується**.
Компонент `App` більше нічого не знає про внутрішню логіку `Modal`.

---

## Чому це важливо

### 1. Менше зв'язності (coupling)

Коли стан живе "нагорі", він починає:

- передаватися через `props` на кілька рівнів,
- викликати "prop drilling" (передачу пропсів через ланцюжок компонентів),
- ускладнювати логіку батька.

Colocation усуває це - кожен компонент відповідає лише за себе.

---

### 2. Менше зайвих ререндерів

Якщо стан зберігається занадто високо,
усі дочірні компоненти **ререндеряться**,
навіть якщо не залежать від нього.

Коли стан локалізований,
лише потрібний компонент реагує на оновлення.

Це підвищує **продуктивність**.

---

### 3. Код простіше розуміти

Легше читати компонент, якщо:

- його стан видно **у тому самому файлі**,
- видно, які елементи UI цей стан контролюють.

Не потрібно стрибати по файлах, щоб зрозуміти, хто керує чим.

---

### 4. Простіше масштабувати

Коли проєкт росте, "глобальний" стан перетворюється на хаос.
Colocation робить архітектуру модульною:

- компоненти можна перевикористовувати незалежно,
- стан не "витікає" назовні.

---

## Приклад впливу на продуктивність

### Без colocation

```javascript
function App() {
  const [selectedId, setSelectedId] = useState(null);

return (
    <div>
      <List selectedId={selectedId} setSelectedId={setSelectedId} />
      <Details id={selectedId} />
    </div>
  );
}
```

Тепер кожен клік у списку → перерендер `App`, `List` і `Details`.

### З colocation (частково перенесли вниз)

```javascript
function List({ onSelect }) {
  const [selectedId, setSelectedId] = useState(null);

const handleClick = (id) => {
    setSelectedId(id);
    onSelect(id);
  };

// ...
}
```

Тепер при кліку оновлюється лише `List`,
а `App` взагалі не торкається.

---

## Коли локалізувати стан **не потрібно**

Іноді навпаки - стан **потрібно підняти вище**, якщо:

- він впливає **на кілька компонентів** (shared state);
- потрібна **синхронізація** між частинами UI;
- або потрібне **глобальне керування** (через Context, Redux, Zustand тощо).

Приклад:

```javascript
// вибрана тема потрібна всім компонентам
const [theme, setTheme] = useState("dark");
```

---

## Підсумок

| Принцип | Що означає |
|---|---|
| **State colocation** | Тримай стан якомога ближче до місця, де він використовується |
| **Навіщо** | Зменшує зв'язність, покращує продуктивність, спрощує код |
| **Коли застосовувати** | Коли стан використовується лише в одному компоненті |
| **Коли не застосовувати** | Коли потрібно ділитися станом між кількома компонентами |
| **Головна мета** | Мінімізувати "область впливу" стану |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати500 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.