Performative Scroll Restoration 2026

gistfile1.txt

"use client";

import { usePathname } from "next/navigation";
import { useEffect, useLayoutEffect, useRef } from "react";

const KEY_PREFIX = "scroll-";

const useIsoLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;

export function ScrollRestoration() {
  const pathname = usePathname();
  const pathnameRef = useRef(pathname);

  useIsoLayoutEffect(() => {
    pathnameRef.current = pathname;
    const saved = sessionStorage.getItem(KEY_PREFIX + pathname);
    if (saved !== null) {
      window.scrollTo({
        top: parseInt(saved, 10),
        left: 0,
        behavior: "instant",
      });
    }
  }, [pathname]);

  useEffect(() => {
    const save = () => {
      sessionStorage.setItem(
        KEY_PREFIX + pathnameRef.current,
        String(window.scrollY),
      );
    };

    const onClickCapture = (event: MouseEvent) => {
      const link = (event.target as Element | null)?.closest?.("a[href]");
      if (link) save();
    };

    const onPageHide = () => save();

    document.addEventListener("click", onClickCapture, true);
    window.addEventListener("pagehide", onPageHide);

    return () => {
      document.removeEventListener("click", onClickCapture, true);
      window.removeEventListener("pagehide", onPageHide);
    };
  }, []);

  return null;
}