por Do you know what ComponentDidMount is and how it works in React? React is a very popular JavaScript library in the world of this programming language; in fact, it occupies the second in popularity after JQuery. This library is known worldwide for mixing the power of JavaScript code with HTML, facilitating the SPA development process.
To do this, React has created components and hooks. Here, there are two types of components: those declared with arrow functions (function type components) and those declared with class (class type components). In this post, we will teach you what it is the method ComponentDidMount in React, an important function to control the life cycle of class type components.
What is ComponentDidMount in React?
Before talking about componentDidmount in React, we remember everything about React and its components. In our post on state and life cycle of components in React, we have explained that, before the various hooks from this bookstore, class-type components had a series of methods that controlled their life cycle. These methods allowed us to define at what point in the cycle to execute certain sections of code, whether mounted, updated or dismounted.
Note that methods to control the life cycle of a component declared with the keyword class they can still be used in React. However, as you can read in the article introducing hooks of reactjs.org, this bookstore tries to move away from the classroom. For this reason, they have created the hooks, useful when we handle function type components, such as componentDidmount.
ComponentDidMount in React
ComponentDidMount in React it is one of the methods that we can use to manipulate the life cycle of a component of type class. This method works in a similar way to hook useEffect in React. That is, it is executed right after the first render of our component. As the name suggests, the role of ComponentDidMount in React it is to warn that the component has already been mounted in the DOM.
Inside this method, we can put the code we want or simply do nothing. This code will always be executed after the first render. That is, it will be the third step when React is rendering a class type component; first run the builder, then he render and finally the componentDidMount.
If you want to see this process componentDidmount in React for yourself, we invite you to use the debugger of the browser inspector. With this tool you will be able to see the order in which the lines of code of your component are executed.
How does ComponentDidMount work in React?
The method ComponentDidMount In React it works the same as any other method. To execute it, just insert it into our class component. This method is a good place to put actions, such as an API call.
To show you how it works ComponentDidMount in React, we give you an example based on a hook useEffect. Suppose then that we have the following effect, which is responsible for calling our API with the function getLatestTweets:
useEffect (( ) => {
const execute = async ( ) => {
const tweets = await.getLatestTweets ( );
setTweets(tweets);
};
execute ( );
}, [ ];
Now, to pass these actions to a ComponentDidMount We could save them inside a function that is responsible for handling it. An example would be creating a function handleGetLatestTweets and keep in it what was in useEffect. This would be the function that we would pass through the component once it has been rendered for the first time.
Next, we show you how we pass this function to our method componentDidMount in React:
componentDidMount ( ) {
this.handleGetTweet ( );
}
In this way, you have learned about componentDidmount in react.
Do you want to continue learning?
Now that you know what it is and how it works componentDidMount in React, I’m sure you want to continue learning about the different possibilities that this JavaScript library gives us. To do this, we recommend our Full Stack Web Development Bootcamp, an intensive training program where You will learn to develop with tools and programming languages for the web, such as React, Babel, JavaScript, HTML, CSS and webPack. Do you want to continue learning to change your professional profile? Request more information!