React. components are not rendered in the order of state change - reactjs

Question

In react, assume I have Input component with prop name = A, B, C.
they are rendered in the order
render() {
return(
<Input name="A" />
<Input name="B" />
<Input name="C" />
);
}
then I change the state of C and A in the order first C then A.
component A and C re rendered in the order first A then C. they are not rendered in the order of state change(C then A)
See the code snippet given below.
I found the out put as
set state of C
set state of B
set state of A
Render of A
Render of B
Render of C
class Input extends React.Component {
componentWillMount() {
this.props.addInput(this);
}
state = {
error: false
}
check() {
console.log("set state of", this.props.name)
this.setState({
error: true
})
}
render() {
console.log("Render of", this.props.name)
return (
<input />
);
}
}
class Hello extends React.Component {
constructor(props) {
super(props);
this.inputs = {};
}
addInput(component) {
this.inputs[component.props.name] = component;
console.log(this.inputs);
}
checkAll() {
const inputs = this.inputs;
Object.keys(inputs).reverse().forEach(name => {
inputs[name].check()
});
}
render() {
return (
<div>
<Input addInput={(c) => this.addInput(c)} name="A"/>
<Input addInput={(c) => this.addInput(c)} name="B"/>
<Input addInput={(c) => this.addInput(c)} name="C"/>
<button onClick={() => this.checkAll()}>click here</button>
</div>
);
}
}
ReactDOM.render(
<Hello initialName="World"/>,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>

Answer 1

This is how JSX is supposed to work by default.
If you want to render components in an order of last state change, you'll have to put all your components either into an array or have a collection of componentName: componentInstance, also having a collection [or an array] of componentName: lastUpdated (or array item form { componentName: string, lastUpdated: Date }) in which you can modify each component's lastUpdated value and then sort your componentName: componentInstance collection or array by the date values.
Then just .map in the JSX.