How to replace componentWillRecieveProps - reactjs

Question

I'm new to redux and followed this tutorial to create a simple blog app with react and redux. I've completed it, however I noticed that componentWillRecieveProps is being deprecated. I'm trying to replace it with more up-to-date code, but have been unable to understand how to do so. I've read this article about replacing ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’, but I don't think that this is the correct use for getDerivedStateFromProps as React's blog post on replacing one with the other describes.
My current componentWillRecieveProps code:
import axios from "axios";
import React from "react";
import { connect } from "react-redux";
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
title: "",
body: "",
author: ""
};
this.handleChangeField = this.handleChangeField.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
//This is deprecated
componentWillReceiveProps(nextProps) {
console.log(this);
if (nextProps.articleToEdit) {
this.setState({
title: nextProps.articleToEdit.title,
body: nextProps.articleToEdit.body,
author: nextProps.articleToEdit.author
});
}
}
handleSubmit() {
const { onSubmit, articleToEdit, onEdit } = this.props;
const { title, body, author } = this.state;
if (!articleToEdit) {
return axios
.post("http://localhost:8000/api/articles", {
title,
body,
author
})
.then(res => onSubmit(res.data))
.then(() => this.setState({ title: "", body: "", author: "" }));
} else {
return axios
.patch(
`http://localhost:8000/api/articles/${articleToEdit._id}`,
{
title,
body,
author
}
)
.then(res => onEdit(res.data))
.then(() => this.setState({ title: "", body: "", author: "" }));
}
}
handleChangeField(key, event) {
this.setState({
[key]: event.target.value
});
}
render() {
const { articleToEdit } = this.props;
const { title, body, author } = this.state;
return (
<div className="col-12 col-lg-6 offset-lg-3">
<input
onChange={ev => this.handleChangeField("title", ev)}
value={title}
className="form-control my-3"
placeholder="Article Title"
/>
<textarea
onChange={ev => this.handleChangeField("body", ev)}
className="form-control my-3"
placeholder="Article Body"
value={body}
/>
<input
onChange={ev => this.handleChangeField("author", ev)}
value={author}
className="form-control my-3"
placeholder="Article Author"
/>
<button
onClick={this.handleSubmit}
className="btn btn-primary float-right"
>
{articleToEdit ? "Update" : "Submit"}
</button>
</div>
);
}
}
const mapDispatchToProps = dispatch => ({
onSubmit: data => dispatch({ type: "SUBMIT_ARTICLE", data }),
onEdit: data => dispatch({ type: "EDIT_ARTICLE", data })
});
const mapStateToProps = state => ({
articleToEdit: state.home.articleToEdit
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Form);
Full Repo
Codesandbox
If componentWillRecieveProps is being deprecated, how should I update my code?
Edit: using getDerivedStateFromProps, nextProps still has the previous values so when returning the object, state is set back to previous state, no updates are actually made.
Trying to use prevState values doesn't work in this case because the initial prevState values are all empty strings which are called and placed into state anytime the component renders, which occurs on initial page load, and when clicking the edit button.
static getDerivedStateFromProps(nextProps, prevState) {
if (
JSON.stringify(nextProps.articleToEdit) !==
JSON.stringify(prevState.articleToEdit)
) {
console.log(nextProps);
console.log(prevState);
return {
title: nextProps.articleToEdit.title,
body: nextProps.articleToEdit.body,
author: nextProps.articleToEdit.author
}; // <- is this actually equivalent to this.setState()?
} else {
return null;
}
}

Answer 1

componentWillReceiveProps() method is deprecated by introducing a new life cycle method called getDerivedStateFromProps().
Keep in mind that you should always compare current props with previous props like below and if they both are not same then do setState otherwise you will get into infinite setState warning
Replace below code in place of componentWillReceiveProps method
static getDerivedStateFromProps(nextProps, prevState) {
//Below I used JSON.stringify to compare current props with previous props of articleToEdit object
if (JSON.stringify(nextProps.articleToEdit) !== JSON.stringify(prevState.artileToEdit)){
return({
title: nextProps.articleToEdit.title,
body: nextProps.articleToEdit.body,
author: nextProps.articleToEdit.author
});// <- this is setState equivalent
}
return null;
}
Edit:
You cannot access this.props inside getDerivedStateFromProps function. If you want to access some previous props (like for comparison) inside the function, then you can mirror such values inside the state. Then you can compare the nextProps with the value stored in state like above
Check this thread for better understanding
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props

Answer 2

Alrighty. Here's a working example for your application. I completely rewrote its structure so that each component handles its own set of state and props. The components are also reusable so they can be placed wherever -- provided that it has required props.
Notes:
Don't mix .jsx and .js (see step 6 for fix)
Separate your container-components from your components. Also make reusable components -- this vastly simplifies your state and prop logic.
For your application, you can completely remove redux and instead allow your server to be the "source of truth". So instead of saving to redux state and manipulating redux state, you would simply make AJAX requests to leverage your API for CRUDing your articles (for example, form submission would send post request to API, which would add an article to the DB, then either redirect the user back to /articles or it could simply return all articles after it has posted and update ShowArticles state with new data). Up to you on how you want to handle that. But, with that said, the only time you really need redux is if you're sharing props from two separate heavily nested components.
If using redux, add a types and actions folder as shown in the example below. It makes your code easier to read and more modular.
Avoid using index.js unless the root folder only houses a single file. Otherwise, when the application breaks (and it will), it'll be a hassle to figure out which "index.js" broke if you have many.
The boilerplate you're using is pretty old and you're making your life harder by using it. I've created a MERN Fullstack Boilerplate that allows things like: fat arrow functions in class methods, scss/css node_module imports, component-level scss module imports, runs server and client simultaneously, has an error overlay, eslinting, and plenty more. I highly recommend porting what you have over to it.
Working example: https://codesandbox.io/s/4x4kxn9qxw (unfortunately, the create-react-app template doesn't allow scss module imports... oh well, you'll get the idea)

Answer 3

My advice would be to heed the warning that React is giving us by replacing this lifecycle method because of its misuse — they are telling us only do this if you really have to, because there is probably a better way (including the newer getDerivedStateFromProps).
From what I gather in this code, you are rendering a form, letting the user interact with it, but in some circumstance you replace the users' inputs with props (overwriting component state). Its easy to see why this is an anti-pattern but tricky to re-architect without knowing more about the app.
I'd suggest moving the inputs' values into the parent state (or creating a new parent), and change to value={props.title} etc. If there is a parent that controls a forms' state in any circumstance, you may as well hold form state there all the time.