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
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>
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