React Life Cycle Events

There are many different life cycle methods, but in this post we're going to explore the ones that are used most often (which will cover ~90% of use cases).

See diagram https://learn.tylermcginnis.com/courses/50507/lectures/762618

You can really break React's Life Cycle Methods down into two categories.

1) When a component gets mounted to the DOM and unmounted.
2) When a component receives new data.

Life Cycle Events

componentDidMount
Called right after the component is mounted to the DOM. (Ajax request)

componentWillUnmount
Remove it when the component is removed from the DOM so we don't have memory leaks.

componentWillReceiveProps
Whenever the component receives new data from its parent component.

shouldComponentUpdate
React is very intelligent about not re-rendering unless something changed. You can make it even more intelligent by implementing shouldComponentUpdate. shouldComponentUpdate returns a boolean, if that boolean is true, that component will re-render.

Mounting / Unmounting

Here are some things that we may need to do:

  1. Establish some default props in our component
  2. Set some initial state in our component
  3. Make an Ajax request to fetch some data needed for this component
  4. Set up any listeners (ie Websockets or Firebase listeners)
  5. Remove any listeners you initially set up (when unmounted)

Default props

class Loading extends React.Component {
  render () {
    ...
  }
}
Loading.defaultProps = {
  text: 'Loading'
}
 
/* So if we had a Loading component that took in a loading text, we could make sure that if a text attribute isn't provided to the component, this.props.text will by default be 'Loading'. */

Initial State (using Constructor)

Sometimes you'll want your component to manage some piece of state. In order to do that you'll first need to set some initial state of your component when your component is first added to the DOM. To do this you can use ES6 constructor property.

class Login extends React.Component {
  constructor (props) {
    super(props)
    this.state =  {
      email: '',
      password: ''
    }
  }
  render () {
    ...
  }
}

Ajax Request (componentDidMount)

This is a very common use case. The component needs some data that it's going to get from an Ajax request. You can do this utilizing componentDidMount. This will get called right after the component is mounted to the DOM.

class FriendsList extends React.Component {
  componentDidMount () {
    return axios.get(this.props.url).then(this.props.callback)
  }
  render () {
    ...
  }
}

Set up any listeners (ie Websockets or Firebase listeners)bold text

class FriendsList extends React.Component {
  componentDidMount () {
    ref.on('value', function (snapshot) {
      this.setState(function () {
        return {
          friends: snapshot.val()
        }
      })
    }.bind(this)
  }
  render () {
    ...
  }
}

Remove listeners (componentWillUnmount)

class FriendsList extends React.Component {
  componentWillUnmount () {
    ref.off()
  }
  render () {
    ...
  }
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License