LifeCycle Events

LifeCycle events

• Mounting
• Updating
• Unmounting

Mounting

• constructor
• componentWillMount
• render
• componentDidMount

Mounting: constructor

• constructor(props)
• Call super(props) to initialise props
• Set initial state here
• Don't use setState({})

const initialState = {
    color: 'green'
};

class BackGroundColor extends React.Component {

    constructor(props) {
      super(props);
      this.state = initialState
    }
    // ...
}

Mounting: componentWillMount

• Only lifecycle hook called on server rendering
• Can use setState()
• Invoked immediately before mounting & thus before (initial) rendering

Mounting: componentDidMount

• Invoked immediately after initial render
• Setup subscriptions here / initial http requests
• Careful with setState here => rerender of component (right after initial render)

Mounting: render()

• Required in every Component
• Returns React elements - strings - numbers - booleans - null 
• Executed every time state or props update

Updating

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate 

Updating: componentWillReceiveProps

• nextProps as params
• Called when component will receive new props
• Used when you want to update the component's state based on incoming props

Updating: shouldComponentUpdate

• Receives nextProps & nextState as props
• Default: return true
• PureComponent has this lifecycle event build-in and should be used as default

Updating: componentWillUpdate

• Cannot use setState()
• Use this as an opportunity to perform preparations before an update occurs

Updating: componentDidUpdate

• previousProps & previousState as params
• Opportunity to operate on DOM after the component has updated
• Opportunity to do a http request after certain props have changed

Unmounting

• componentWillUnmount

Unmounting: componentWillUnmount

• Invoked immediately before component is unmounted & destroyed
• Use this to cleanup the component (subscriptions, invalidate timers, ... )