From harness-claude
Delays hydration of below-fold or non-critical React components via IntersectionObserver, idle callbacks, and user interaction to improve TTI on SSR pages.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Delay hydration of below-fold or non-critical components to improve TTI
Implements lazy loading with Intersection Observer for visibility triggers, code splitting, progressive hydration, and virtual scrolling to reduce initial payload for below-the-fold content and heavy lists.
Optimizes React performance using React.memo for component memoization, custom prop comparisons, and useMemo for expensive computations like filtering and sorting. Use for preventing unnecessary re-renders.
Optimizes React performance via Profiler setup, memoization (React.memo, useMemo, useCallback), code splitting (React.lazy), list virtualization (react-window), useTransition/useDeferredValue, bundle analysis, and Web Vitals tracking.
Share bugs, ideas, or general feedback.
Delay hydration of below-fold or non-critical components to improve TTI
IntersectionObserver)requestIdleCallback)React.lazy + Suspense for code-splitting alongside hydration deferral.function LazyHydrate({ children }: { children: React.ReactNode }) {
const [hydrated, setHydrated] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setHydrated(true);
observer.disconnect();
}
});
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, []);
return (
<div ref={ref}>
{hydrated ? children : <div dangerouslySetInnerHTML={{ __html: '' }} />}
</div>
);
}
Progressive hydration is distinct from islands: islands prevent hydration entirely for static regions, while progressive hydration defers hydration of React components that will eventually be interactive.
React 18 selective hydration: React.lazy with Suspense boundaries already enables selective hydration in React 18 with hydrateRoot. React prioritizes hydrating components the user interacts with first.
Libraries: react-lazy-hydration, react-intersection-observer provide production-ready utilities for this pattern.
Measurement: Use Lighthouse TTI, Chrome DevTools Performance tab, and WebPageTest to verify improvements. Premature optimization without measurement is counterproductive.
https://patterns.dev/react/progressive-hydration