Проектирование хука и зависимости

Сначала спроектируй поверхность хука: чёткие входы, предсказуемая форма возврата. До любого эффекта реши, что входит и что выходит, — и держи форму возврата стабильной по рендерам, чтобы потребители деструктурировали её один раз. Возвращай кортеж, когда порядок очевиден и мал ([value, setValue]), и объект, когда есть несколько именованных частей (чтобы вызывающие брали нужное без позиционного угадывания).

// возврат объектом: именованный, расширяемый, независимый от порядка
function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((v) => !v), []);
  return { on, toggle, setOn }; // те же ключи каждый рендер → стабильная форма
}

Предсказуемая форма — часть контракта. Если хук иногда возвращает undefined, а иногда объект, каждому потребителю приходится защищаться. Выбери форму и держи её для каждого рендера, включая первый.

Массив зависимостей — это заявление: «вот значения, которые этот эффект читает». Врущий массив зависимостей и есть баг. exhaustive-deps не зануда — он сверяет твоё заявление с реальностью. Если эффект замыкается над delay, а ты пишешь [], ты сказал React «этот эффект ничего не читает», поэтому он никогда не перезапустится при изменении delay, и интервал вечно срабатывает с первоначальным delay. Это устаревшее замыкание: эффект захватил значения нулевого рендера, и ему никогда не велели обновиться.

// ВРУЩИЙ массив зависимостей: эффект читает `delay`, но заявляет, что ничего не читает
useEffect(() => {
  const id = setInterval(tick, delay); // захватывает ПЕРВЫЙ delay
  return () => clearInterval(id);
}, []); // ❌ пропускает `delay` → никогда не обновляется при смене delay

Исправление никогда не «заглуши правило линтера». Это либо честно перечислить зависимость (и принять переподписку), либо перестроить так, чтобы эффект и правда от неё не зависел, — что именно и даёт ref в шаге 4.

Очистка — вторая половина контракта: каждую подписку, которую ты настроил, ты разрушаешь. Эффект, добавляющий слушателя, открывающий интервал или подписывающийся на стор, обязан вернуть функцию, которая всё это отменяет. Пропусти её — и потечёт: дублирующиеся слушатели накапливаются по перерисовкам и размонтированиям, интервалы тикают после исчезновения компонента, и ты получаешь предупреждения «setState на размонтированном компоненте» или, хуже, тихие двойные срабатывания.

function useEventListener(type: string, handler: (e: Event) => void) {
  useEffect(() => {
    window.addEventListener(type, handler);
    return () => window.removeEventListener(type, handler); // ← контракт
  }, [type, handler]); // переподписывается, если меняется любое
}

Здесь скрытая ловушка: handler в deps, поэтому инлайн-обработчик (новая идентичность каждый рендер) заставляет это переподписываться каждый рендер. Это корректно, но расточительно — и это та самая нагрузка, что оправдывает паттерн с ref далее.

Используй ref, чтобы читать свежий колбэк без переподписки, — senior-исправление напряжения «устаревшее замыкание против churn». Тебе нужны две вещи, которые борются друг с другом: эффект всегда должен вызывать свежий обработчик (нет устаревшего замыкания), но он не должен разрушать и пересоздавать подписку каждый рендер. Ref разрешает это: храни свежайший обработчик в ref (обновляемый каждый рендер), подпишись один раз стабильной обёрткой, читающей ref.current в момент вызова.

function useInterval(callback: () => void, delay: number | null) {
  const savedCallback = useRef(callback);
  useEffect(() => { savedCallback.current = callback; }); // всегда свежий, без churn

  useEffect(() => {
    if (delay === null) return;                       // null = пауза
    const id = setInterval(() => savedCallback.current(), delay);
    return () => clearInterval(id);                    // очистка симметрична настройке
  }, [delay]); // ✅ честно: только delay реально движет переподпиской
}

Теперь delay — единственное, что переподписывает, колбэк никогда не устаревает, а массив зависимостей говорит правду. Это и есть весь паттерн: ref поглощает потребность в «свежем значении», так что массив зависимостей может оставаться и честным, и минимальным.