Observer

Observer is a performance-focused component that renders content based on viewport visibility. Internally it combines conditional rendering (Show) with a useIntersectionObserver hook to detect element visibility. This pattern defers heavy rendering until the user actually sees the element, reducing initial load cost and avoiding wasted work. It's ideal for lazy-loading images, infinite scroll, and scroll-triggered animations.

const Observer: ForwardRefExoticComponent<{
  children?: React.ReactNode | ((isIntersecting: boolean) => React.ReactNode);
  fallback?: React.ReactNode;
  threshold?: number | number[];
  rootMargin?: string;
  triggerOnce?: boolean;
  onIntersect?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
} & RefAttributes<HTMLDivElement>>

Basic usage#

Provide a fallback for the placeholder state; when the target enters the viewport the real children will be mounted. Useful for delaying heavy components until they are likely to be seen.

import { Observer } from '@ilokesto/utilinent';

function InfiniteScrollTrigger({ onLoadMore }) {
  return (
    <Observer 
      onIntersect={(isVisible) => {
        if (isVisible) {
          onLoadMore();
        }
      }}
    >
      <Spinner />
    </Observer>
  );
}

Advanced usage#

Use the onIntersect callback to trigger side effects such as analytics events, prefetching data, or starting animations once a section becomes visible. This lets you proactively prepare content just-in-time for the user.

function SomeSection({ productId }) {
  return (
    <>
      <Observer
        triggerOnce
        onIntersect={(isVisible) => {
          if (isVisible) {
            // 분석 이벤트 전송
            analytics.track('Product Section Viewed', { productId });
          }
        }}
      />
    </>
  );
}

useIntersectionObserver#

The internal useIntersectionObserver hook abstracts the native Intersection Observer API into a React-friendly hook. It accepts options like root, rootMargin, and threshold, and can be configured to trigger once or multiple times. The hook includes SSR guards so it safely degrades during server rendering. Use it directly for more advanced intersection-driven behavior such as prefetching or fine-grained animation triggers.

function useIntersectionObserver(options?: {
  threshold?: number | number[];
  root?: Element | null;
  rootMargin?: string;
  freezeOnceVisible?: boolean;
  initialIsIntersecting?: boolean;
  onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
}): {
  ref: (node: HTMLElement | null) => void;
  isIntersecting: boolean;
  entry: IntersectionObserverEntry | undefined;
};