key
is pretty much crucial for state perservation in React. As of React 0.13 it can't do the following things:
- Clone state
<Comp key={1} /><Comp key={1} />
- Preserve component state across different parents:
// first render
<div><Comp key={1} /></div>
// second render, state destroyed
<span><Comp key={1} /></span>
- More generally, teleport state to another subtree completely:
// render of myComp1
<Comp key={uuid} />
// next render, myComp2
<Comp key={uuid} />
The reason I want these is to unlock some insane tricks, e.g.
- Teleport a half-done animation to another place, i.e. animated transition across views (easily solvable otherwise).
- A generalized version of frosted glass effect.
- Other similar logic, e.g. drag and drop component where a stateful component is transported somewhere else.
But I dislike key for a few reasons, one being that it's basically a user-generated hash, and that's unreliable and doesn't scale: for example, that duplicate component trick is risky, as it's not clear whether we really wanted <Comp key={1} /><Comp key={1} />
or if we accidentally did a key collision.
The (only?) other used alternative I've seen for key is cursors. But I've repeatedly heard that while these solve the problem (?), they're a bit tedius to work with. Is this true? Please leave a comment if you have any experience regarding this. The solution doesn't need reactive updates, or easier state propagation, or any of the nice extras; it just needs to solve the above few cases.
I haven't really followed the discussion, could it not make sense to be able to somehow mark elements in
render
to be instantiated even though they aren't returned inrender
. So a component can be alive in the background (nodes too for perf) even when it's not inserted/rendered, this could then be rendered anywhere.That's a trivial example (and not 100% complete). One could imagine passing an instance as props to other components as well. This could also work neatly as a way to avoid juggling visibility (
display: none
) for elements that are hidden but you don't want to destroy (for perf and state-keeping).I don't think it makes sense to allow rendering the same instance twice, neither technically or practically (most frontends couldn't do it properly and mirroring hover states and so on makes no sense). EDIT: As for the frosted-glass effect, I don't think this functionality is the correct approach, it seems like a hack to achieve an effect better accomplished via other means.