Component Lifecycle's
Famini-ProDev
Posted on April 22, 2022
React components live certain life events that are called lifecycle events. These lifecycle's events are tied to lifecycle methods. I discussed several of these methods at the start of this chapter when discusses the creation of components.
The lifecycle methods provide hooks into the phases and the nature of a component. In the code example, taken from section 6.2, I am console logging the occurrence of the lifecycle events componentDidMount
, componentWillUnmount
, and getInitialState
lifecycle methods.
var Timer = React.createClass({
getInitialState: function() {
console.log('getInitialState lifecycle method ran!');
return {secondsElapsed: Number(this.props.startTime) || 0};
},
tick: function() {
console.log(ReactDOM.findDOMNode(this));
if(this.state.secondsElapsed === 65){
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
return;
}
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
console.log('componentDidMount lifecycle method ran!');
this.interval = setInterval(this.tick, 1000);
},
componentWillUnmount: function() {
console.log('componentWillUnmount lifecycle method ran!');
clearInterval(this.interval);
},
render: function() {
return (<div>Seconds Elapsed: {this.state.secondsElapsed}</div>);
}
});
ReactDOM.render(< Timer startTime = "60" / >, app);
The methods can be divided into three categories (Mounting, Updating, and Unmounting phases).
Below I show a table for each category and the containing lifecycle methods.
Mounting Phase (happens once in a components life):
The first phase of the React Component life cycle is the Birth/Mounting phase. This is where we start initialization of the Component. At this phase, the Component's props and state are defined and configured. The Component and all its children are mounted on to the Native UI Stack (DOM, UIView, etc.). Finally, we can do post-processing if required. The Birth/Mounting phase only occurs once.
Updating Phase (happens over and over in a components life):
The next phase of the life cycle is the Growth/Update phase. In this phase, we get new props, change state, handle user interactions and communicate with the component hierarchy. This is where we spend most of our time in the Component's life. Unlike Birth or Death, we repeat this phase over and over.
*Unmounting Phase (happens once in a components life): *
The final phase of the life cycle is the Death/Unmount phase. This phase occurs when a component instance is unmounted from the Native UI. This can occur when the user navigates away, the UI page changes, a component is hidden (like a drawer), etc. Death occurs once and readies the Component for Garbage Collection.
Reference :
How to React EnlightenmentTypeScript
Posted on April 22, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.