Asynchronously initialize state required by child components

[guardrex]

From danroth27 at aspnet/Blazor.Docs#240 ...

You can use OnInitAsync to asynchronously initialize some state needed by child components (ex retrieve a JWT needed for HTTP requests), but it takes some work and coordination. We should document how to do this.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 11a64802-62dc-40e0-034f-fcee55f31d4e
• Version Independent ID: 038d7f90-aa71-a35c-cee9-c8543403cfd7
• Content: Create and use Razor Components
• Content Source: aspnetcore/razor-components/components.md
• Product: aspnet-core
• GitHub Login: @guardrex
• Microsoft Alias: riande

[danroth27]

I think that the only thing that really needs to be documented here is to note that for all of the async component lifecycle events any async actions performed in those event may not have completed before the component is rendered. So you need to make sure your rendering logic accounts for that (ex values still being retrieved may still be null or not defined yet). Typically this means writing some if statements in your rendering logic to check if things haven't been initialized yet and then render some placeholder UI ("Loading..." or whatever). You can see an example of this in the FetchData component in our templates. After the task returned by an async lifecycle event completes the component will be rendered again with the updated state.

[guardrex]

Note to PU: I can write this based on the guidance ☝️. If you'd prefer to pass it to me, drop the PU label and assign it to me.

[danroth27]

@guardrex it's all yours 😃