title: React - componentWillReceiveProps alternative
body: <p>I use React with NextJS.</p>
  
  <p>I have a component which is basically a table which gives some summary.
  Based on some UI selection, this component is expected to show appropriate summary.</p>
  
  <p>The below code works perfectly fine.</p>
  
  <pre><code>class Summary extends Component{
  
      state = {
          total: 0,
          pass: 0,
          fail: 0,
          passp: 0,
          failp: 0
      }
  
      componentWillReceiveProps(props){
          let total = props.results.length;
          let pass  = props.results.filter(r =&gt; r.status == 'pass').length;
          let fail  = total - pass;
          let passp = (pass/(total || 1) *100).toFixed(2);
          let failp = (fail/(total || 1) *100).toFixed(2);
          this.setState({total, pass, fail, passp, failp});
      }
  
      render() {
          return(
            &lt;Table color="teal" &gt;
                  &lt;Table.Header&gt;
                    &lt;Table.Row textAlign="center"&gt;
                      &lt;Table.HeaderCell&gt;TOTAL&lt;/Table.HeaderCell&gt;
                      &lt;Table.HeaderCell&gt;PASS&lt;/Table.HeaderCell&gt;
                      &lt;Table.HeaderCell&gt;FAIL&lt;/Table.HeaderCell&gt;
                      &lt;Table.HeaderCell&gt;PASS %&lt;/Table.HeaderCell&gt;
                      &lt;Table.HeaderCell&gt;FAIL %&lt;/Table.HeaderCell&gt;                                 
                    &lt;/Table.Row&gt;
                  &lt;/Table.Header&gt;
                  &lt;Table.Body&gt;
                    &lt;Table.Row textAlign="center"&gt;
                      &lt;Table.Cell&gt;{this.state.total}&lt;/Table.Cell&gt;
                      &lt;Table.Cell &gt;{this.state.pass}&lt;/Table.Cell&gt;
                      &lt;Table.Cell &gt;{this.state.fail}&lt;/Table.Cell&gt;                                     
                      &lt;Table.Cell &gt;{this.state.passp}&lt;/Table.Cell&gt;
                      &lt;Table.Cell &gt;{this.state.failp}&lt;/Table.Cell&gt;                                      
                    &lt;/Table.Row&gt;
                  &lt;/Table.Body&gt;
             &lt;/Table&gt;             
          );
      }
  }
  </code></pre>
  
  <p>Looks like <code>componentWillReceiveProps</code> will be deprecated. I tried other options like <code>shouldComponentUpdate</code> etc..they all lead to infinite loop. What is best approach to update the state from the props to re-render this component?</p>