Component Lifecycle Functions in React

class Scorecard extends Component {
  componentWillMount() {
    this.setState({score: 0});
  }

  render() {
    const {playerName} = this.props;
    // `this.state` defaults to null, but since it'll be set in
    // `componentWillMount`, it can safely be destructured.
    const {score} = this.state;
    const message = `Current Score: ${score}`;
    return (
      <div>
        <h1>{playerName}</h1>
        <div>{message}</div>
      </div>
    );
  }
}

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentDidMount() {
    // You'd probably want to send an AJAX call or something,
    // but let's say they get 1000 points after the first second.
    setTimeout(() => this.setState({score: 1000}), 1000);
  }
}

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentWillReceiveProps(nextProps) {
    // `nextProps` is the new props, while `this.props` are the old ones.
    const {playerName} = this.props;
    // It is entirely possible that the new `playerName` is the same as the old one.
    if (nextProps.playerName !== playerName) {
      // Changing your name resets the score to zero.
      this.setState({score: 0});
    }
  }
}

class Scorecard extends Component {
  // Other functions omitted for brevity.
  shouldComponentUpdate(nextProps, nextState) {
    // Same as `componentWillReceiveProps`, `nextProps` is the
    // new props and `this.props` is the old.
    const {playerName} = this.props;
    // Ditto for `nextState` and `this.state`.
    const {score} = this.state;
    // Only `playerName` and `score` affect the display.
    // If something else changes, re-rendering would be a waste.
    return !(nextProps.playerName === playerName && nextState.score === score);
  }
}

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentWillUpdate(nextProps, nextState) {
    const {playerName} = this.props;
    // If `playerName` changes, log a message.
    if (nextProps.playerName !== playerName) {
      // Note that even though `componentWillReceiveProps` called `setState`, `this.state` is still the original value.
      const {score} = this.state;
      console.log(`${playerName} is now ${nextProps.playerName}.  His score of ${score} is forfeit.`);
    }
  }
}

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentDidUpdate(prevProps, prevState) {
    const {playerName} = this.props;
    // You guessed it, `prevProps` are the props as they used to be and `this.props` are what they are now.
    // Ditto for `prevState` and `this.state`.
    if (prevProps.playerName !== playerName) {
      const {score} = prevState;
      console.log(`${playerName} used to be ${prevProps.playerName}.  His former score was ${score}.`);
    }
  }
}

class Scorecard extends Component {
  // Other functions omitted for brevity.
  componentWillUnmount() {
    console.log('Sayonara!');
  }
}