You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aspnetcore/blazor/components/lifecycle.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -521,7 +521,7 @@ For more information on component rendering and when to call <xref:Microsoft.Asp
521
521
522
522
Asynchronous actions performed in lifecycle events might not have completed before the component is rendered. Objects might be `null` or incompletely populated with data while the lifecycle method is executing. Provide rendering logic to confirm that objects are initialized. Render placeholder UI elements (for example, a loading message) while objects are `null`.
523
523
524
-
In the following `Slow` component, <xref:Microsoft.AspNetCore.Components.ComponentBase.OnInitializedAsync%2A> is overridden to asynchronously execute a long-running task. While `isLoading` is `true`, a loading message is displayed to the user. After the `Task` returned by <xref:Microsoft.AspNetCore.Components.ComponentBase.OnInitializedAsync%2A> completes, the component is rerendered with the updated state, showing the "`Loaded!`" message.
524
+
In the following `Slow` component, <xref:Microsoft.AspNetCore.Components.ComponentBase.OnInitializedAsync%2A> is overridden to asynchronously execute a long-running task. While `isLoading` is `true`, a loading message is displayed to the user. After the `Task` returned by <xref:Microsoft.AspNetCore.Components.ComponentBase.OnInitializedAsync%2A> completes, the component is rerendered with the updated state, showing the "`Finished!`" message.
525
525
526
526
`Slow.razor`:
527
527
@@ -536,7 +536,7 @@ In the following `Slow` component, <xref:Microsoft.AspNetCore.Components.Compone
536
536
}
537
537
else
538
538
{
539
-
<div>Loaded!</div>
539
+
<div>Finished!</div>
540
540
}
541
541
542
542
@code {
@@ -594,7 +594,7 @@ Welcome to your new app.
594
594
> [!NOTE]
595
595
> Although the examples in this section discuss the <xref:Microsoft.AspNetCore.Components.ComponentBase.OnInitializedAsync%2A> lifecycle method, other lifecycle methods that execute during prerendering may delay final rendering of a component. Only [`OnAfterRender{Async}`](#after-component-render-onafterrenderasync) isn't executed during prerendering and is immune to delays due to quiescence.
596
596
597
-
During prerendering, the `Home` component doesn't render until the `Slow` component is rendered, which takes ten seconds. The UI is blank during this ten-second period, and there's no loading message. After prerendering, the `Home` component renders, and the `Slow` component's loading message is displayed. After ten more seconds, the `Slow` component finally displays the loaded message.
597
+
During prerendering, the `Home` component doesn't render until the `Slow` component is rendered, which takes ten seconds. The UI is blank during this ten-second period, and there's no loading message. After prerendering, the `Home` component renders, and the `Slow` component's loading message is displayed. After ten more seconds, the `Slow` component finally displays the finished message.
598
598
599
599
:::moniker range=">= aspnetcore-8.0"
600
600
@@ -606,7 +606,7 @@ Add the [`[StreamRendering]` attribute](xref:Microsoft.AspNetCore.Components.Str
606
606
@attribute [StreamRendering]
607
607
```
608
608
609
-
When the `Home` component is prerendering, the `Slow` component is quickly rendered with its loading message. The `Home` component doesn't wait for ten seconds for the `Slow` component to finish rendering. However, the loaded message displayed at the end of prerendering is replaced by the loading message while the component finally renders, which is another ten-second delay. In the case of a component that's accessing a real service, such as a database, the service call (or query for a database) re-executes a second time as well, which creates undesirable load on the app's service (or database). To address this, persist the prerendered state with <xref:Microsoft.AspNetCore.Components.PersistentComponentState> for final rendering of the component, as seen in the following updates to the `Slow` component:
609
+
When the `Home` component is prerendering, the `Slow` component is quickly rendered with its loading message. The `Home` component doesn't wait for ten seconds for the `Slow` component to finish rendering. However, the finished message displayed at the end of prerendering is replaced by the loading message while the component finally renders, which is another ten-second delay. In the case of a component that's accessing a real service, such as a database, the service call (or query for a database) re-executes a second time as well, which creates undesirable load on the app's service (or database). To address this, persist the prerendered state with <xref:Microsoft.AspNetCore.Components.PersistentComponentState> for final rendering of the component, as seen in the following updates to the `Slow` component:
0 commit comments