Принцип Colocation в архітектурі компонентів

ReactJunior~2 хв читання

Що таке "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

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

Де застосовується 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 - це про те, щоб не шукати по всьому проєкту те, що логічно стосується одного місця."

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.