React Lifecycle Method

Mounting Lifecycles

These methods are called when an instance of a component is being created and inserted into the DOM:

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

constructor(props)

  • The constructor is called before the component is mounted
  • constructor is meant for initialzing state and binding methods
  • constructor() is only called once!
  • when using props in the constructor, call super(props) first. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.
  • Initializing state here with props will effectively 'fork' the props and sets the state to that intial props.

componentWillMount()

  • Is called immediately before mounting
  • setState() happens synchronously so it will not trigger a re-render
  • Don't make requests from here
  • Setting state with incoming props should happen in constructor
  • UNLESS you have to do some logic before hand. Then use this lifecycle

render()

  • render is required in all class components
  • returns a single react element
  • you may return null or false

componentDidMount()

"You can’t guarantee the AJAX request won’t resolve before the component mounts. If it did, that would mean that you’d be trying to setState on an unmounted component, which not only won’t work, but React will yell at you for. Doing AJAX in componentDidMount will guarantee that there’s a component to update." - Tyler McGinnis
  • setState() will trigger re-render
  • now you have access to all DOM nodes

Updating Lifecycles

An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

componentWillReceiveProps(nextProps)

  • Called when component receives new props
  • This is a good area to realign state with your 'forked' props
  • nextProps is given to you to compare the new props with the old, this.props
  • Always compare the props before setting state, b/c this might get called without new props being given

shouldComponentUpdate(nextProps, nextState)

  • Should always return a boolean
  • Defaults to true
  • Great area to improve performance
  • Basically this controls exactly when your component will re-render.
  • Is not called on a forceUpdate()
  • Does not prevent child components from re-rendering
  • Returning false will not call componentWillUpdate(), render(), componentDidUpdate()
  • Can not setState

componentWillUpdate(nextProps, nextState)

  • Cannot call setState() here
  • Probably will never use this. IF you are using it.. look into componentWillReceiveProps()
  • When using shouldComponentUpdate() and props which changes something else then sure. But still.. maybe just do it in componentWillReceiveProps()

render()

componentDidUpdate(prevProps, prevState)

  • Same thing as componentDidMount()

Unmounting

componentWillUnmount

Unmounting

componentWillUnmount()

  • Remove listeners
  • Cancel outgoing network requests
  • Cancel any timers, aka setTimeOut()

setState((prevState, props)=> {...})

setState(stateChange, callback)

  • Does not guarantee that the call will be synchronous
  • Might not update the component immediately, might batch or defer updates till later

References