Hooks equivalent for componentWilLReceiveProps to update state - reactjs

Question

So I have a component where I conditionally update state on props change. If current state's CurrentPage is not equal to next props CurrentPage, I update state with next props' CurrentPage:
public componentWillReceiveProps(nextProps) {
if (this.state.CurrentPage !== nextProps.CurrentPage) {
this.setState({ CurrentPage: nextProps.CurrentPage });
}
}
I'm in the middle of refactoring the component do use hooks. I have a useState hook setup for CurrentPage when the component first loads:
const [currentPage, setCurrentPage] = useState(props.CurrentPage ? props.CurrentPage : 1);
What would be the hook equivalent of the componentWillReceiveProps logic in this case? Thanks!

Answer 1

use the "useEffect" hook for such purposes.
useEffect(() => {
if(props.yourproperty){
//execute your code.
}
console.log('property changed', props.yourproperty);
},[props.yourproperty])
This will only be called in case props.yourproperty is changed so no need to check with old props.
UseEffect Hook docs

Answer 2

You'll utilize the useEffect() hook. For an explanation of why, please read my guide to understand the hook and how you can leverage it: React Hooks Guide - useEffect (give it some time to load, codesandbox is a bit slow).
Your example is a bit arbitrary, as your props will already contain the current page, but nevertheless, here's a working example...
Working example (props updating another component's state):
components/Navigation
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { Link, withRouter } from "react-router-dom";
const style = {
marginRight: 5
};
const Navigation = ({ location: { pathname }, children }) => {
// initializing "currentPage" with the current "pathname" prop
// initializing "setPage" function to update "currentPage"
const [currentPage, setPage] = useState(pathname);
// utilizing useEffect to keep track of "pathname" changes
// that, upon change, will update the "currentPage" state
useEffect(() => {
setPage(pathname);
}, [pathname]);
return (
<div className="container">
<div className="nav">
<Link style={style} to="/">
Home
</Link>
<Link style={style} to="/page1">
Page 1
</Link>
<Link style={style} to="/page2">
Page 2
</Link>
</div>
<div className="page">
<p>
(current page: <strong>{currentPage}</strong> )
</p>
</div>
{children}
</div>
);
};
Navigation.propTypes = {
pathname: PropTypes.string
};
export default withRouter(Navigation);