Component not correctly rendered

[Valharault]

Bug Report: Intermittent Product Card Component Rendering Failure

Description of the Problem

The ProductList component occasionally fails to properly render ProductCard components, resulting in empty divs with only IDs being output instead of the full product card content. This occurs within a nested loop structure that renders product cards for different categories and subcategories.

Expected Behavior

• Each product in the subcategories loop should render a complete ProductCard component with all product information displayed
• The component should consistently render for all products in the list

Actual Behavior

• Sometimes only empty divs with IDs are rendered instead of the full ProductCard component
• The issue appears to be intermittent and doesn't affect all products simultaneously
• No error messages are displayed in the console or logs

Code Example

{% for parentCategory in this.organizedProducts %}
    {% for subcategory in parentCategory.subcategories %}
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4 sm:gap-6">
            {% for product in subcategory.products %}
                {{ component('Marketplace:ProductCard', {
                    productData: product,
                    restaurantId: restaurantId,
                    key: product.id,
                    quantity: product.cartQuantity,
                    id: 'product-card-'~product.id~product.cartQuantity,
                }) }}
            {% endfor %}
        </div>
    {% endfor %}
{% endfor %}

Additional Information

• The issue is inconsistent and difficult to reproduce reliably
• When the bug occurs, the DOM shows:

  <div id="product-card-123456"></div>

  Instead of the full product card markup

Environment

• Symfony UX version: v2.22.1
• Symfony version: 6.4

Questions for Investigation

1. Could this be related to the component's lifecycle management?
2. Is there a race condition in how the components are initialized?
3. Could the issue be related to how the product data is being passed to the component?

Additional Context

I'm currently unable to provide a minimal reproduction repository due to the intermittent nature of the issue. I'll continue attempting to create a reliable reproduction case and update the issue when available.

---

💡 If you need any additional information or clarification, please let me know. I'm happy to provide more details or investigate specific aspects of the problem.

[smnandre]

{
    ...
    key: product.id,
    quantity: product.cartQuantity,
    id: 'product-card-'~product.id~product.cartQuantity,
}

Just in case, did you check you have no duplicate id (due to the concatenation of product.id and product.cartQuantity)

id: 2      cartQuantity: 10     =>  210
id: 21     cartQuantity: 0      =>  210

(same if you have a cartQuantity resolving to null or false)

Anyway, I would not use cartQuantity as id / part of id, as it seems something that could change between re-renders.

[Valharault]

Thanks for your fast reply,

In my case this product.id is an UUID v4 and will never collate with another one.
This cartQuantity is useful for us cause we have another component inside the productCard .. i've try to remove this but the bug continue to appear randomly ..

Perhaps it has something to do with performance and too much ProductCard loaded on the same ?

[WebMamba]

Are we talking about LiveComponent ? Could you share you PHP component class ?

[smnandre]

With no way to reproduce, i fear it will be hard to investigate.

Just sharing personal experience, most of the time this kind of glitches are due to malformed HTML... or anything blocking morphing to happen correctly.

Could you try with data-skip-morph on your wrapping div ? See if the bug still happen ?

(https://symfony.com/bundles/ux-live-component/current/index.html)