ReactJS: run function on prop change without using deprecated componentWillReceiveProps - reactjs

Question

I have a container component which gets page number as prop and downloads data for that page. I rely on componentDidUpdate() to trigger the download as componentDidUpdate() fires when pageNumber changes. Is this a reasonable way to do it?
One thing I noticed is that the component gets re-rendered when it receives a new pageNumber even though nothing changes at first and then it re-renders again once data has been downloaded. The first re-render is superfluous. Should I not be bothered by this?
If I was really bothered, I could user shouldComponentUpdate() to only re-render when data changes. (I wonder if this check might even be more costly than the re-render itself?) However, if I used shouldComponentUpdate() and not update on page change, then I couldn't rely on componentDidUpdate() to load my data anymore.
Does this mean that the below is the way to do it or is there a better way?
import React from 'react';
import PropTypes from 'prop-types';
import Table from "../components/Table";
import Pagination from "../components/Pagination";
import {connect} from "react-redux";
import {changePage} from "../js/actions";
const PAGE_COUNT = 10;
const mapStateToProps = state => {
return { currentPage: state.currentPage }
};
const mapDispatchToProps = dispatch => {
return {
changePage: page => dispatch(changePage(page))
};
};
class ConnectedTableContainer extends React.Component {
state = {
data: [],
loaded: false,
};
handlePageChange = page => {
if (page < 1 || page > PAGE_COUNT) return;
this.props.changePage(page);
};
loadData = () => {
this.setState({ loaded: false });
const { currentPage } = this.props;
const pageParam = currentPage ? "?_page=" + currentPage : "";
fetch('https://jsonplaceholder.typicode.com/posts/' + pageParam)
.then(response => {
if (response.status !== 200) {
console.log("Unexpected response: " + response.status);
return;
}
return response.json();
})
.then(data => this.setState({
data: data,
loaded: true,
}))
};
componentDidMount() {
this.loadData(this.props.currentPage);
}
componentDidUpdate(prevProps) {
if (prevProps.currentPage != this.props.currentPage) {
this.loadData();
}
}
render() {
const { loaded } = this.state;
const { currentPage } = this.props;
return (
<div className="container">
<div className="section">
<Pagination onPageChange={ this.handlePageChange } pageCount={ PAGE_COUNT } currentPage={ currentPage }/>
</div>
<div className={ "section " + (loaded ? "" : "loading") }>
<Table data={ this.state.data } />
</div>
</div>
)
}
}
ConnectedTableContainer.propTypes = {
changePage: PropTypes.func.isRequired,
currentPage: PropTypes.number.isRequired,
};
ConnectedTableContainer.defaultProps = {
currentPage: 1,
};
const TableContainer = connect(mapStateToProps, mapDispatchToProps)(ConnectedTableContainer);
export default TableContainer;

Answer 1

It is perfectly fine to use componentDidUpdate() to trigger the download when pageNumber changes.
I would not recommend to implement shouldComponentUpdate, instead inherit from React.PureComponent. This implements shouldComponentUpdate for you by comparing props and state. If any of the props and state change (shallow comparison), it'll re-render, otherwise not.