question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Components render too many times with SetParametersAndRender

See original GitHub issue

In certain cases, calls to StateHasChanged behave differently in BUnit than in regular Blazor WASM (I haven’t tested server-side, but I’d expect it to have the same problem). This means that components in BUnit render too many times, and RenderCount values in BUnit are often higher than they should actually be. I have observed this when using SetParametersAndRender, but I’m not sure if there are other scenarios where this happens.

This is a problem in my case, because I care a lot about the number of renders, but I have no way to reliably assert the RenderCount in tests.

Example: Testing this component:

<p>Hello world!</p>

@{
    Console.WriteLine("Rendering RenderCountDemo");
}

@code {

    [Parameter]
    public int X { get; set; }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        StateHasChanged();
        StateHasChanged();
        StateHasChanged();
    }
}

With this test:

[Fact]
public void Should_have_correct_RenderCount()
{
    var cut = Render<RenderCountDemo>(@<RenderCountDemo X="1" />);
    cut.SetParametersAndRender(); // This should only trigger one additional render.
    cut.RenderCount.Should().Be(2);
}

Results in this output:

Expected cut.RenderCount to be 2, but found 5

Expected behavior:

The test passes. Using the same component in a Blazor WASM app results in one render each time the parameter changes, but in BUnit I get three (edit: four). This is not just a problem with the “RenderCount” property, the actual render method is being called four times as well (confirmed with a breakpoint).

Version info:

  • bUnit version: 1.20.8
  • .NET Runtime and Blazor version: .NET 6.0
  • OS type and version: Windows 10

Additional context:

I am obviously not calling StateHasChanged() multiple times in succession like the example above, but there are lots of dependencies etc. which can result in redundant calls to StateHasChanged. In a normal Blazor app, the calls would get “batched” into a single render, so long as they occur synchronously.

Issue Analytics

  • State:closed
  • Created 3 months ago
  • Comments:25 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
Jcparkyncommented, Jun 27, 2023

Thanks @egil, I tried out the latest preview and it’s working perfectly, including on my real tests.

1reaction
linkdotnetcommented, Jun 23, 2023

Somewhat related: https://github.com/dotnet/aspnetcore/issues/48980 I opened a ticket for our v2.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React component rendering too many times?
The app now only renders twice, once for the loadscreen while it refreshes the token, and then once for the actual page render...
Read more >
How many re-renders are too many? - Alex Sidorenko
The number of re-renders is a poor performance metric. The long tree of React components that only return JSX can be re-rendered many...
Read more >
How to solve too many re-renders error in ReactJS?
“Too many re-renderers” is a React error that happens after you have reached an infinite render loop, typically caused by code that in...
Read more >
Is component getting rerendered multiple times such a big ...
Open react dev tools and select the box to show re-renders, if the element gets highlighted in red you might want to look...
Read more >
5 Ways to Avoid React Component Re-Renderings
In the above example, useCallBack() memoizes the onClick callback. So, it will not re-render the component if the user clicks the same item...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found