React에서 useTransition은 언제 사용하나요?

// 탭 전환 시 무거운 렌더링이 UI를 블로킹하는 경우
// 탭 클릭 → 활성 탭 표시 → 콘텐츠 렌더링이 모두 동일한 우선순위로 처리됩니다.

function Tabs() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <>
      <button onClick={() => setActiveTab('home')}>홈</button>
      <button onClick={() => setActiveTab('posts')}>게시글</button>

      {/* PostsTab이 무거운 컴포넌트라면 클릭 후 탭 버튼 자체가 굳어버립니다. */}
      {activeTab === 'posts' && <PostsTab />}
    </>
  );
}

// setTimeout으로 렌더링을 뒤로 미루는 우회 방법
// 지연 시간이 임의적이고, React 상태와 타이머가 분리되어 관리가 어렵습니다.

function Tabs() {
  const [activeTab, setActiveTab] = useState('home');
  const [displayTab, setDisplayTab] = useState('home');

  const handleClick = (tab: string) => {
    setActiveTab(tab);         // 탭 버튼 활성화는 즉시
    setTimeout(() => {
      setDisplayTab(tab);      // 콘텐츠 렌더링은 50ms 뒤
    }, 50);
  };

  return (/* ... */);
}

// useTransition으로 탭 콘텐츠 렌더링 우선순위를 낮춥니다.

import { useState, useTransition } from 'react';

function Tabs() {
  const [activeTab, setActiveTab] = useState('home');
  const [isPending, startTransition] = useTransition();

  const handleTabClick = (tab: string) => {
    startTransition(() => {
      // 이 안의 상태 업데이트는 우선순위가 낮아집니다.
      // 탭 버튼 클릭 반응(리플 효과 등)은 즉시 처리되고,
      // PostsTab 렌더링은 브라우저가 여유 있을 때 처리됩니다.
      setActiveTab(tab);
    });
  };

  return (
    <>
      <div style={{ display: 'flex', gap: 8 }}>
        {['home', 'posts', 'settings'].map((tab) => (
          <button
            key={tab}
            onClick={() => handleTabClick(tab)}
            style={{
              fontWeight: activeTab === tab ? 700 : 400,
              opacity: isPending ? 0.6 : 1, // 전환 중 시각적 피드백
            }}
          >
            {tab}
          </button>
        ))}
      </div>

      {/* isPending이 true인 동안 이전 탭 콘텐츠를 유지합니다. */}
      <div style={{ opacity: isPending ? 0.5 : 1 }}>
        {activeTab === 'home' && <HomeTab />}
        {activeTab === 'posts' && <PostsTab />}
        {activeTab === 'settings' && <SettingsTab />}
      </div>
    </>
  );
}

// 검색 입력 — 타이핑은 즉시, 결과 렌더링은 전환으로 처리합니다.

import { useState, useTransition } from 'react';

function SearchPage({ items }: { items: string[] }) {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;

    // input 값 업데이트는 startTransition 밖 — 즉시 처리됩니다.
    setQuery(value);

    // 필터링 결과 업데이트는 startTransition 안 — 우선순위가 낮아집니다.
    startTransition(() => {
      const result = items.filter((item) =>
        item.toLowerCase().includes(value.toLowerCase())
      );
      setFilteredItems(result);
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} placeholder="검색..." />
      {isPending && <span>검색 중...</span>}
      <ul>
        {filteredItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}