TIL

React

Suspense

Suspense를 원활하게 사용할 수 있는 구조

Case 1 : Suspense를 리턴하는 단계에서 비동기 로직이 실행하는 구조

function ParentComponent() {
  const { data } = useQuery(~~);

  return (
    <Suspense fallback={<Loading />}>
      <SomeComponent data={data}>
    </Suspense>
  );
}

function SomeComponent({ data }) {
  // data 보장? -> NO
  return <p>{data.result}</p>
}

Case 2 : Suspense가 감싼 컴포넌트에서 비동기 로직이 실행하는 구조

function ParentComponent() {
  return (
    <Suspense fallback={<Loading />}>
      <SomeComponent>
    </Suspense>
  );
}

function SomeComponent() {
  const { data } = useQuery(~~);

  // data 보장? -> YES
  return <p>{data.result}</p>
}