pending-link.js

function useIsPendingPathname(to) {
  let { location } = useTransition();
  let { pathname } = useResolvedPath(to);
  return location?.pathname === pathname;
}

function useIsSlowTransition(ms = 300) {
  let transition = useTransition();
  let [isSlow, setIsSlow] = useState(false);

  useEffect(() => {
    if (transition.state === "loading") {
      let id = setTimeout(() => setIsSlow(true), ms);
      return () => clearTimeout(id);
    } else {
      setIsSlow(false);
    }
  }, [transition, ms]);

  return isSlow;
}

function PendingLink({ to, style, ...props }) {
  let isSlow = useIsSlowTransition(300);
  let isPending = useIsPendingPathname(to);

  return (
    <Link
      style={{ ...style, opacity: isPending && isSlow ? 0.33 : 1 }}
      to={to}
      {...props}
    />
  );
}

@ryanflorence, would this be better with let { state } = useTransition() and then using state instead of transition in the effect dependencies?

Maybe it doesn't make much of a difference in this case, but I tend to avoid placing objects in dependency arrays if I can – in case they don't have referential stability and because they'll take up a bit (or a lot) more memory than one of their props. Do you think that's a good general rule?