Using fake xhr request with componentWillMount() - reactjs

Question

'Home' is an intermediate component that redirects based on a xhr response. I expected 'Home' to display 'Loading ...' as per its render/return, until it receives the xhr response.
But surprisingly,
1) I never see 'Loading ...' at all, but I only see the redirected page.
2) Changing the delay in fake xhr request has no impact, i.e. I still get the response in < 5s
3) Changing componentWillMount() to componentDidMount() has no impact
4) If I comment out componentWillMount() { ... }, then I see 'Loading ...'
Can you please help me understand why ?
xhr.js
const myData = {
getData(cb) {
setTimeout(cb(true), 25000); // fake async
}
};
export default myData;
Home.js
"use strict";
import React from 'react';
import xhr from '../../utils/xhr';
import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom';
class Home extends React.Component {
constructor(props) {
super(props);
}
componentWillMount() {
const {history} = this.props;
xhr.getData((flag) => {
flag ? history.push('/myData') : history.push('/welcome');
});
}
render() {
return (
<div>Loading ...</div>
);
}
}
Home.propTypes = {
history: PropTypes.object.isRequired
};
export default withRouter(Home);

Answer 1

Your code should work fine with componentDidUpdate except one thing, you didnt run setTimeout correctly
Example:
const getData = cb => {
setTimeout(() => cb(false), 2500); // fake async
};
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
pageName: "Loading..."
};
}
componentDidMount() {
getData(flag => {
flag
? this.setState({ pageName: "myData" })
: this.setState({ pageName: "wellcome" });
});
}
render() {
return <div>{this.state.pageName}</div>;
}
}
ReactDOM.render(<Home />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Update
As commented below i should explain why and where you should invoke async operations.
componentWillMount - Is almost the same as the constructor, it
runs one time before the component is mounted to the DOM.
The render method can be invoked before your async operation has finished
hence it is not ideal to do async operation in this method. By the
way, in the DOCS its clearly says not to use this method and use
the constructor instead.
componentDidMpunt - Will invoked right after the component is
mounted to the DOM, this is the ideal method to run async operations.
Setting the state in this method will trigger a re-render (which
exactly what happens in the example above) DOCS.