React 18 useTransition로 INP 지표 개선 실전

import React, { useMemo, useState } from "react";

type Item = { id: string; title: string; tags: string[] };

export function SearchPage({ items }: { items: Item[] }) {
  const [query, setQuery] = useState("");

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return items;

    // items가 수만 건이거나, 조건이 복잡하면 여기서 렌더 지연이 커짐
    return items.filter((it) => {
      return (
        it.title.toLowerCase().includes(q) ||
        it.tags.some((t) => t.toLowerCase().includes(q))
      );
    });
  }, [items, query]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search"
      />
      <div>Results: {filtered.length}</div>
      <ul>
        {filtered.map((it) => (
          <li key={it.id}>{it.title}</li>
        ))}
      </ul>
    </div>
  );
}

import React, { useMemo, useState, useTransition } from "react";

type Item = { id: string; title: string; tags: string[] };

export function SearchPage({ items }: { items: Item[] }) {
  const [inputValue, setInputValue] = useState("");
  const [query, setQuery] = useState("");
  const [isPending, startTransition] = useTransition();

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return items;
    return items.filter((it) => {
      return (
        it.title.toLowerCase().includes(q) ||
        it.tags.some((t) => t.toLowerCase().includes(q))
      );
    });
  }, [items, query]);

  return (
    <div>
      <label>
        Search
        <input
          value={inputValue}
          onChange={(e) => {
            const next = e.target.value;
            setInputValue(next); // 긴급: 입력 즉시 반영

            startTransition(() => {
              setQuery(next); // 비긴급: 무거운 렌더를 유발하는 상태
            });
          }}
          placeholder="Search"
        />
      </label>

      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
        <div>Results: {filtered.length}</div>
        {isPending ? <span>Updating…</span> : null}
      </div>

      <ul aria-busy={isPending}>
        {filtered.map((it) => (
          <li key={it.id}>{it.title}</li>
        ))}
      </ul>
    </div>
  );
}

import React, { useTransition, useState } from "react";

type TabKey = "overview" | "analytics" | "logs";

function HeavyAnalytics() {
  // 무거운 차트/테이블 렌더가 있다고 가정
  return <div>Heavy analytics content</div>;
}

export function DashboardTabs() {
  const [activeTab, setActiveTab] = useState<TabKey>("overview");
  const [isPending, startTransition] = useTransition();

  function onClickTab(next: TabKey) {
    startTransition(() => {
      setActiveTab(next);
    });
  }

  return (
    <div>
      <div role="tablist" aria-label="Dashboard">
        <button role="tab" aria-selected={activeTab === "overview"} onClick={() => onClickTab("overview")}>
          Overview
        </button>
        <button role="tab" aria-selected={activeTab === "analytics"} onClick={() => onClickTab("analytics")}>
          Analytics
        </button>
        <button role="tab" aria-selected={activeTab === "logs"} onClick={() => onClickTab("logs")}>
          Logs
        </button>
        {isPending ? <span style={{ marginLeft: 8 }}>Loading view…</span> : null}
      </div>

      <div style={{ opacity: isPending ? 0.6 : 1 }}>
        {activeTab === "overview" ? <div>Overview</div> : null}
        {activeTab === "analytics" ? <HeavyAnalytics /> : null}
        {activeTab === "logs" ? <div>Logs</div> : null}
      </div>
    </div>
  );
}

onChange={(e) => {
  const next = e.target.value;

  // 나쁜 예: 여기서 큰 계산을 해버리면 INP는 그대로 나쁨
  const tokens = next.split(" ").map((s) => s.toLowerCase());

  startTransition(() => {
    setQuery(tokens.join(" "));
  });
}}

// src/reportWebVitals.ts
import { onINP, type Metric } from "web-vitals";

export function reportWebVitals(send: (m: Metric) => void) {
  onINP((metric) => {
    send(metric);
  });
}

// 예: Next.js에서 클라이언트 진입 시 호출
import { reportWebVitals } from "./reportWebVitals";

reportWebVitals((m) => {
  // 실제로는 analytics endpoint로 전송
  console.log("INP", {
    id: m.id,
    value: m.value,
    rating: m.rating,
    navigationType: m.navigationType,
  });
});