Hello Team,

I would like to bring attention to a performance issue that I have encountered. When a page contains approximately 100 widgets, the renderComponentCanvas function is triggered 100 times, causing a significant delay in page load performance.

Issue Breakdown:

• On the initial render, renderComponentCanvas is executed for each widget individually.
• After analyzing the root cause, I believe this behavior is linked to the AutoHeightContainer component.
• The useEffect inside AutoHeightContainer dynamically updates the component’s height and dispatches these changes to the layout reducer.
• Since this process modifies the Redux state, it inadvertently triggers a re-render of renderComponentCanvas, even though renderComponentCanvas is specifically designed to render only the canvas (container), not individual widgets.

Impact:
This leads to unnecessary re-renders, increasing the time required to render the page.
The performance degradation becomes more noticeable as the number of widgets increases.

Note :
This issue does not occur when using the Button widget, as it does not rely on the AutoHeightContainer component.

AutoHeightContainer Component – useEffect Code:

useEffect(() => {
  const containerDom = containerRef.current;
  const observerRef = new ResizeObserver((entries) => {
    if (!updateComponentHeight) return;
    const height = entries[0].contentRect.height;
    updateComponentHeight?.(height);
  });

  if (observerRef && containerDom && enable) {
    observerRef.observe(containerDom);
  }

  return () => {
    if (containerDom && enable) {
      observerRef.unobserve(containerDom);
    }
  };
}, [enable, updateComponentHeight]);

updateComponentHeight Function:

const updateComponentHeight = useCallback((newHeight: number) => {
if (isDraggingInGlobal) return;

const rootState = store.getState();
const widgetLayoutInfos = getExecutionWidgetLayoutInfo(rootState);
const oldH = widgetLayoutInfos[displayName]?.layoutInfo.h ?? 0;

  if (dynamicHeight !== "fixed") {
    if (
      dynamicMaxHeight &&
      newHeight > dynamicMaxHeight - (WIDGET_PADDING + WIDGET_SCALE_SQUARE_BORDER_WIDTH) * 2
    ) {
      newHeight = dynamicMaxHeight - (WIDGET_PADDING + WIDGET_SCALE_SQUARE_BORDER_WIDTH) * 2;
    }

    if (
      dynamicMinHeight &&
      newHeight <= dynamicMinHeight - (WIDGET_PADDING + WIDGET_SCALE_SQUARE_BORDER_WIDTH) * 2
    ) {
      newHeight = dynamicMinHeight - (WIDGET_PADDING + WIDGET_SCALE_SQUARE_BORDER_WIDTH) * 2;
    }
  }

  const newH = Math.max(
    Math.round(
      (newHeight + (WIDGET_PADDING + WIDGET_SCALE_SQUARE_BORDER_WIDTH) * 2) / UNIT_HEIGHT
    ),
    MIN_HEIGHT
  );

  if (newH === oldH) return;

  dispatch(
    executionActions.updateWidgetLayoutInfoReducer({
      displayName,
      layoutInfo: {
        h: newH,
      },
      parentNode: parentNodeDisplayName,
      effectRows: newH - oldH,
    })
  );
}, [dispatch, displayName, dynamicHeight, dynamicMaxHeight, dynamicMinHeight, isDraggingInGlobal, parentNodeDisplayName]);

I would like to confirm whether my understanding of this issue is correct. If so, was this behavior intentionally implemented as part of the project's design? Additionally, is there a more efficient alternative to reduce unnecessary re-renders while preserving the required functionality?

I look forward to your insights on optimizing this behavior.