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