React component remounts when state object is reordered - reactjs

Question

I have a react-redux application, and am using react-transition-group for transitions when child components position changes in a state change. However, if the order of my redux state object changes, components will unmount and then remount, rather than updating. This prevents the component from smoothly transitioning to its new position. Is there a way around this without introducing new state?
My parent component looks like this:
class ParentComponent extends Component {
...
render() {
return (
<div>
<div>
<CSSTransitionGroup>
<ChildComponents childComponentsToRender=
{this.props.someChildComponents}/>
<CSSTransitionGroup/>
</div>
</div>
)}}
ChildComponents looks like this:
export default function ChildComponents(props) {
const childrenToReturn = _.map(props.childComponentsToRender,
(childComponent) =>
<ChildComponent
key={childComponent.uniqueId}
position={childComponent.position} .../>
return (
<Fragment>
{childrenToReturn}
</Fragment>
)
}
And an individual ChildComponent looks like this:
export default function ChildComponent(props) {
return (
<div style={{transform: `translate(${props.position.x}px,
${props.position.y}px)`}}>
</div>
)
}
My redux state that renders the components looks like:
{
...,
someChildComponents: {
childComponent1: {
id: someUniqueId,
position: {x: int, y: int}
},
childComponent2: {
id: someUniqueId,
position: {x: int, y: int}
},
...
},
...
}
The problem would occur if an action was dispatched and the state would change from, for instance:
{
someChildComponents: {
childComponent1: {
id: someUniqueId,
position: {x: 100, y: 100}
},
childComponent2: {
id: someUniqueId,
position: {x: 200, y: 200}
}
}
}
To:
{
someChildComponents: {
childComponent2: {
id: someUniqueId,
position: {x: 300, y: 300}
},
childComponent1: {
id: someUniqueId,
position: {x: 150, y: 150}
}
}
}

Answer 1

If you need to relate on specific position of element, you better need array, not object. But I don't recommend to convert someChildComponents to array. In most cases, object is preferred to array when storing distinct data.
You may create array on the fly based on your someChildComponents object, for example using selectors. The only thing you need is some unique identifier within someChildComponents object, which can be used to sort your array.
Here is example code
const getChildrenComponents = state => state.someChildComponents;
export function makeArrayFromChildrenComponents() {
return createSelector(
[getChildrenComponents],
(ChildrenComponents) => (
Object.keys(ChildrenComponents).map(key => ChildrenComponents[key])
.sort((e1, e2) => {
if (e1.id === e2.id) return 0;
return e1.id < e2.id ? -1 : 1;
});
)
)
}
Then use it to provide stable array of children components to ParentComponent like this
const makeMapStateToProps = () => {
const getChildrenComponentsArray = makeArrayFromChildrenComponents();
const mapStateToProps = (state) => ({
ChildrenComponents: getChildrenComponentsArray(state)
// ... other mapped props
});
return mapStateToProps;
}
Selector will update ChildrenComponents whenever state changes. But array itself will hold the same order of elements.
You may also take a look at diffing algorithm used by React to decide whether to build new tree or hold existing.