{# 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-050 Warning Performance
Mixed keyed/unkeyed children cause suboptimal diffs
Error message
WARNING: Mixed keyed/unkeyed children in VDOM diffWhen some siblings in a list have `data-key` attributes and others don't, the VDOM diffing algorithm falls back to positional matching for unkeyed elements. This produces more patches than necessary, especially when items are reordered. Either add keys to ALL siblings or none.
performance template vdom
Affected versions: >=0.2.0
Solutions
Recommended
Add data-key to all list items
Ensure every sibling element in a dynamic list has a unique `data-key` attribute. Use the item's ID or other stable identifier.
Before (problematic)
{% for item in items %}
<div data-key="{{ item.id }}">{{ item.name }}</div>
{% endfor %}
<div>Add new item</div> <!-- No key! -->
After (fixed)
{% for item in items %}
<div data-key="{{ item.id }}">{{ item.name }}</div>
{% endfor %}
<div data-key="add-new">Add new item</div>
Enable VDOM trace to inspect the diff
Run your server with DJUST_VDOM_TRACE=1 to see detailed diff output including which elements are keyed vs unkeyed.
Before (problematic)
# Normal server start
python manage.py runserver
After (fixed)
# With VDOM trace enabled
DJUST_VDOM_TRACE=1 python manage.py runserver
# Look for [VDOM TRACE] lines in stderr