What causes the component to render again if it was already suspended in concurrent react mode?

394 Views Asked by At

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.

1

There are 1 best solutions below

0
Rahil Ahmad On

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.