title: Why is this react component rendering twice?
body: <p>The problem is that the component is being rendered twice, once with the initial state, again after the setState method in axios promise. Why is this happening and how can I solve this.</p>
  
  <p>I have used both componentWillMount and componentDidMount. I, being a noob, tried hard and failed to figure out why.</p>
  
  <pre><code>export default class Dashboard extends Component{
  
    constructor(props) {
      super(props)
      this.state = {
        data: {
          okay: 'lul'
        }
      }
    }
  
    componentWillMount() {
      axios
        .get('/api/data?param1='+this.props.location.state.param1+'&amp;param2='+this.props.location.state.param2)
        .then(res =&gt; {
          if (res.status != 401) {
            if(res.err)
              console.log('Error while retrieving: ', res.err)
            else {
              this.setState({
                data: res.data.data
              })
            }
          } else {
            console.log('Unauthorized!');
          }
        })
    }
  
    render() {
      return (
          &lt;Segment inverted vertical&gt;
            &lt;CardContainer data={this.state.data}/&gt;
          &lt;/Segment&gt;
      )
    }
  }
  </code></pre>
  
  <p>Even basic suggestions related to react / JS / general programming is highly appreciated</p>