DJE-050
Warning
Performance
Mixed keyed/unkeyed children cause suboptimal diffs
Error message
WARNING: Mixed keyed/unkeyed children in VDOM diff
When 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