Mimicking Lifecycle Methods with Hooks in React
Last Updated :
15 Apr, 2025
React Hooks provides a powerful way to manage state and lifecycle events in functional components. However, if you're transitioning from class components to functional components, you might miss the familiar lifecycle methods like componentDidMount
, componentDidUpdate
, and componentWillUnmount
.
Fortunately, you can achieve similar functionality using Hooks. Let's explore how to mimic lifecycle methods with Hooks.
Prerequisites:
Steps To Create React Application and Installing Module:
Step 1: Create a new react app using the following command.
npx create-react-app my-react-app
Step 2: Navigate to the root directory of your project using the following command.
cd my-react-app
Project Structure:
project structureThe updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Mounting:
Mounting in React involves creating a component and rendering it onto the DOM. Here's a concise breakdown for both class and functional components.
Mimicking constructor:
In class components, the constructor
method is used for initializing state and binding event handlers. In functional components, you can achieve similar behavior using the useState
Hook for state initialization and useRef
Hook for storing mutable values.
Syntax:
// In Class component
class MyComponent extends Component {
constructor(props) {
super(props);
// Your constructor logic here
}
}
// In Functional component
function createInstance(param1, param2) {
return {
param1: param1,
param2: param2,
};
}
const instance = createInstance("value1", "value2");
Mimicking componentDidMount:
In class components, componentDidMount
is invoked after the component is mounted and rendered. To achieve similar behavior in functional components, you can use the useEffect
Hook with an empty dependency array.
Syntax:
// In Class component
class MyComponent extends React.Component {
componentDidMount = () => {
// componentDidMount logic here
}
}
// In functional component
useEffect(() => { /* componentDidMount logic */ }, []);
Mimicking render:
The render
method in class components is responsible for rendering the component UI. In functional components, the main body of the component serves the same purpose.
Syntax:
// for class component
class MyClassComponent extends React.Component {
render() {
return <div>Render content here</div>;
}
}
// for functional component
const MyFunctionalComponent = () => {
<div>Render content here</div>;
}
Updating:
Whenever a component experiences alterations, it undergoes an update. These modifications can stem from changes in props or state. React furnishes built-in methods to manage updated components:
Mimicking componentDidUpdate:
componentDidUpdate
is triggered whenever props or state change. In functional components, you can use useEffect
with dependencies to achieve similar behavior.
Syntax:
// for class component
class MyClassComponent extends React.Component {
componentDidUpdate(prevProps) {
// componentDidUpdate logic here
}
}
// for functional component
const MyFunctionalComponent = ({ prop }) => {
useEffect(() => {
// componentDidUpdate logic here
}, [prop]);
};
Mimicking shouldComponentUpdate:
shouldComponentUpdate
allows class components to optimize rendering by preventing unnecessary re-renders. In functional components, you can achieve a similar effect using the React.memo
higher-order component combined with the useMemo
Hook.
// for class component
class MyClassComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
// shouldComponentUpdate logic here
return true; // or false based on your condition
}
}
// for functional component
const MyFunctionalComponent = React.memo(({ prop }) => {
// shouldComponentUpdate logic here
});
Unmounting:
When a component is removed from the DOM, it is considered unmounted. In this scenario, only one built-in method comes into play. These component lifecycles pertain exclusively to class components. However, functional components mimic some of these lifecycle methods using React hooks, chiefly useState()
and useEffect()
.
Mimicking componentWillUnmount:
In class components, componentWillUnmount
is used for cleanup tasks before a component unmounts. With Hooks, you can return a cleanup function from useEffect.
Syntax:
// for class component
class MyClassComponent extends React.Component {
componentWillUnmount() {
// componentWillUnmount logic here
}
}
// for functional component
const MyFunctionalComponent = () => {
useEffect(() => {
return () => {
// componentWillUnmount logic here
};
}, []);
};
Regarding the constructor:
In functional components, the constructor's role is fulfilled by useState()
. Typically, the constructor initializes state values and binds the this
keyword for non-lifecycle methods. It executes prior to the component's rendering.
In the provided example, the Greeting component employs three methods in the following order:
constructor
()
: It sets the initial state for "greeting" and binds the reference to this
within the setGreeting
method.render
()
: This method determines the content to be displayed or returned by the component. Initially, it renders a button with an event listener and an empty paragraph.- Upon clicking the button:
setGreeting
()
: This updates the greeting state from an empty string to "Hello GeeksforGeeks!", prompting a re-render of the component.render
()
: It runs again, displaying "Hello World!" in place of the previous empty string.
For functional components, equivalent functionality can be achieved using useState
()
:
Example: Below is an example to illustrate's the implementation of lifecycle methods with class components in React.
JavaScript
import React, { Component } from 'react';
class LifecycleExample extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
console.log('Constructor called');
}
componentDidMount() {
console.log('Component did mount');
/* Simulating an increment of
count after mounting */
setTimeout(() => {
this.setState({
count: this.state.count + 1
});
}, 2000);
}
componentDidUpdate(prevProps, prevState) {
console.log('Component did update');
// Logging the state change after updating
console.log('Previous state:', prevState);
console.log('Current state:', this.state);
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
console.log('Render method called');
return (
<div>
<h1>Lifecycle Example</h1>
<p>Count: {this.state.count}</p>
</div>
);
}
}
export default LifecycleExample;
Start your application using the following command.
npm start
Output:
OutputExample 2: Below is an example to illustrate's the mimicking lifecycle methods with Hooks in React.
JavaScript
import React, {
useState,
useEffect,
useRef
} from 'react';
const ExampleComponent = () => {
const [count, setCount] = useState(0);
const didMountRef = useRef(false);
// componentDidMount
useEffect(() => {
console.log('Component mounted');
didMountRef.current = true;
// componentWillUnmount
return () => {
console.log('Component will unmount');
};
}, []);
// componentDidUpdate
useEffect(() => {
if (didMountRef.current) {
console.log('Component updated');
} else {
didMountRef.current = true;
}
}, [count]); // Only run this effect when count changes
// shouldComponentUpdate
const shouldUpdateRef = useRef(true);
useEffect(() => {
if (shouldUpdateRef.current) {
console.log('Component will update');
}
shouldUpdateRef.current = true;
});
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
};
export default ExampleComponent;
Start your application using the following command.
npm start
Output:
Output
Similar Reads
React JS lifecycle methods order in Mounting
Every component in React has to go through three phases that are Mounting, Updating, and Unmounting. These are called lifecycle methods in react.js. Out of the three, mounting is the first phase in the life cycle. There four methods which come under the mounting phase are: Table of Content Construct
4 min read
Explain Lifecycle Methods of React Components
Lifecycle Methods of React Components are defined as a series of methods that are invoked in different stages of the component's existence. React web apps are actually a collection of independent components which run according to the interactions made with them. Every React Component has a lifecycle
5 min read
Introduction to React Hooks
In React, Hooks are functions that allow you to manage state and perform side effects without the involvement of class components. Hooks were introduced in v16.8 of React and they can be accessed only through functional components but not through class components (Hooks were specifically designed fo
7 min read
What is the significance of the componentDidMount lifecycle method?
Every React Component has a lifecycle of its own, the lifecycle of a component can be defined as the series of methods that are invoked in different stages of the componentâs existence. In this article, we will dive into the componentDidMount and see the significance of it. Prerequisites:NPM & N
3 min read
How to implement pagination in React using Hooks?
Implementing pagination in React using hooks involves managing the state of the current page and the number of items per page, as well as rendering the paginated data accordingly. Implementing pagination in React using Hooks:Setup Initial State: Use the useState hook to manage the state for the curr
3 min read
New DOM Methods in React 18
React 18 has introduced several exciting features and improvements, including new DOM methods that enhance the developer experience. In this article, we will explore these new methods, discuss their syntax, and provide step-by-step instructions on how to integrate them into your React applications.
3 min read
Explain the concept of "lifting up in React Hooks"
"Lifting State Up" is a concept in React that involves moving the state of a component higher up in the component tree. In React, the state is typically managed within individual components, but there are situations where multiple components need to share and synchronize the same state. When this ha
2 min read
What is the purpose of the componentDidUpdate lifecycle method ?
React web apps are actually a collection of independent components that run according to the interactions made with them. Every React Component has a lifecycle of its own, the lifecycle of a component can be defined as the series of methods that are invoked in different stages of the componentâs exi
3 min read
How to handle forms in React ?
In React, Form handling is one of the basic and important concepts that every developer should learn about. Forms are used to collect the data so that we can use the data for various purposes. This article, lets us understand form handling in React along with examples.Prerequisites:JSXReactuseStateF
6 min read
How to handle internationalization with Hooks in React ?
Handling internationalization (i18n) involves using the state to manage the current language and updating the UI based on the selected language. This typically includes creating language files or dictionaries for each supported language and dynamically rendering the content based on the selected lan
3 min read