Использовать фиксированное позиционирование. В данном случае, по сути и не нужно слушать скролл.
По вашей задаче, если, допустим, у вас есть Header, который имеет два состояния, то по событию скролл его обновление должно происходить только в тот, момент когда это нужно, а не каждый вызов. То есть при скролле вниз это будет всего одно обновление.
Скорей всего, просто криво написали код и он работает не так, как вы задумывали. Постоянный вызов componentDidUpdate говорит о том, что на каждый скролл происходит перерисовка.
const menuItems = [
{id: 1, path: '/', type: 'home', title: 'Home'},
{id: 2, path: '/a3', type: 'desktop', title: 'a3'},
{id: 3, path: '/dashboards/av', type: null, title: 'av'},
];
const items = menuItems.map(item => (
<Menu.Item key={item.id}>
<Link to={item.path}>
type ? <Icon type={item.type} /> : null;
<span>{item.title}</span>
</Link>
</Menu.Item>
));
Чтобы здесь простыню кода не выкладывать, там удобнее смотреть.
В функции, которую вызываю в событии скролла залогировал prevState и текущий, ничего не меняется, но срабатывает DidUpdate.
Я в общем лучше сделаю полноценную песочницу и покажу