Tutorial by Examples

When a React component is created, a number of functions are called: If you are using React.createClass (ES5), 5 user defined functions are called If you are using class Component extends React.Component (ES6), 3 user defined functions are called getDefaultProps() (ES5 only) This is the firs...

componentWillReceiveProps(nextProps) This is the first function called on properties changes. When component's properties change, React will call this function with the new properties. You can access to the old props with this.props and to the new props with nextProps. With these variables, you c...

componentWillUnmount() This method is called before a component is unmounted from the DOM. It is a good place to perform cleaning operations like: Removing event listeners. Clearing timers. Stopping sockets. Cleaning up redux states. componentWillUnmount(){ ... } An example of remo...

When building a React application, it is often desirable to divide components based on their primary responsibility, into Presentational and Container components. Presentational components are concerned only with displaying data - they can be regarded as, and are often implemented as, functions tha...

This example serves as a complement to other examples which talk about how to use the lifecycle methods and when the method will be called. This example summarize Which methods (componentWillMount, componentWillReceiveProps, etc) will be called and in which sequence will be different for a componen...