React - componentWillReceiveProps alternative [duplicate]

Question

I use React with NextJS.

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.

The below code works perfectly fine.

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 => 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(           <Table color="teal" >                 <Table.Header>                   <Table.Row textAlign="center">                     <Table.HeaderCell>TOTAL</Table.HeaderCell>                     <Table.HeaderCell>PASS</Table.HeaderCell>                     <Table.HeaderCell>FAIL</Table.HeaderCell>                     <Table.HeaderCell>PASS %</Table.HeaderCell>                     <Table.HeaderCell>FAIL %</Table.HeaderCell>                                                    </Table.Row>                 </Table.Header>                 <Table.Body>                   <Table.Row textAlign="center">                     <Table.Cell>{this.state.total}</Table.Cell>                     <Table.Cell >{this.state.pass}</Table.Cell>                     <Table.Cell >{this.state.fail}</Table.Cell>                                                          <Table.Cell >{this.state.passp}</Table.Cell>                     <Table.Cell >{this.state.failp}</Table.Cell>                                                         </Table.Row>                 </Table.Body>            </Table>                      );     } } 

Looks like componentWillReceiveProps will be deprecated. I tried other options like shouldComponentUpdate etc..they all lead to infinite loop. What is best approach to update the state from the props to re-render this component?

Answer 1

From react blog, 16.3 introduced deprecation notices for componentWillRecieveProps.

As a workaround, you would use the method

static getDerivedStateFromProps(nextProps, prevState) 

therefore

componentWillReceiveProps(props){     let total = props.results.length;     let pass  = props.results.filter(r => 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}); } 

becomes

static getDerivedStateFromProps(nextProps, prevState) {   if (nextProps.total !== prevState.total) {     return ({ total: nextProps.total }) // <- this is setState equivalent   }   return null }