React Hydrate On View

DangerousHydrateOnView.tsx

import React, { useEffect, useRef, useState } from 'react';

export function HydrateOnView({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLElement>(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    if (!ref.current || inView) return;

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        observer.disconnect();

        startTransition(() => {
          setInView(true);
        });
      }
    });

    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [hydrated]);

  // On the server, always render children
  if (typeof window === 'undefined') {
    return <div>{children}</div>;
  }

  return (
    <div
      ref={ref}
      suppressHydrationWarning
      dangerouslySetInnerHTML={!inView ? { __html: '' } : undefined}
    >
      {inView ? children : null}
    </div>
  );
}

SuspendedHydrateOnView.tsx

import React, { useEffect, useRef, useState, Suspense } from "react";

export function HydrateOnView({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLElement>(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    if (!ref.current || inView) return;

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        observer.disconnect();

        startTransition(() => {
          setInView(true);
        });
      }
    });

    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [inView]);

  return (
    <div ref={ref}>
      <Suspense fallback={null}>
        <MaybeSuspend suspend={!inView}>{children}</MaybeSuspend>
      </Suspense>
    </div>
  );
}

function MaybeSuspend({
  suspend,
  children,
}: {
  suspend: boolean;
  children: React.ReactNode;
}) {
  if (suspend) {
    throw new Promise(() => {});
  }

  return <>{children}</>;
}