Import On Interaction (Hover Prefetch + Click Load)

#15PerformanceMedium

Import On Interaction (Hover Prefetch + Click Load)

Import On Interaction — Hover로 Prefetch, Click으로 Commit

GMail의 답장 버튼처럼, 무거운 에디터 모듈을 "클릭하기 전 hover로 미리 fetch 시작 → 클릭하면 즉시 보임"으로 체감 지연을 거의 0으로 만드는 패턴.

요구사항

LazyEditorButton 컴포넌트는 "Reply" 버튼을 렌더
버튼 hover (onMouseEnter, onFocus) 시 ./Editor 모듈을 prefetch 시작 — 단지 import('./Editor') 를 호출만 (반환값 무시)
버튼 click 시 Editor 컴포넌트가 등장. React.lazy 와 Suspense 사용
hover 후 click이면 모듈 평가는 한 번만 (hover로 시작된 import가 lazy의 import와 같은 Promise → JS spec상 모듈 캐시 공유)
hover 없이 바로 click 해도 정상 동작 (즉시 fetch + 렌더)
초기 마운트 시엔 모듈 평가 X

힌트

const Editor = lazy(() => import('./Editor'))
onMouseEnter={() => { void import('./Editor'); }} — 반환 Promise 무시. 같은 모듈을 React.lazy도 호출하면 JS 엔진이 같은 Promise를 반환 (모듈 캐시)
<Suspense fallback={...}>{open && <Editor />}</Suspense>

학습 포인트

hover 시간을 prefetch로 활용 — 사용자가 click하는 순간엔 거의 즉시 렌더
import() 의 모듈 캐시 시멘틱 — 같은 모듈은 같은 Promise로 공유됨
Quicklink, instant.page 등 "intent-based prefetch" 라이브러리의 핵심 아이디어

import { useState } from 'react';

export function LazyEditorButton() {
  const [open, setOpen] = useState(false);

  // TODO:
  //   1) const Editor = lazy(() => import('./Editor'))  — 동적 분리
  //   2) prefetch 핸들러: onMouseEnter/onFocus 시 import('./Editor') 호출 (반환값 무시)
  //   3) Suspense + fallback으로 감싸기

  return (
    <div>
      <button
        data-testid="reply"
        // TODO: onMouseEnter/onFocus에서 prefetch 트리거
        onClick={() => setOpen(true)}
      >
        Reply
      </button>
      {/* TODO: open이면 Editor 렌더 (Suspense로 감싸기) */}
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

import { useState } from 'react';

export function LazyEditorButton() {
  const [open, setOpen] = useState(false);

  // TODO:
  //   1) const Editor = lazy(() => import('./Editor'))  — 동적 분리
  //   2) prefetch 핸들러: onMouseEnter/onFocus 시 import('./Editor') 호출 (반환값 무시)
  //   3) Suspense + fallback으로 감싸기

  return (
    <div>
      <button
        data-testid="reply"
        // TODO: onMouseEnter/onFocus에서 prefetch 트리거
        onClick={() => setOpen(true)}
      >
        Reply
      </button>
      {/* TODO: open이면 Editor 렌더 (Suspense로 감싸기) */}
    </div>
  );
}

Open Sandbox