useTransition()

useState()를 사용해 이벤트를 처리 할때 우리는 input 입력값을 변할때마다 setter함수에 넣음으로써 input의 value가 변할때 마다(한글자 한글자 입력될때마다) 리렌더링 되는 현상이 일어난다 (느려짐)

const Input = () => {
  const [input, setInput] = useState('');
  
  return <input type="text" onChange={(e) => setInput(e.target.value)} />
}

이를 해결하기 위해 최근 useTransition() hook이 추가 되어 사용할 수 있다

const [isPending, startTransition] = useTransition();

• isPending : transition이 대기상태인지 알려주는 boolean값
• startTransition : transition을 등록시키는 함수(debounce와 동일한 기능)