Как перестать страдать с зависимостями в useEffect

Сегодня покажу приём, который резко снижает боль от “почему эффект снова сработал” и “ESLint ругается на deps”.

Типичный кейс: в useEffect ты подписываешься на что-то и используешь колбэк/данные, которые постоянно меняются → эффект перезапускается, подписки пересоздаются.

Решение: “стабильный эффект + актуальные данные через ref”

Идея простая:

🔹эффект запускается редко (или 1 раз),
🔹а внутри всегда используются самые свежие значения через ref.

Пример (мини-хук):

function useLatest(value) {
  const ref = React.useRef(value);
  React.useEffect(() => { ref.current = value; }, [value]);
  return ref;
}

Использование:

const onMessageLatest = useLatest(onMessage);

React.useEffect(() => {
  const unsub = socket.subscribe((msg) => {
    onMessageLatest.current(msg);
  });
  return unsub;
}, []); // подписка не пересоздаётся

Что это даёт:

🔹подписки/таймеры/листенеры не пересоздаются на каждую мелочь,
🔹зависимости в эффекте становятся честными,
🔹меньше неожиданных “петель”.

✍️ @React_lib