Tutorial

Component Lifecycle Functions in React

Published on May 13, 2017
Default avatar

By Matthew Garcia

Component Lifecycle Functions in React

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Class components can define functions that will execute at certain points during the component’s lifecycle. Using them can give a finer level of control over components. Here’s an overview of the available lifecycle functions in React.

The following examples are very bad React and are for demonstrative purposes only.

componentWillMount

componentWillMount is called before the component is rendered for the first time. You can use this to call setState before the initial render.

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>
    );
  }
}

Calling setState will usually trigger a re-render, but calling it in componentWillMount won’t (since it hasn’t rendered in the first place).

componentDidMount

componentDidMount is called after the component is rendered for the first time. This can be used to start an async operation as soon as the component shows up.

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);
  }
}

componentDidMount won’t be called in server rendering.

componentWillReceiveProps

componentWillReceiveProps is called when the component receives new props, but before it renders. You can call setState here without causing another re-render, since there’s already one pending.

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});
    }
  }
}

shouldComponentUpdate

shouldComponentUpdate is called after props or state are changed (and after componentWillReceiveProps), but before it renders. It’s unique among lifecycle functions in that it is expected to return a boolean value. If false, render will not be called. This can be very useful for skipping unnecessary renders and save some CPU.

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);
  }
}

componentWillUpdate

componentWillUpdate is called right before the component renders and right after shouldComponentUpdate. It can’t call setState.

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.`);
    }
  }
}

componentDidUpdate

componentDidUpdate is called after render is finished. As with the other update functions, it’ll have both the new and old versions of props and state, but with the previous versions as the parameters, instead.

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}.`);
    }
  }
}

componentWillUnmount

Lastly, componentWillUnmount is called before the component is removed. Use it to say your goodbyes.

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Matthew Garcia

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
2 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Good explanation. Some outdated lifecycle events can be mentioned above and a way to migrate them would be helpful.

This is useful. Thanks

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel