non-blocking useTransition

• 컴포넌트 최상위 레벨에서 useTransition을 호출하여 state 업데이트를 non-blocking transition으로 표시가능

function TabContainer() {  

const [isPending, startTransition] = useTransition();  
const [tab, setTab] = useState('about');  

function selectTab(nextTab) {  
	startTransition(() => {  
		setTab(nextTab);  
	});  
}  
// ...  
}

• 이렇게 Transition을 사용할 경우, 리렌더링 도중에도 UI가 반응성을 유지한다.
• 예를들어, 사용자가 탭을 클릭했다가 마음이 바뀌어 다른 탭을 클릭하면 첫번째 리렌더링이 완료될 때 까지 기다릴 필요 없이 다른 탭을 클릭할 수 있음
  • 이게 무슨말이냐면..!! 낮은 우선순위의 상태 업데이트 (tab) 가 진행중이더라도, 사용자 인터렉션에 즉시 반응 가능하다는 것
  • Transition으로 등록된 업데이트가 진행 중(ex. 첫번째 탭 클릭)일 때, 리액트는 이를 중단하고 새로운 사용자 인터렉션 (ex. 다른 탭 클릭)을 먼저 처리할 수 있다.
  • 즉, 첫번째 업데이트 (Transition)이 완전히 끝나지 않아도, 새로운 인터렉션에 반응 하는 것!
• 다시 예시를 들어보자면
  • 사용자가 탭A 를 클릭하고 (Transition으로 처리됨)
  • 탭 A의 콘텐츠를 로딩하는동안 사용자가 마음을 바꿔 탭B를 클릭하면
  • 리액트는 탭A의 로딩을 중단하고, 탭B의 로딩을 바로 시작하는 것
• Transition이 있고/없고 차이점
  • Transition이 없을때 : 탭A의 로딩이 완료될 때 까지 UI가 차단됨(블로킹)
  • Tranistion이 사용될때: 탭A의 로딩 중에도 탭B 클릭에 즉시 반응 가능
• 즉, Transition을 사용하면, 상태 업데이트의 우선순위를 조정하여 사용자 경험이 향상됨.