What is the best way to deal with the scroll event in React?

Question

React

Need help.
An online store is being built on React, the listing page has a sidebar and the products themselves. If the sidebar is smaller than the products, then the sidebar will scroll, otherwise, the products will scroll.
There is also a banner in the header, which is displayed only on listing pages, while there is a block in the header that becomes fixed when the scroll reaches it.
Scroll done, everything works, but here's what worries:
1) In the header component, I hung the scroll handler, and it turns out that it works constantly and redraws the header. In theory, the keys do not change and the state only changes when the scroll passes the starting point. But React devtools highlights my header in red and componentDidUpdate works on every scroll.
2) In the listing, the same problem, when working with a scroll, React devtools shows a component rerender.
Questions:
1) Does react actually render these components? Or does it only re-render the wrapper that changes the CSS properties set via styled-components?
2) What is the best way to work with scrolling? Do it through React or just include a separate JS file and work with the DOM directly? I know that with React you don’t need to work with the DOM like this, but maybe this is the case when it’s worth it?

Answer 1

In theory, the keys do not change and the state only changes when the scroll passes the starting point. But React devtools highlights my header in red and componentDidUpdate works on every scroll.

Most likely, they just wrote the code crookedly and it does not work the way you intended. The constant call to componentDidUpdate indicates that a redraw occurs on each scroll.
Really.
Everything depends on the task. You definitely shouldn't include a separate file with native code.
It is possible and very often necessary. For this, React has refs.