According to docs, current reconciliation only works with subtree changes within the same parent, but it doesn’t really seem like something hard to scale up to work with subtrees moved anywhere in a single render.
I’m trying to force react to properly reconcile nodes of dynamic components tree (for adaptivity on window resize), with structure like this:
A |_B |_C |_D
A |_ C |_ D
But that would currently force redraw of the entire C/D subtree, and If I’m using that somwhere on top layer of the site, It would be forced to redraw the entire website while losing all the states on the way.
So at the moment it would work the following way:
A |_B |_C |_D
A |_ B -- not found in new structure, remove |_ C -- not found in shadow dom, redraw completely |_ D -- not found in shadow dom, redraw completely
If I understand it right, wouldn’t it be rather simple to add another feature such as “gkey”. When defined, behavior changes to the following:
A |_B |_C -- gkey="MyGlobalComponent_C" |_D -- gkey="MyGlobalComponent_D" -- React Render Hash Table ["MyGlobalComponent_C"] = C ["MyGlobalComponent_D"] = D
A |_ B -- not found in new structure, remove (or save into hashtable for when it's back again, at least the state) |_ C -- new child; has gkey; found in render hashtable; move from old location |_ D -- new child; has gkey; found in render hashtable; move from old location
Does react roadmap have something simillar planned or maybe there is already something that could solve my problem from another approach. Leaving rewriting react subclasses myself to the last resort.
Simplified example of the issue is shown in jsfiddle When you resize over 640 up/down, even the most simple structure within a single element forces a redraw (counter increases as component gets remounted) dispite key definition. In my case thou, I have a completely dynamic tree that may change in any imaginable way.