Support for Stable ViewKeys to Prevent UI Re-renders on ID Mapping
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.9k
- Forks
- 266
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 55
Description
Problem
Currently, optimistic inserts use temporary IDs (tempid) until the server responds with the authoritative ID (realid). When the ID changes, React re-renders the keyed element, causing UI issues:
- Focus loss
- Component state reset
- Input interruption
- Flickering
Because React treats the key as identity, replacing the ID forces React to unmount and remount the component. In many cases this is acceptable, but in advanced usage (e.g., editable lists, interactive forms) it causes UX degradation.
Proposed Solution
Introduce optional developer control to maintain a stable viewKey that survives the tempid → realid mapping.
- Each record will have a
viewKeyfield generated at optimistic creation time. viewKeyremains constant across ID upgrades.- UI components should key off
viewKey, notid, if stability is required. - Expose a manual API for developers to map
tempidtorealidin the persist function.
Example usage:
persist: (transaction) => {
const result = api.insert(data);
transaction.mapViewKey({ tempId: tempid, realId: result.id });
}
- Mapping must occur after server success but before transaction completion.
- System updates internal references.
- No UI re-renders triggered by ID changes.
- If no mapping is performed, fallback to current behavior (tempid replaced by realid, React re-renders).
Design Principles
- Opt-in only. No automatic viewKey generation unless explicitly requested.
- Defaults stay simple for developers who don't need stability.
- Advanced users can maintain seamless UX where needed.
- Keeps transaction model deterministic and explicit.
Future Work
- Consider offering a helper to auto-generate viewKey at insert time if requested.
- Potentially expose viewKey defaults in the collection or transaction configuration for convenience.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing the persist function and transaction completion flow, including the proposed transaction.mapViewKey({ tempId, realId }) entry point. Define how an opt-in stable viewKey survives ID upgrades, how internal references are updated, and how the existing fallback behaves when no mapping is performed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100