What Are The Alternatives To componentWillReceiveProps In React?

In React, componentWillReceiveProps is a lifecycle method that was deprecated in version 16.3 and subsequently removed in version 17. To handle similar logic, you can use alternative lifecycle methods and hooks that are recommended in modern React development.

This article will explore the recommended alternatives: getDerivedStateFromProps, componentDidUpdate, and hooks like useEffect.

Prerequisites:

• React Lifecycle methods
• state and PropsLifecycle
• getDerivedState
• componentDidUpdate
• useEffect
• Functional Components

These are the following approaches we can use for the alternatives to componentWillReceiveProps in current React versions:

Steps to Create Application

Step 1: Create React app

npx create-react-app my-app

cd my-app
npm start

Dependencies

dependencies: {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Folder Structure

1. Using Hooks (Functional Components)

With the introduction of hooks, functional components can now manage lifecycle methods using the useEffect hook.

Syntax

import React, { useEffect } from 'react';
const MyComponent = (props) => {
    useEffect(() => {
        // Perform operations here  
    }, [props.someValue]);
    return <div>{props.someValue}</div>;
};
export default MyComponent;

Example: This illustrates the use of useEffect hook in a functional component.

//App.js

import React, { useState } from 'react';
import MyComponent from './MyComponent';
function App() {
	const [someValue, setSomeValue] = useState(0);
	function handleClick(event) {
		setSomeValue(someValue + 1);
	}
	return (
		<div>
			<MyComponent someValue={someValue} />
			<button onClick={handleClick}>Update Value</button>
		</div>
	);
}
export default App;

//MyComponent.jsx

import React, { useEffect } from 'react';
const MyComponent = ({ someValue }) => {
    useEffect(() => {
        console.log('someValue has changed:', someValue);
    }, [someValue]);
    return <div>{someValue}</div>;
};
export default MyComponent;

Output: Running the above example will initially display "0". Upon clicking the "Update Value" button, it will update the Dom and Increase the value from 0 to 1 and again if you click on update value button it changes the value from 1 to 2 and so on.

2. Using ComponentDidUpdate Method

This method is called after the component updates. It can be used to perform operations based on changes in props.

Syntax

componentDidUpdate(prevProps) {
    if (this.props.someValue !== prevProps.someValue) {
        // Perform operations here     
    }
}

Example: This example illustrates how 'componentDidUpdate' detects and responds to prop changes by logging a message when the prop 'someValue' is updated.

//MyComponent.jsx
import React from "react";

class MyComponent extends React.Component {
    componentDidUpdate(prevProps) {
        if (this.props.someValue !== prevProps.someValue) {
            console.log('Prop has changed:', this.props.someValue);
        }
    }
    render() {
        return <div>{this.props.someValue}</div>;
    }
}
export default MyComponent;

//App.js
import React, { useState } from 'react';
import MyComponent from './MyComponent';
function App() {
	const [someValue, setSomeValue] = useState(0);
	function handleClick(event) {
		setSomeValue(someValue + 1);
	}
	return (
		<div>
			<MyComponent someValue={someValue} />
			<button onClick={handleClick}>Update Value</button>
		</div>
	);
}
export default App;

Output: Running the above example will initially display "0". Upon clicking the "Update Value" button, it will update the Dom and Increase the value from 0 to 1 and again if you click on update value button it changes the value from 1 to 2 and so on.

3. Using getDerivedStateFromProps Method

It is a static method that allows you to update the state based on changes in props before rendering. It is commonly used to keep the state in sync with the props in a predictable manner.

Syntax

static getDerivedStateFromProps(nextProps, prevState) {
    // Perform state changes based on nextProps here  
    return {

    }
}

Example: This demonstrates how 'getDerivedStateFromProps' updates a component's state based on changes to its props.

//MyComponent.jsx
import React from "react";
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            someValue: props.someValue
        };
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.someValue !== prevState.someValue) {
            return { someValue: nextProps.someValue };
        }
        return null;
    }
    render() {
        return <div>{this.state.someValue}</div>;
    }
}
export default MyComponent;

//App.js
import React, { useState } from 'react';
import MyComponent from './MyComponent';
function App() {
	const [someValue, setSomeValue] = useState(0);
	function handleClick(event) {
		setSomeValue(someValue + 1);
	}
	return (
		<div>
			<MyComponent someValue={someValue} />
			<button onClick={handleClick}>Update Value</button>
		</div>
	);
}
export default App;

Output: Running the above example will initially display "0". Upon clicking the "Update Value" button, it will update the Dom and Increase the value from 0 to 1 and again if you click on update value button it changes the value from 1 to 2 and so on.

rameshreddym7che

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS