Как отследить позицию scroll в react js

Мне тоже был интересен этот момент. Запилил код, в котором при скроле больше 300 пикселей появляется кнопка для возврата наверх:

const App = () => {
  const [scroll, setScroll] = React.useState(0);

  const handleScroll = () => {
    setScroll(window.scrollY);
  };

  const handleUpButton = () => {
    window.scrollTo(0, 0);
  };

  React.useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div className="App">
        <button
            className={scroll < 300 ? "" : "show"}
            onClick={handleUpButton}
        >
            Go Up
        </button>
        <div>
            <p>
              // вставить много текста для скрола
            </p>                    
        </div>
    </div>
  );
};
export default App;

css:

.App button {
padding: 1rem 2rem;
margin: 1rem;
border-radius: 1rem;
position: fixed;
bottom: -5rem;
right: 1rem;
transition: 0.2s all ease-in-out;
background-color: black;
color: white;
border: none;
}

.App button.show {
  bottom: 0rem;
}

Ты можешь отслеживать состояние скролла по высоте монитора клиента document.documentElement.clientHeight.

Также не привязываться к className, а рендерить по условию.

Пример с рендером кнопки для прокрутки вверх:

import {useEffect, useState} from "react";

const Page = () => {
const [scroll, setScroll] = useState(0);
    useEffect(() => {
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);
    const handleScroll = () => {
        setScroll(window.scrollY);
    };
    return (
      {scroll > document.documentElement.clientHeight && <Button_Scroll_Top/>}
    )
};

export default Page;