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
Solutions
Recommended
Add data-key attributes to list items
Adding keys lets the diff algorithm track elements across reorders, producing minimal patches (just the move operations).
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 %}
Enable VDOM trace to measure improvement
Compare patch counts before and after adding keys.
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