Day 10

[j03y14]

Fragment에 key를 전달하려는 경우 <>…</>구문을 사용할 수 없습니다. 'react' 에서 Fragment를 명시적으로 불러오고 <Fragment key={yourKey}>...</Fragment>를 렌더링해야합니다.

React는 <><Child /></>와 [<Child />] 사이, 혹은 <><Child /></>와 <Child /> 사이를 번갈아 렌더링할 때 state를 재설정하지 않습니다. 이는 한 단계 깊이에서만 작동합니다. 예를 들어, <><><Child /></></>에서 [<Child />]로 변경할 경우에는 state를 재설정합니다. 여기에서 정확한 의미를 확인하세요.

useDefeeredValue랑 useTransition이랑 갑자기 헷갈리는데..

useDeferredValue: https://github.com/reactwg/react-18/discussions/129 startTrainsition: https://github.com/reactwg/react-18/discussions/41

useDeferredValue 및 startTransition은 대체로 동일한 동작을 갖습니다. 차이점은 주로 API가 적용되는 위치에 있습니다.

• startTransition은 이벤트 핸들러에서 업데이트(예: setState)를 트리거할 때 사용됩니다.
• useDeferredValue는 상위 구성 요소(또는 동일한 구성 요소의 이전 후크)에서 새 데이터를 수신할 때 사용됩니다.

useDeferredValue를 두개의 렌더링을 예약하는 것으로 생각하면 된다.

1. 이전 값으로 긴급 렌더링
2. 다음 값을 가지고 긴급하지 않은 렌더링
   1. 이 렌더링은 긴급한 렌더링이 아니기 때문에 기존 Suspense의 fallback이 표시되지 않도록 한다. 이것은 startTransition에서의 동작과 같다.

Say initially combobox.value is "darth", and we've changed it to "obi".

• The user types, so a state variable inside the useCombobox Hook updates.
  • This triggers an urgent re-render where combobox.value is "obi".
  • In that urgent render, useDeferredValue(combobox.value) will return the already committed value. Similar to how Hooks like useDebouncedValue() do. So it still returns "darth" even though combobox.value is "obi".
    • React remembers that this deferred value will need to transition to "obi" in a later render.
  • React renders <Results query="darth" />. The container has 0.5 opacity because we set opacity based on whether deferredValue === value, which is false.
  • This urgent render is committed.
• Now React has nothing better to do, so it works on the deferred update.
  • In this non-urgent render, useDeferredValue(combobox.value) will return the new value. So it returns "obi".
  • React renders <Results query="obi" />.
    • Too bad! We don't have results for that yet. This suspends.
    • Suspending an already shown <Suspense> boundary in an urgent render would have caused us to commit a fallback. But that would be a poor user experience. (It's annoying when existing content disappears before your eyes.) Luckily, we're in a non-urgent render, which means React has the freedom to simply discard it.
    • React discards this render completely.
• Finally, the Promise pings, so React is ready to retry.
  • In this non-urgent render, useDeferredValue(combobox.value) will return the new value. So it returns "obi".
  • We have that data now!
  • React renders <Results query="obi" />.
  • React commits the result.

[kkirico]

Suspense가 트리에 대한 콘텐츠를 표시하고 있다가 다시 일시 중단된 경우, 그 원인이 된 업데이트가 startTransition이나 useDeferredValue로 인한 것이 아니라면 fallback이 다시 표시됩니다.

->suspense 내부에서 fetch 하는 경우 transition 이 없으면 suspense 가 동작하지 않는다. 즉, transition이 우선된다.

Suspense는 Effect나 이벤트 핸들러 내부에서 페칭하는 경우를 감지하지 않습니다.

deffered value(지연값)과 트랜지션을 모두 사용하면 인라인 표시기를 위해 Suspense 폴백을 표시하지 않을 수 있습니다. 트랜지션은 전체 업데이트를 긴급하지 않은 것으로 표시하므로, 일반적으로 프레임워크 및 라우터 라이브러리에서 탐색을 위해 사용됩니다. 반면 지연값은 주로 UI의 일부를 긴급하지 않은 것으로 표시함으로써, 다른 UI들보다 “지연”시키고자 할 때 유용합니다.