Transition에서 입력 이벤트가 작동하지 않음

• useTransition
• non-blocking useTransition

const [text, setText] = useState('');  

// ...  

function handleChange(e) {  

// ❌ 제어된 입력 state에 Transition 을 사용할 수 없습니다.  

startTransition(() => {  

setText(e.target.value);  

});  

}  

// ...  
return <input value={text} onChange={handleChange} />;

• Transition은 non-blocking이지만, 변경 이벤트에 대한 응답으로 입력을 업데이트해야하는 것은 동기적으로 이뤄져야하므로.

• 입력에 대한 응답으로 Transition을 실행하려면 두가지 옵션이 있다.

  1. 두개의 개별 state 를 선언가능. 하나는 입력state (항상 동기적으로 업데이트됨)용 / 하나는 Transition 시 업데이트 할 state
     • 이를 통해 동기 state 를 사용하여 입력을 제어하고 Transition state 를 나머지 렌더링 로직에 전달가능
  2. state 변수가 하나 있고, 실제 값보다는 "지연"되는 useDeferredValue를 추가 가능.
     • 그러면 non-blocking 리렌더링이 새로운 값을 자동으로 따라잡기 위해 트리거됨.