useTransition (Async Support) vs useDeferredValue: 동시성 렌더링의 완성

// ❌ 렉 걸리는 검색창
function SearchApp() {
  const [query, setQuery] = useState('');
  
  const handleChange = (e) => {
    // 입력값 업데이트 (긴급)
    setQuery(e.target.value); 
    // 리스트 필터링 로직이 실행되면서 메인 스레드를 점유함 -> 입력창이 버벅거림
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      <HeavyList query={query} />
    </div>
  );
}

// ✅ useTransition 적용
import { useState, useTransition } from 'react';

function SearchApp() {
  const [query, setQuery] = useState('');
  const [listQuery, setListQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    
    // 1. 긴급 업데이트: 입력창은 즉시 반응
    setQuery(value);

    // 2. 전환 업데이트: 리스트 필터링은 뒷전으로 미룸
    startTransition(() => {
      setListQuery(value);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      
      {/* isPending으로 로딩 상태 표시 가능 */}
      {isPending && <span className="spinner">필터링 중...</span>}
      
      {/* 리스트는 listQuery를 바라본다 */}
      <HeavyList query={listQuery} />
    </div>
  );
}

// React 19: 비동기 작업도 Transition으로 처리
const handleClick = () => {
  startTransition(async () => {
    // API 호출이 끝날 때까지 자동으로 isPending이 true가 된다.
    await updateProfile(name);
  });
};

// ✅ useDeferredValue 적용
import { useState, useDeferredValue } from 'react';

function SearchApp() {
  const [query, setQuery] = useState('');
  
  // query는 즉시 바뀌지만, deferredQuery는 리액트가 여유 있을 때 바뀐다.
  const deferredQuery = useDeferredValue(query);

  return (
    <div>
      {/* 입력창은 원본 query를 사용하여 즉각 반응 */}
      <input value={query} onChange={e => setQuery(e.target.value)} />
      
      {/* 리스트는 지연된 값을 사용 */}
      {/* deferredQuery가 업데이트되기 전까지는 이전 리스트를 계속 보여줌 */}
      <HeavyList query={deferredQuery} />
    </div>
  );
}