После нескольких переходов между страницами обработчик прокрутки срабатывает десять раз
function StickyHeader() {
const [isCompact, setIsCompact] = useState(false);
useEffect(() => {
window.addEventListener('scroll', () => setIsCompact(window.scrollY > 80));
}, []);
return <header className={isCompact ? 'compact' : ''} />;
}
После десятка переходов между страницами прокрутка начинает подтормаживать, а в профайлере на одно событие вызывается множество обработчиков. В чём проблема?
- Эффект не снимает подписку — каждое монтирование добавляет новый обработчик
- addEventListener нельзя вызывать внутри useEffect
- Пустой массив зависимостей запускает эффект на каждом рендере
- Событие scroll всплывает и вызывает обработчики всех компонентов