useTransition

• UI를 차단하지 않고 상태를 업데이트할 수 있는 hook

• startTransition은 non-blocking이다

• startTransition에 전달하는 함수는 동기식이어야 한다.

• 진행 중인 transition이 여러 개 있는 경우 React는 현재 이를 일괄 처리. 이는 향후 릴리스에서 제거될 가능성이 있음.

• Suspense 가 가능한 라우터는 기본적으로 transition 으로 감싸야한다.

• state update marked as a transition will be interrupted by other state updates. For example, if you update a chart component inside a transition, but then start typing into an input while the chart is in the middle of a re-render, React will restart the rendering work on the chart component after handling the input update.
  전환으로 표시된 상태 업데이트는 다른 상태 업데이트에 의해 중단될 수 있습니다. 예를 들어 전환 내에서 차트 컴포넌트를 업데이트하지만, 차트가 다시 렌더링되는 중에 입력란에 입력을 시작하면, React는 입력 업데이트를 처리한 후 차트 컴포넌트의 렌더링 작업을 다시 시작합니다.

• startTransition함수 안에는 하나 또는 여러 개의 state setter가 있다. 논블로킹이고, 원치않는 로딩 인디게이터를 노출하지 않는다.

• 인자가 있는 걸 원하는 useDeferredValue를 쓰고, 그렇지 않으면 useTransition을 쓰면 된다.

• startTransition 안에는 실행되는 로직은 반드시 동기적이어야 한다.

• text input 제어에는 사용할 수 없다.

• 라우터를 서스펜스로 감쌌다. 라우터가 네비게이터가 될때 폴백이 뜨며 스피너가 돌면 안 되자나. 그러니까 useTransition을 통해 스피너가 폴백을 안 타게 한다.

useDeferredValue

• React는 먼저 지연된 값을 업데이트하지 않고 렌더링하고, 그런 다음 백그라운드에서 새로 받은 값으로 다시 렌더링을 시도

• useDeferredValue로 인한 백그라운드 재렌더링은 화면에 커밋될 때까지 Effects를 발생시키지 않는다. 백그라운드 리렌더링이 일시 중단되면, 해당 effect는 데이터가 로드되고 UI가 업데이트된 후에 실행.

• UI의 업데이트를 연기할 수 있는 hook

• During updates, the deferred value will “lag behind” the latest value. In particular, React will first re-render without updating the deferred value, and then try to re-render with the newly received value in background.
  React에서는 업데이트 중에 useDeferredValue로 반환되는 값이 최신 값과 동기화되지 않는다. --> React는 먼저 useDeferredValue로 사용하여 화면을 다시 렌더링 한다.

• 이전 state로 리렌더링을 일으키고, 백그라운드에서 새로운 state를 렌더하고 있다. 이 새로운 리렌더링은 중단될 수 있다(퍼포먼스에 도움이 되겠구만??)
  1 --> 2로 업데이트 하다가 1로 다시 사용하지 않아도...

• 디바운싱, 쓰로틀링은 지연시간을 정해줘야하지만, useDeferredValue는 지연시간을 정해주지 않아도 된다

During the initial render, the deferred value will be the same as the value you provided.

During updates, the deferred value will “lag behind” the latest value. In particular, React will first re-render without updating the deferred value, and then try to re-render with the newly received value in background.