React JS Component Events: Till now we have learned about the basic composition of React programs. We’ve created components and looked at their internal structure. Now, we will go deeper into the structure and functionality of React Component Events. Also, we are going to learn about React JS Component Events methods such as getInitialState, componentDidMount, componentWillUnmount.
In addition to rendering, we will explore three new methods, each executing at a distinct time during the life of a component. This gives us increased creative control over the application. The whole purpose of components is to be tied to a custom state represented by that component object. A state is an object which holds data. But components also have helper functions that make it easier to control how these states will work in a given context.
Methods of React JS Component Events
Let’s see these methods which help to create React JS Component Events.
Method 1 – getInitialState
Each component is in charge of rendering its own state but the method getInitialState is always called before our render function. This has similar functionality to an object constructor function. Here we set the default values.
getInitialState Example
var Example = React.createClass( {
getInitialState: function() {
return {
state: 0;
}
}
}) ;
You’ll often see getInitialState used throughout React components. It resets the default object tied to the component. Here you could read values from a database or reset state to its default value before rendering this component on the screen.
ECMAScript 6
ECMAScript 6 can be used for the above method with the default constructor. With the help of this Keyword, we can attach state to the main object.
ECMAScript 6 Example
class Example extends React. Component
constructor: function() {
this.state: 0;
}
}) ;
Method 2 – componentDidMount
To access the state when the component displayed on the screen we must use the componentDidMount method. componentDidMount is called automatically by React when a component is rendered. By adding it to your custom React component, you are overloading it. Overloading means, adding your own functionality to the method that already exists in the default React component object, from which you are extending your own custom component.
That’s the whole purpose of using the extend keyword. We’re extending the default functionality of React’s component event object already provided by the library. When I first heard of using the “mounting” function within my React component, I didn’t understand what it meant. Are we not simply attaching a bunch of helper methods to our primary React component?
We’ve already spoken of mounting earlier. If you still need to brush up on the process, I recommend making sure you’ve gone over Component Mounting. ComponentDidMount is the method responsible for setting the state after the component has been mounted.
componentDidMount Example
var Example React.createClass({
componentDidMount: function() {
this.state = 1;
}
}) ;
It simply means that the virtual DOM has become associated with a DOM (Document Object Model) node that will be actually updated on the screen. This method is always called after executing render command from the component. They are synonymous and can probably be used interchangeably. It ensures and tells us that the element actually already exists within virtual DOM. The render method has already been called on it.
Method 3 – componentWillUnmount
And finally, componentwillUnmount is called just before the component is removed from the page and is about to be destroyed.
componentwillUnmount Example
var Example = React.createClass({
componentWillUnmount: function() {
this.state = null;
}
}) ;
Notice, we’re resetting the state here back to null. The component is destroyed and we no longer need its data. This is the place where you would clean up memory used by your component if any. For example uninitialized timers.