React Concurrent Features - useTransition과 useDeferredValue

React 18의 Concurrent Features는 우선순위에 따라 렌더링을 조절할 수 있게 해줍니다.
useTransition과 useDeferredValue를 사용하면 사용자 입력을 즉시 반영하면서도, 무거운 업데이트는 지연시킬 수 있습니다.

---

1. useTransition으로 우선순위 조절

import { useTransition, useState } from "react";

function SearchPage() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setQuery(value); // 긴급한 업데이트 (즉시 반영)

    startTransition(() => {
      setSearchResults(value); // 긴급하지 않은 업데이트 (지연 가능)
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <div>검색 중...</div>}
      <SearchResults />
    </div>
  );
}

• startTransition으로 감싼 업데이트는 낮은 우선순위로 처리됩니다.