DJE-052 Warning Performance

Excessive patches from unkeyed list reordering

Error message

PERFORMANCE WARNING: Unkeyed list produced excessive patches

A list with more than 10 items and no `data-key` attributes produced patches for more than half its children. This typically means the list was reordered (e.g., sorted, filtered, or an item was inserted at the top). Without keys, the diff algorithm compares by position and sees almost every element as changed.

keys performance vdom

Affected versions: >=0.2.0

Before (problematic)

{% for deal in deals %}
<div class="deal-card">  <!-- No key -->
    {{ deal.title }} - {{ deal.value }}
</div>
{% endfor %}

After (fixed)

{% for deal in deals %}
<div class="deal-card" data-key="{{ deal.id }}">
    {{ deal.title }} - {{ deal.value }}
</div>
{% endfor %}

Before (problematic)

# Without keys — many patches
DJUST_VDOM_TRACE=1 python manage.py runserver

After (fixed)

# After adding data-key — should see far fewer patches
DJUST_VDOM_TRACE=1 python manage.py runserver
# Compare [VDOM TRACE] patch count before and after

Excessive patches from unkeyed list reordering

Solutions