So I am using State to change my body's background color using classes. Basically there's a scroll effect where it starts off in "dark mode" and becomes "light mode" after hitting a specific ref. Here's my code snippet:

const shiftRef = useRef(null)
const [ changeMode, setChangeMode ] = useState("dark-mode");
    const handleChangeMode = () => {
        if (shiftRef.current) {
            let main = shiftRef.current.getBoundingClientRect();
            if (main.top <= 160) {
                setChangeMode("light-mode")
            } else {
                setChangeMode("dark-mode")
            }
            console.log(main.top)
        }
    }
    useEffect(() => {
        document.body.classList = changeMode;
        window.addEventListener("scroll", handleChangeMode);
        return () => window.removeEventListener("scroll", handleChangeMode);
    }, [changeMode]);

Now I have it changing the body instead of the component container so that the color is always there in the background -- if i didn't do that, the color would "clip" if I scrolled beyond the page's parameters, which would not give the effect I need.

Here's my question...is it valid to declare my body's class in the Effect hook with document.body.classList = {add class here}? The only reason I ask is usually that has an additional action like .add or .remove or .contains or something but I'm not doing that here. Also: I should point out everything compiled successfully, and there's no warnings/alerts in my console...so I guess it's ok? But I figured I'd ask people here since you all give a lot of great info.

Thank you!