Lifecycle Methods

from https://github.com/wojtekmaj/react-lifecycle-methods-diagram

Lifecycle Methods

from https://github.com/wojtekmaj/react-lifecycle-methods-diagram

componentDidMount

Executed once the component mounts. This is a good method to put your API requests for data in.

componentDidUpdate

Executed when the component updates or rerenders (doesn't get called on the initial render). componentDidUpdate gets passed the previous props, the previous state, and a snapshot. The first is most useful as it allows you to compare the previous prop values with the current one and decide whether to perform an operation (such as fetching data and modifying state).

componentDidUpdate (prevProps) {
  if (prevProps.category !== this.props.category) {
    this.fetchProducts()
        .then((products) => this.setState({ products }));
  }
}

componentWillUnMount

Executed before a component is unmounted. Perform any cleanup you need here such as removing event listeners, closing connections, cancelling timers, etc.