PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Есть ли бизнес-логика в useContext?

Хуки

Сам useContext бизнес-логики не содержит — это только чтение значения из контекста. Но вокруг контекста логику размещают — вопрос в том, где она должна жить.

Что делает useContext

const cart = useContext(CartContext); // просто вернуть value ближайшего провайдера

Ни состояния, ни правил, ни эффектов — только доставка того, что положил провайдер.

Где логика оказывается на практике

У провайдера — самое частое место:

const CartProvider = ({ children }) => {
  const [items, setItems] = useState([]);

  const addItem = (product) => {          // логика: проверки, лимиты, пересчёт
    if (items.some((i) => i.id === product.id)) return;
    setItems([...items, { ...product, qty: 1 }]);
  };

  const total = useMemo(() => calcTotal(items), [items]);

  const value = useMemo(() => ({ items, total, addItem }), [items, total]);
  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
};

Контекст здесь — транспорт для состояния и операций; сама логика — в провайдере (точнее, в его хуках/функциях).

Правильнее — ещё глубже: выносить правила в чистые функции/кастомные хуки (useCartState), а провайдер оставлять тонким. Тогда логика тестируется без React, а контекст остаётся каналом доставки.

Антипаттерн

Размазывать бизнес-правила по потребителям: каждый компонент после useContext сам решает, «можно ли добавить товар». Правила дублируются и расходятся. Операции должны приходить из контекста готовыми (addItem уже всё проверяет).

Коротко для собеседования

useContext — только чтение значения, логики в нём нет. Бизнес-логику размещают у провайдера (state + операции, отданные через value), а лучше — в чистых функциях/кастомных хуках под ним; потребители получают готовые операции. Контекст — транспорт, не место для правил.

Другие вопросы раздела