Component Lifecycle in Class Components
componentDidMount
The `componentDidMount` method is called after the component is initially rendered. It’s often used to fetch data.
class App extends React.Component {
componentDidMount() {
console.log('Component has mounted!');
}
render() {
return <h1>Welcome to React Lifecycle!</h1>;
}
}
componentWillUnmount
The `componentWillUnmount` method is called just before the component is removed from the DOM. It’s often used to clean up tasks like network requests or timers.
class App extends React.Component {
componentWillUnmount() {
console.log('Component is about to be removed!');
}
render() {
return <h1>Goodbye React Lifecycle!</h1>;
}
}
Using useEffect as a Lifecycle Hook
Basic useEffect
The `useEffect` hook is used for performing side effects in functional components. It can be used to replace `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in class components.
import React, { useEffect } from 'react';
const App = () => {
useEffect(() => {
console.log('Component mounted or updated!');
});
return <h1>Welcome to useEffect!</h1>;
};
useEffect with Cleanup
The `useEffect` hook can also return a cleanup function that runs when the component is unmounted, similar to `componentWillUnmount`.
import React, { useEffect } from 'react';
const App = () => {
useEffect(() => {
const timer = setTimeout(() => {
console.log('Cleanup after 5 seconds');
}, 5000);
return () => clearTimeout(timer); // Cleanup on unmount
}, []);
return <h1>Component with cleanup example!</h1>;
};
Favourites
Java
HTML and CSS 
Python
Javascript
TroubleshootingMonitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now
Programming Cheatsheets: Quick Reference for Productivity
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!
Blogs
Learn
Tools