SolidJS store identity loss when reconcile runs without a key

Choosing the Right Keying Strategy

When the backend supplies a list with stable id values but the order can change, the idiomatic way to keep component identity across a reconcile is to key by that id:

reconcile(newList, { key: 'id' });

This tells Solid to match items by the id property instead of array index. As a result, reordered rows keep their store proxies, any <For> keyed by reference, and local component state (e.g., an "expanded" flag) survive the refetch.

Missing or Duplicate Keys

Reconcile expects a unique, non‑null key for every element. If an item lacks the key or two items share the same key, the diff becomes ambiguous:

• Missing key: Solid treats the element as a brand‑new item. The old proxy is discarded and a new one is created. Any state tied to the old reference is lost.
• Duplicate key: Solid silently picks one of the matches (usually the first). The other duplicate is treated as a new element, and the original proxy may be removed. This can lead to unexpected UI glitches.

Practical mitigation:

1. Validate the payload before reconciling—filter out or warn about items with undefined or null ids.
2. If duplicates are possible, dedupe them client‑side or let the backend enforce uniqueness.
3. When you cannot guarantee uniqueness, fall back to a positional merge for that list: reconcile(newList, { merge: true }) (or the equivalent option for your Solid version).

What Identity Preservation Means for Raw References

Any reference you capture before a reconcile points to the old proxy object. After the call, that proxy is no longer part of the store; it will not receive updates from the new data. Reading the reference is still safe, but it will not reflect changes.

To keep a reference that stays in sync, you can:

• Store the id instead of the object and look it up after reconciliation.
• Use store.get or a computed that re‑evaluates the proxy based on the current store.

Practical Steps for Your Case

1. Confirm your SolidJS version: npm list solid-js.
2. Ensure every item in the payload has a stable id and that no two items share the same id.
3. Call reconcile(newList, { key: 'id' }).
4. Test that a <For> keyed by reference preserves row‑level state across a reorder.
5. If you encounter missing or duplicate keys, add a pre‑processing step to clean the array before reconciling.

By following this pattern, you maintain UI identity across refetches while correctly handling ordering changes.