{# Page assets live INSIDE the content block (the dj-root): dj-navigate swaps only that region, so anything in extra_head/extra_scripts is missing when a visitor arrives by live navigation. Behaviour lives in static/js/site-pages.js. #}
DJE-052 Warning Performance
Excessive patches from unkeyed list reordering
Error message
PERFORMANCE WARNING: Unkeyed list produced excessive patchesA 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