Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
ReactJS – componentDidMount Method
In this article, we are going to see how to execute a function when the component is loaded in the DOM tree.
This method is majorly used during the mounting phase of the React lifecycle to handle all the network requests or to set up all the major subscriptions of the application.
You can always set up network requests or subscriptions in the componentDidMount method but to avoid any performance issues, these requests are needed to be unsubscribed in the componentWillUnmount method which is called during the unmounting phase of the React lifecycle.
Syntax
componentDidMount()
Example
In this example, we will build a color-changing React application which changes the color of the text as soon as the component is loaded in the DOM tree.
Our first component in the following example is App. This component is the parent of the ChangeName component. We are creating ChangeName separately and just adding it inside the JSX tree in our App component. Hence, only the App component needs to be exported.
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Tutorialspoint</h1>
<ChangeName />
</div>
);
}
}
class ChangeName extends React.Component {
constructor(props) {
super(props);
this.state = { color: 'lightgreen' };
}
componentDidMount() {
// Changing the state after 3 sec
setTimeout(() => {
this.setState({ color: 'wheat' });
}, 2000);
}
render() {
console.log('ChangeName component is called');
return (
<div>
<h1>Simply Easy Learning</h1>
</div>
);
}
}
export default App;Output
This will produce the following result.
800 Views
