Carousel does not render or respond when items are loaded asynchronously in React

[gmartinezig]

Description

When using the React IgrCarousel component with items loaded asynchronously from a data source, the carousel is initialized before the collection of slides is available.

After the data is loaded, the items appear in the visual tree, but the carousel does not update its internal state to recognize them.

The same scenario works correctly in Blazor, Angular, and Web Components.

Steps to reproduce

1. Create a React application with a Carousel component.
2. Bind the carousel slides to a collection loaded asynchronously from a data source.
3. Initialize the application while the collection is still empty.
4. Wait for the asynchronous data request to complete.
5. Try to display, navigate, or select one of the loaded slides.

Result

• The carousel does not display any slide.
• The loaded slides are present in the visual tree, but there is no active slide.
• The navigation buttons do not work.
• The carousel select function does not work.
• The carousel does not appear to reinitialize or update after the data collection is populated.

Expected result

The React Carousel should detect when asynchronously loaded items are added and update its internal state accordingly. The first slide should become active, and navigation and programmatic selection should work normally.

Workaround**

Manually forcing the carousel to update or re-render after the asynchronous collection is populated appears to make the component work. However, this is only a workaround and should not be required when binding the carousel to asynchronously loaded data.

Attachments

The attached sample demonstrate the issue in a React application. The equivalent scenario works without a workaround in Blazor, Angular, and Web Components.

Carousel Sample-Dynamic_react.zip