Как использовать один и тот же кастомный хук в нескольких компонентах одновременно?

Кастомный хук в React — это просто функция, имя которой начинается с use и которая внутри вызывает другие хуки. Ключевая идея: хук не хранит состояние сам по себе, он лишь описывает логику. Состояние создаётся в момент вызова хука внутри конкретного компонента, поэтому каждый компонент получает свою независимую копию.

Как это работает

Когда два компонента вызывают один и тот же хук, React создаёт для каждого из них отдельную ячейку состояния в его fiber-узле. Значения не пересекаются, даже если логика идентична.

function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const inc = () => setCount(c => c + 1);
  return { count, inc };
}

function A() {
  const { count, inc } = useCounter();
  return <button onClick={inc}>A: {count}</button>;
}

function B() {
  const { count, inc } = useCounter(10);
  return <button onClick={inc}>B: {count}</button>;
}

Клик по кнопке A увеличит только счётчик A, клик по B — только B. Это и есть изоляция состояния.

Когда нужно общее состояние

Если компонентам нужно разделять одни и те же данные, кастомный хук сам по себе не поможет. Варианты:

• Поднять состояние в общего родителя и передать через props.
• Использовать useContext — тогда хук читает общий контекст.
• Подключить внешний стор (Redux, Zustand, MobX).

const CounterCtx = createContext(null);

function useSharedCounter() {
  return useContext(CounterCtx);
}

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CounterCtx.Provider value={{ count, setCount }}>
      {children}
    </CounterCtx.Provider>
  );
}

Теперь все компоненты, вызывающие useSharedCounter, видят одно и то же значение.

Правила использования

• Вызывать хуки только на верхнем уровне компонента или другого хука.
• Не вызывать хуки в условиях, циклах и вложенных функциях.
• Имя всегда начинается с use, иначе линтер не проверит правила.

Итог: кастомный хук — это способ переиспользовать логику, а не состояние. Если нужна общая логика с изолированным состоянием — просто вызывайте хук в каждом компоненте. Если нужно общее состояние — поднимайте его выше или используйте контекст/стор.