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

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

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

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

Контент

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

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

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

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

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

## Що таке "Colocation"

> **Colocation** - це принцип, згідно з яким **код, який логічно пов'язаний, має фізично перебувати поруч**.

Простіше кажучи:

> «Зберігай речі разом, якщо вони належать одна одній.»

---

## Сенс принципу

Коли компонент або функція використовує якісь дані, стилі, хуки, тести - усе це **варто зберігати поруч** із ним, а не розкидати по папках проєкту.

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

---

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

```javascript
src/
  components/
    UserCard.jsx
  hooks/
    useUserData.js
  styles/
    userCard.css
  tests/
    UserCard.test.js
```

Щоб змінити `UserCard`, потрібно бігати по 4 папках.
Усе, що пов'язано з цим компонентом, - **розкидано**.

---

## Приклад з colocation (правильний підхід)

```javascript
src/
  components/
    user-card/
      UserCard.jsx
      useUserData.js
      userCard.css
      UserCard.test.js
```

Усе, що стосується `UserCard`, тепер **в одній папці**.
Якщо видалити компонент - видалиш і все, що йому належить.
Якщо змінити - одразу бачиш контекст.

---

## Приклад на рівні Feature-Sliced Design (FSD)

```javascript
features/
  add-to-cart/
    ui/
      AddToCartButton.tsx
    model/
      store.ts
      selectors.ts
    lib/
      formatPrice.ts
```

Тут колокація відбувається **всередині фічі**:
UI, логіка та утиліти цієї фічі зберігаються **поруч**, а не в спільних папках `components/`, `store/`, `utils/`.

---

## Мета colocation

1. **Локалізувати контекст** - усе, що потрібно для розуміння модуля, поруч.
2. **Підвищити модульність** - фіча автономна й переносима.
3. **Спростити рефакторинг** - змінюєш одну фічу, не чіпаєш інші.
4. **Прискорити розробку** - швидше орієнтуєшся в коді.

---

## Де застосовується colocation

| Тип даних | Що краще колоцувати |
| --- | --- |
| Компонент | Стилі, тести, хуки, типи |
| Фіча (feature) | UI, model, API, helpers |
| Хук | Локальні утиліти і типи |
| Entity | UI, model, API цієї сутності |
| Сторінка (page) | Усі її підкомпоненти і логіку завантаження |

---

## Приклади colocation у React

### Локальні стилі

Замість `styles/`:

```javascript
// UserCard.jsx
import './UserCard.css';
```

### Локальний хук

```javascript
// всередині /user-card/useUserData.js
export function useUserData(id) {
  const [user, setUser] = useState();
  // ...
  return user;
}
```

### Локальний тест

```javascript
/user-card/UserCard.test.jsx
```

### Локальна утиліта

```javascript
/user-card/formatDate.js
```

---

## Правило "рухай усередину"

Коли код використовується тільки в одному місці -

> перемісти його ближче до місця використання.

Коли його починають використовувати в кількох місцях -

> винеси вище (наприклад, з `feature` у `shared`).

Це природний, "bottom-up" процес архітектурного росту.

---

## Підсумок

| Принцип | Опис |
| --- | --- |
| Що це таке | Розміщуй пов'язані частини системи поруч |
| Мета | Підвищити читабельність, ізолювати фічі, спростити підтримку |
| Приклад | Компонент + стилі + тести в одній папці |
| Де застосовується | Компоненти, хуки, фічі, сторінки |
| Результат | Мінімум хаосу, максимум контексту і зручності |

---

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

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

Для рев’юера

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

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