Suspense for data fetching

Suspense 미 사용 시 - waterfall

• 일반적으로 useEffect를 이용해 비동기로 데이터를 불러와서 UI를 구성하게 됨.
• 아직 데이터가 오지 않은 경우, isLoading 과 같은 state를 이용해서 로딩 중임을 나타내고 isLoading이 true일 때 로딩 컴포넌트를 보여주는 식으로 UI를 구성함.
• 이 방식에서 컴포넌트는 렌더링 후 데이터를 가져오기 시작함.
• 따라서 만약 자식 컴포넌트에서 다시 데이터를 가져와야 한다면, 자식 컴포넌트는 부모 컴포넌트의 데이터 응답이 와서 렌더링이 되고 나서야 데이터 fetching을 시작함. → UI가 부모 먼저, 그 다음 자식 … 과 같이 폭포처럼 아래로 내려가면서 순차적으로 그려지는 waterfall 문제 발생

Promise.all로 해결 가능하지 않아?

• fetch해야 하는 모든 데이터를 부모 컴포넌트에서 Promise.all로 병렬적으로 fetch 해오면 부모 컴포넌트의 fetch가 끝날 때까지 기다리지 않고 자식 컴포넌트가 필요한 데이터 fetch를 시작할 수 있음. → waterfall 문제는 해결됨.
• 그러나 컴포넌트 복잡도가 높아진다면? fetch 해오는 데이터가 많아지고 복잡해진다면? 이 방법만으로는 안정적으로 컴포넌트 트리를 구성하기 어려움.

Suspense 사용 시 - 희망편

• suspense 사용 시, 컴포넌트는 데이터 fetch를 먼저 시작하고 rendering함. 따라서 렌더링이 아직 이루어지지 않았어도 데이터 fetch가 가능함.
• 자식 컴포넌트는 부모 컴포넌트의 데이터가 아직 도착하지 않아서 렌더링되지 않았더라도 data fetching을 시작함.

// 이 함수는 Promise가 아니라 Suspense의 특별한 객체입니다.
const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
      <Suspense fallback={<h1>Loading posts...</h1>}>
        <ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  // Try to read user info, although it might not have loaded yet
  const user = resource.user.read(); //데이터를 읽는 메소드
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  // Try to read posts, although they might not have loaded yet
  const posts = resource.posts.read();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  );
}

• 위 예시에서, ProfilePage는 ProfileDetails와 ProfileTimeline을 자식 컴포넌트로 가짐. 각각의 자식 컴포넌트는 resource 함수를 이용해 데이터를 읽으려고 함.

• read() 메소드는 데이터 fetch를 시작하는 메소드가 아님! 이미 가져온 데이터를 읽으려고 함.

• 최상단에서 fetchProfileData()를 호출한 순간 이미 fetch는 시작됨.

• 위 예시에서 렌더링이 일어나는 과정

  1. fetchProfileData()를 호출하면서 이미 데이터 fetch가 시작됨. 이 함수는 Promise를 반환하는 대신 특별한 resourse를 반환함.
  2. ProfilePage를 렌더링하려고 함. 여기에는 두 개의 자식 컴포넌트가 있음.
  3. ProfileDetails가 렌더링되려고 함. 이 컴포넌트는 resource.user.read()를 호출함. 아직 데이터 fetch가 끝나지 않았기 때문에, 이 컴포넌트는 **suspend(대기)**됨. 리액트는 이 컴포넌트를 건너뛰고, 컴포넌트 트리에서 다른 렌더링할 컴포넌트가 없는지 탐색함.
  4. 같은 트리에 있는 ProfileTimeline가 렌더링되려고 함. 이 컴포넌트는 resource.posts.read()를 호출함. 이 컴포넌트 역시 아직 데이터 fetch가 끝나지 않았기 때문에 suspend됨. 리액트는 이 컴포넌트도 건너뛰고 다른 렌더링할 컴포넌트를 찾음.
  5. 더 이상 렌더링할 컴포넌트가 남아있지 않으므로 리액트는 가장 가까운 <Suspense>의 fallback을 보여줌.
  6. 3~5 과정을 반복하다가 read()의 데이터가 있으면 해당 컴포넌트를 렌더링함.

번외 : react-query의 onSuccess 안에서 setState를 사용해도 될까?

• react-query에서 받아온 데이터를 클라이언트 상태로 관리하면서 업데이트하고 싶을 수 있음.