Що робить "state colocation"?

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

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

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

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

Premium

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