I'm implementing a header in my Next.js app where the background color changes based on the scroll position: if window.scrollY is 0, the background is transparent. Otherwise, it changes to a solid color. I’m using a useEffect hook to set up the scroll listener and adjust the background color state accordingly.

The problem is that if a user refreshes the page while scrolled down, the header would initially be rendered with transparent background even if the initial scrollY is greater than 0 then changed to white. This happens because the color changing logic inside useEffect runs after the component mounts, causing a delay before it checks the scroll position.

How can I avoid this flicker effect and make sure the header displays the correct background color immediately on page load without any delay?

"use client"
export default function Header() {
  useEffect(() => {
    const handleScrollChange = () => {
      const header = document.querySelector("header");
      if (window.scrollY > 0) {
        header?.classList.remove("bg-transparent");
        header?.classList.add("bg-white");
      } else {
        header?.classList.remove("bg-white");
        header?.classList.add("bg-transparent");
      }
    };
    handleScrollChange();
    window.addEventListener("scroll", handleScrollChange);
    return () => window.removeEventListener("scroll", handleScrollChange);
  }, []);

  return (
    <header className="sticky w-full top-0 z-10">
      ...
    </header>
  );
}