Be the first user to complete this post
|
Add to List |
Execution sequence of a React component's lifecycle methods
Why does it matter?
For starters, I will list out just a few basic reasons why you need to know about the lifecycle methods.
Moreover, an implicit knowledge about the lifecycle methods will also help you make decisions when implementing and organizing your components in the flux architecture.
Scenarios
There are just a few scenarios that require you to be aware of the lifecycle methods
1. Initial Render
2. Props Change
3. State Change
4. Component Unmount
Initial Render
NOTE: Although the above diagram will help you visualize the flow, the invocation of getDefaultProps actually takes place once before any instance of the component is created and the return value is shared among all instances of the component. Thanks to @boxofrox for bringing up this point in the comments.
Props Change
State Change
Component Unmount
Finally, below is a snippet that contains all the lifecycle methods and other frequenly used method that you can use as starting point for creating your components. You can also find this code this gist.
/**
* @jsx React.DOM
*/
var React = require('react'),
MyReactComponent = React.createClass({
// The object returned by this method sets the initial value of this.state
getInitialState: function(){
return {};
},
// The object returned by this method sets the initial value of this.props
// If a complex object is returned, it is shared among all component instances
getDefaultProps: function(){
return {};
},
// Returns the jsx markup for a component
// Inspects this.state and this.props create the markup
// Should never update this.state or this.props
render: function(){
return (<div></div>);
},
// An array of objects each of which can augment the lifecycle methods
mixins: [],
// Functions that can be invoked on the component without creating instances
statics: {
aStaticFunction: function(){}
},
// -- Lifecycle Methods --
// Invoked once before first render
componentWillMount: function(){
// Calling setState here does not cause a re-render
},
// Invoked once after the first render
componentDidMount: function(){
// You now have access to this.getDOMNode()
},
// Invoked whenever there is a prop change
// Called BEFORE render
componentWillReceiveProps: function(nextProps){
// Not called for the initial render
// Previous props can be accessed by this.props
// Calling setState here does not trigger an an additional re-render
},
// Determines if the render method should run in the subsequent step
// Called BEFORE a render
// Not called for the initial render
shouldComponentUpdate: function(nextProps, nextState){
// If you want the render method to execute in the next step
// return true, else return false
return true;
},
// Called IMMEDIATELY BEFORE a render
componentWillUpdate: function(nextProps, nextState){
// You cannot use this.setState() in this method
},
// Called IMMEDIATELY AFTER a render
componentDidUpdate: function(prevProps, prevState){
},
// Called IMMEDIATELY before a component is unmounted
componentWillUnmount: function(){
}
});
module.exports = MyReactComponent;
Also Read:
- Passing the store down implicitly via context in a react redux app
- Pure vs Impure functions
- Generating container components with connect utility in react redux app
- Automating Store and Action registration for multiple components using Fluxxor
- Using React with Backbone Models