Extra Updates Triggered in Custom Visual After Resize in Power BI Embedded (React)

[Manchaary]

I have a custom visual that uses an infinite loader and dataReductionAlgorithm to load data segments on scroll. In the update method of my Visual class, I handle Create, Segment, and Resize (including Resize End) events. During Resize or Resize End, I intentionally avoid updating the custom visual's state. This works perfectly fine when using the Power BI web portal.

However, when embedding the report using the Power BI Client React library, I encounter an issue. I use report.resizeActivePage and report.resizeVisual to resize the visual to full width and height of the page. After resizing, the custom visual receives extra update calls, even though the resize has ended. This behavior does not occur in the Power BI web portal. 

• React app doesn't re-render Embedded component.
• If I call resize without page not changing actual size Visual will trigger update with only `Create` and `Data` update types. 

1. Why are these extra update calls being triggered in Power BI Embedded but not in the Power BI web portal?

2. Is there a way to prevent these extra updates or handle them appropriately?

Any insights or suggestions would be greatly appreciated!

[Manchaary]

Hey Liu Yang! Thanks for the reply!

I tried logging report events and the only event that get's triggered after resize is "rendered".
I added "report.off("rendered")" to see if it will help. But Visual still will trigger extra update after resize.

Here is a screenshot where you can see that "Create and Data" update type was triggered right after "ResizeEnd" with a delay of 12MS

[Anonymous]

Hi  @Manchaary ,

This is the related document, you can view this content:

How to handle events in a Power BI embedded analytics application | Microsoft Learn

Solved: Embedding Power BI with custom page view: fitToWid... - Microsoft Fabric Community

Best Regards,

Liu Yang

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[Manchaary]

If I update settings using pagesLayout property. Visual will trigger extra "Create and Data" event after "ResizeEnd"

report?.updateSettings({
      layoutType: models.LayoutType.Custom,
      customLayout: {
        displayOption: models.DisplayOption.ActualSize,
        pageSize: {
          type: models.PageSizeType.Custom
        },
        pagesLayout: {
          [activePage.name]: {
            visualsLayout: {
              [visual.name]: {
                x: 0,
                y: 0,
                width,
                height
              }
            }
          }
        }
      }
    });

Updating settings without pagesLayout property will not trigger extra update and will stop after "Resize End" but will not properly resize visual