Why do I need to call StateHasChanged() when I make a child component visible?

Question

Hi all;

I have a Blazor (InteractiveServer) page which has an AzureMapsControl (Blazor component wrapping Azure Maps). It also has a DxPopup component on the page.

The popup is initially hidden. When I do set it to show, I do the following:

EventCardData = Data!.EventData.First(e => e.UnderlyingEvent!.Id == eventId);
EventPopupVisible = true;

Task.Run(async () => await InvokeAsync(StateHasChanged));

If I don't call StateHasChanged() then the popup is not visible until I drag the map or otherwise cause rendering. Why? Isn't changing the EventPopupVisible sufficient to cause the popup to render?

thanks - dave

Accepted Answer

In Blazor, understanding when to call StateHasChanged() can be a bit tricky.

Automatic Rerendering: When a UI event (like clicking a button) occurs in a component, Blazor automatically detects that something has changed and triggers a re-render. For instance, when you click a button in the parent component (like your “Open” button), the parent component re-renders without explicitly calling StateHasChanged(). This automatic behavior is because the event target is the parent component, and Blazor handles the re-rendering for you.
Explicitly Calling StateHasChanged():

Sometimes, you need to manually notify Blazor that a change has occurred and it should re-render.

For example, if you modify a component’s state directly (like setting a flag to show/hide a child component), you should call **`StateHasChanged()`** to trigger the re-render.

In your case, when you invoke `AddItem.Show()` (which modifies `_isVisible`), explicitly calling `StateHasChanged()` ensures that the UI updates accordingly.

Child Components and Callbacks: When a child component has a callback (like CloseEventCallback), Blazor knows that the parent component’s state has changed. Even though the child component doesn’t directly invoke the callback, Blazor still detects the change and re-renders the parent component. So, in your third test, you didn’t need to call StateHasChanged() because the callback indirectly signaled the change.
OnInitializedAsync and StateHasChanged:

The OnInitializedAsync lifecycle method doesn’t automatically re-render on await (unlike user-initiated events like OnClick).

Therefore, calling `StateHasChanged()` inside `OnInitializedAsync` is necessary to ensure proper rendering.

In summary, Blazor automatically handles re-rendering when UI events involve parent components. For direct state changes or callbacks, you must use StateHasChanged() to keep your UI in sync.

Share via

Why do I need to call StateHasChanged() when I make a child component visible?

0 additional answers