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

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

Допрацюйте відповідь до «Як розділяти бізнес-логіку і UI за допомогою кастомних хуків?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## Принцип

**Хук = "headless" контролер**, компонент = "view".

- Хук нічого не знає про розмітку/стилі.
- Хук інкапсулює стан, ефекти, обчислення, валідацію, звернення до API і віддає **дані + дії**.
- Компонент займається лише відображенням, отримуючи все готове з хука.

---

## Міні-чекліст для хука (бізнес-логіка)

- Повертай **мінімальний і стабільний API**: `{ state, derived, actions }`.
- Всередині: `useReducer/useState` для стану, `useEffect` для запитів/підписок, `useMemo`/`useCallback` для стабільності посилань.
- Ніякого JSX і DOM-маніпуляцій.
- Не тягнути CSS/UI-турботи (класи, aria-атрибути) - максимум підготувати дані для них (наприклад, `isOpen`, `getItemProps()` тощо).

## Міні-чекліст для компонента (UI)

- Жодної бізнес-логіки/завантаження/валідації всередині - тільки рендер.
- Отримує з хука все готове.
- Легко переюзається і переоформлюється.

---

### Патерн 1: "Headless hook" + будь-який UI

#### Хук (логіка списку задач)

```javascript
// useTodos.ts
import { useEffect, useMemo, useReducer, useCallback } from "react";

type Todo = { id: string; title: string; done: boolean };
type State = { items: Todo[]; filter: "all"|"done"|"todo" };
type Action =
  | { type: "load"; payload: Todo[] }
  | { type: "add"; title: string }
  | { type: "toggle"; id: string }
  | { type: "setFilter"; filter: State["filter"] };

export function useTodos() {
  const [state, dispatch] = useReducer(reducer, { items: [], filter: "all" });

useEffect(() => {
    // бізнес-логіка завантаження (можна замінити fetch'ем)
    const saved = localStorage.getItem("todos");
    if (saved) dispatch({ type: "load", payload: JSON.parse(saved) });
  }, []);

useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(state.items));
  }, [state.items]);

const visible = useMemo(() => {
    switch (state.filter) {
      case "done": return state.items.filter(t => t.done);
      case "todo": return state.items.filter(t => !t.done);
      default:     return state.items;
    }
  }, [state.items, state.filter]);

return {
    state,                 // "сирий" стейт, якщо потрібен
    todos: visible,        // похідні дані для UI
    actions: { add, toggle, setFilter } // стабілізовані дії
  };
}
```

#### Будь-який UI-компонент на базі хука

```javascript
// TodosView.tsx
import { useTodos } from "./useTodos";

export function TodosView() {
  const { todos, state, actions } = useTodos();

return (
    <div>
      <div>
        <button onClick={() => actions.setFilter("all")}  aria-pressed={state.filter==="all"}>Усі</button>
        <button onClick={() => actions.setFilter("todo")} aria-pressed={state.filter==="todo"}>Активні</button>
        <button onClick={() => actions.setFilter("done")} aria-pressed={state.filter==="done"}>Готові</button>
      </div>

<form onSubmit={(e) => {
        e.preventDefault();
        const input = (e.currentTarget.elements.namedItem("title") as HTMLInputElement);
        if (input.value.trim()) actions.add(input.value.trim());
        input.value = "";
      }}>
        <input name="title" placeholder="Нова задача" />
        <button type="submit">Додати</button>
      </form>

<ul>
        {todos.map(t => (
          <li key={t.id}>
            <label>
              <input type="checkbox" checked={t.done} onChange={() => actions.toggle(t.id)} />
              {t.title}
            </label>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

**Що вийшло:**

- `useTodos` повністю "headless": завантаження/збереження, фільтри, дії, мемоізації.
- `TodosView` - чистий UI: кнопки, список, форми.
Хочеш інший дизайн (Tailwind, MUI, shadcn) - міняєш тільки `TodosView`.

---

### Патерн 2: "Controller/View" (як у Headless UI)

Хук може повертати **props-геттери**, щоб UI легко зв'язувався з логікою.

```javascript
// useDisclosure.ts
export function useDisclosure(initial = false) {
  const [open, setOpen] = useState(initial);
  const openIt = useCallback(() => setOpen(true), []);
  const close  = useCallback(() => setOpen(false), []);
  const toggle = useCallback(() => setOpen(o => !o), []);

const getButtonProps = () => ({
    "aria-expanded": open,
    onClick: toggle
  });

const getPanelProps = () => ({
    role: "region",
    hidden: !open
  });

return { open, openIt, close, toggle, getButtonProps, getPanelProps };
}
```

UI залишається будь-яким:

```javascript
const d = useDisclosure();
<button {...d.getButtonProps()}>Відкрити</button>
<section {...d.getPanelProps()}>Контент</section>
```

---

### Патерн 3: Контекст + `useReducer` (mini-store)

Логіку - в хук/редьюсер; UI-компоненти підписуються вибірково.

```javascript
// cart.store.tsx
const CartContext = createContext<ReturnType<typeof useCartStore> | null>(null);

export function CartProvider({ children }: { children: React.ReactNode }) {
  const api = useCartStore();
  return <CartContext.Provider value={api}>{children}</CartContext.Provider>;
}

export function useCart() {
  const ctx = useContext(CartContext);
  if (!ctx) throw new Error("useCart must be used within CartProvider");
  return ctx;
}
```

Будь-які представлення:

```javascript
function CartTotal() {
  const { total } = useCart(); // тільки derived-дані
  return <b>{total} $</b>;
}
```

---

### Структура проєкту

```javascript
src/
  hooks/
    useTodos.ts
    useDisclosure.ts
    useDebouncedValue.ts
  stores/
    cart.store.tsx
  components/
    TodosView.tsx
    Cart/
      CartTotal.tsx
      CartList.tsx
```

---

### Тестованість

- **Хук** тестується окремо (`renderHook`) - без UI.
- **Компонент** тестується як "тупий" рендер - прості снапшоти/role-перевірки.

---

### Антипатерни (щоб не змішувати шари)

- У хуку - DOM-маніпуляції, класи, таймінги анімацій (лиши в UI або зроби проп-геттери).
- У UI - мережа/валідація/бізнес-правила.
- Нестабільні посилання в API хука (загортай у `useCallback`/`useMemo`).
- Повертати зайве - тримай API мінімальним.

---

### Швидкий шаблон "Headless hook"

```javascript
export function useFeature(params: Params) {
  // state
  // effects (fetch/cache)
  // derived (useMemo)
  // actions (useCallback)
  return { state, derived, actions };
}
```

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

Для рев’юера

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

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