Home [React 18] useTransition
Post
Cancel

[React 18] useTransition

컨커런트 UI 패턴

  • 화면에 나타나는 변화를 지연시키고 싶은 경우 사용
  • 예를 들면 검색 창에서 실시간으로 검색 결과를 표시할 때 검색 결과 로직 처리보다 검색어 입력을 더 우선적으로 보여주게 하는 것.
  • 디바운싱 기법을 사용해서 이전에 구현했었음.

useTransition

1
2
3
const [startTransition, isPending] = useTransition({
    timeoutMs: 3000
  });
  • 위 코드처럼 작성한다면 3초를 기다린다는 이야기 (3000ms)
  • startTransition()안에 있는 함수는 변화를 기다렸다가 업데이트.
  • startTransition(() => { 내용 })

  • isPending은 불리언으로 transition이 완료되었을 때 true로 바뀜.

Reference

This post is licensed under CC BY 4.0 by the author.