title: StateHasChanged() vs InvokeAsync(StateHasChanged) in Blazor
body: <p>I know that calling the <code>StateHasChanged()</code> method notifies the component that the state has changed and so it should re-render.</p>
  <p>However, I also sometimes see things like <code>await InvokeAsync(StateHasChanged)</code> or <code>await InvokeAsync(() =&gt; StateHasChanged())</code> in other people's code, but I'm not sure how they're different from <code>StateHasChanged()</code> and where one of them should be preferred over the others, and <em>why</em>.</p>
  <p>The only information I could find was <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#invoke-component-methods-externally-to-update-state" rel="nofollow noreferrer">this part of the Blazor docs</a>, stating that:</p>
  <blockquote>
  <p>In the event a component must be updated based on an external event, such as a timer or other notifications, use the InvokeAsync method, which dispatches to Blazor's synchronization context.</p>
  </blockquote>
  <p>I don't understand this. It just says &quot;...which dispatches to Blazor's synchronization context&quot;, I'm not satisfied with that, what exactly is &quot;Blazor's synchronization context&quot;?</p>
  <p>I have tried calling <code>StateHasChanged()</code> - instead of <code>InvokeAsync(StateHasChanged)</code> - in a <code>Timer</code>'s <code>Elapsed</code> event, and it works as expected, without any issues. Should I be calling <code>await InvokeAsync(StateHasChanged)</code> instead?! And if so, <strong>why</strong> exactly? I feel like there's probably some important nuance here that I'm unaware of.</p>
  <p>I've also seen calls like <code>InvokeAsync(() =&gt; InvokeAsync(Something))</code>, again, why?</p>
  <p>Plus, I also sometimes see <code>InvokeAsync()</code> called without <code>await</code>, what the deal with that?!</p>
  <p>Too many questions sorry! :D</p>