1

I was checking the new concurrent mode in react docs and came across this example.

   <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
    </Suspense>

Here the component gets suspended if the data we are trying to load is not ready yet.

function ProfileDetails() {
  // Try to read user info, although it might not have loaded yet
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

And once the data is loaded the component ProfileDetails is rendered.

What causes the ProfileDetails component to re-render when the data is loaded. Does React continuously try to render the component while in suspended state? The full example can be found at link

Edit: The component is suspended in the first place due to a thrown Promise and react waits for the promise to be resolved and once resolved the component is rendered.

Rahil Ahmad
  • 3,056
  • 1
  • 16
  • 21
  • did you already take a look at [react suspense example](https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense) – Tarun Kolla Nov 30 '19 at 04:59
  • yes, react waits for the promise to get resolved – Rahil Ahmad Dec 07 '19 at 04:59
  • Please, ass it as an answer too (and, after two days, you can accept your own answer) because it could help other people that land here looking for the answer but they think that the question is "unanswered" because they miss your last edit. – NoriSte May 04 '20 at 11:02
  • Thanks @NoriSte added – Rahil Ahmad May 06 '20 at 13:22

1 Answers1

0

The component is suspended in the first place due to a thrown Promise and react waits for the promise to be resolved and once resolved the component is rendered.

Rahil Ahmad
  • 3,056
  • 1
  • 16
  • 21