AnalyticalTable in FlexibleColumnLayout is very slow with React 19 (small static dataset)

[pankajm-linde]

Describe the bug

When using @ui5/webcomponents-react 2.19.x with React 19.2.4, an AnalyticalTable rendered inside a FlexibleColumnLayout feels very slow, even with a small, static dataset (100 rows, 7 columns with only text + an icon).

Using below packages:

@ui5/webcomponents: ^2.19.2
@ui5/webcomponents-base: ^2.19.2
@ui5/webcomponents-fiori: ^2.19.2
@ui5/webcomponents-icons: ^2.19.2
@ui5/webcomponents-react: ^2.19.0
@ui5/webcomponents-react-compat: ^2.19.0
react: 19.2.4
react-dom: 19.2.4

Isolated Example

https://stackblitz.com/edit/vitejs-vite-a8syktgi

Reproduction steps

1. Render a FlexibleColumnLayout with the list in startColumn and details in midColumn.
2. In startColumn, render an AnalyticalTable with 100 rows and 7 columns (cells contain only text and an icon).
3. On row selection/click, open details in the midColumn by switching the FCL layout (e.g., to TwoColumnsStartExpanded).
4. Observe initial load and repeated row selections.

Expected Behaviour

The table and layout should remain responsive for 100 rows of static data.
​
Actual behavior
The UI is very slow (visible jank/lag) even though the dataset is small and static.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.19.0

UI5 Web Components Version

2.19.2

Browser

Edge

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @pankajm-linde

the main problem is that the "Auto" mode requires the container to have a fixed height:

Note: When "Auto" or "AutoWithEmptyRows" is enabled, we recommend using a fixed height for the parent container.

Additionally, there was no ThemeProvider present, the heading of the AnalyticalTable should be rendered in the header prop and the FCL itself needs a fixed height.

Here you can find your example including the fixes: https://stackblitz.com/edit/vitejs-vite-vh81kgcf?file=src%2Fmain.tsx,src%2Findex.css,src%2FAnalyticalSample.tsx

Also please note, that the React dev mode overhead is very noticable for the AnalyticalTable (slow scrolling, column widths calculation, etc.), with React prod runtime, these issues shouldn't be there anymore.

I'm going to close this issue now, but in case of additional questions, please feel free to ask.

[pankajm-linde]

Hi @Lukas742,

Thanks for your response.

Unfortunately, the suggested changes did not resolve the issue on my side.

I’m observing a clear difference in behavior depending on the React version:

• React 19.1.1 + SAP UI5 2.19.2 → Works fine
• React 19.2.4 + SAP UI5 2.19.2 → Very slow, sometimes hangs

With React 19.2.4, if I temporarily remove or hide the AnalyticalTable, the page loads quickly and behaves normally. However, as soon as AnalyticalTable is rendered:

• CPU usage spikes to 100%
• The main thread is blocked for several seconds
• The UI becomes unresponsive during that time

In contrast, using React 19.1.1 with the same UI5 version and identical code, the table renders smoothly without blocking the main thread.

This strongly suggests a compatibility or performance regression between React 19.2.4 and @ui5/webcomponents-react (v2.19.2), specifically related to AnalyticalTable.

Thanks again.

[Lukas742]

Hi @pankajm-linde

did you test it in the productive environment of React?

I measured against the example I've edited above and can't notice the described behavior in React prod env. Please see the recordings below:

Not throttled (device tier: 2025 high-end device)

2026-02-25_17-06-24.mp4

CPU Throttled: 6x slowdown (Approximate device tier: Mid-range consumer devices)

2026-02-25_17-14-30.mp4

CPU Throttled: 20x slowdown (Approximate device tier: Low-end / older hardware)

2026-02-25_17-16-33.mp4

So even for low-end devices, the performance is still acceptable for me. (including the overhead of the recording and no browser cache). Could you please provide some measures and a reproducible example that shows the performance issue? The table is build to process mass data (depending on the features used) and should be able to render hundreds of rows without noticeable performance degradation on mid-range or better devices.

[pankajm-linde]

Hi @Lukas742 , Thanks for checking. In production mode, the AnalyticalTable is working fine and we are not facing noticeable performance issues. However, in development mode (React 19.2.4 with UI Web Components 2.19.2), the table becomes extremely slow and frequently freezes the main thread. While it’s good that production performance is acceptable, the development experience is significantly impacted. If the component freezes or becomes unresponsive in dev mode, it makes debugging and feature development very difficult. Could you please confirm: * Is this expected behavior in React 19 dev mode? * Are there any recommended optimizations or configuration changes for development? * Is there a known compatibility issue with React 19 and AnalyticalTable? Looking forward to your guidance.