How to use ComponentWillReceieveProp in React Hooks - reactjs

Question

I am trying to convert a class component into a functional component with hooks, but i am having a challenge on how to use an equivalent lifecycle of ComponentWillReceiveProps.
Log in form : Class Component:
class Login extends Component {
constructor() {
super();
this.state = {
emial:"",
password: "",
errors: {}
};
}
componentDidMount() {
window.history.pushState(null, document.title, window.location.href);
window.addEventListener('popstate', function (event){
window.history.pushState(null, document.title, window.location.href);
});
}
componentWillReceiveProps(nextProps) {// want to replace with hook equivalent
if (nextProps.auth.isAuthenticated) {
this.props.history.push("/recruitcentral"); // push user to dashboard when they login
}
if (nextProps.errors) {
this.setState({
errors: nextProps.errors
});
}
}
onChange = e => {
this.setState({ [e.target.id]: e.target.value });
};
onSubmit = e => {
e.preventDefault();
const userData = {
email: this.props.username,
password: this.state.password
};
this.props.loginUser(userData);
};
render() {
const { errors } = this.state;
return (
<>
<Row>
<Col>
<div>
<h1>Login</h1>
<div className={styles.formWrapper}>
<form onSubmit={this.onSubmit} noValidate>
<div className="email">
<label htmlFor="email"></label>
<input
onChange={this.onChange}
value={this.state.email}
error={errors.email}
id="email"
type="email"
className={classnames("", {
invalid: errors.email || errors.emailnotfound
})}
/>
<div className="Input__line" />
<label htmlFor="email" >Enter your email</label>
<span className="red-text">
{errors.email}
{errors.emailnotfound}
</span>
</div>
<div className="input-field col s12">
<input
onChange={this.onChange}
value={this.state.password}
error={errors.password}
id="password"
type="password"
className={classnames("", {
invalid: errors.password || errors.passwordincorrect
})}
/>
<div className="Input__line" />
<label htmlFor="password">Password</label>
<span className="red-text">
{errors.password}
{errors.passwordincorrect}
</span>
</div>
<div className={styles.createAccount}>
<button type="submit">Log in</button>
</div>
<div className={styles.createAccount}>
<button onClick={()=> this.props.history.push("/register")}type="submit">Create Account</button>
</div>
</form>
</div>
</div>
</Col>
</Row>
</>
Login Form :Functional Component
function Login(props) {
const [inputs, setInputs] = useState({
email:'',
password: '',
errors: {}
});
const [submitted, setSubmitted] = useState(false);
const { username, password } = inputs;
const auth =useSelector(state=>state.auth)
const dispatch = useDispatch();
const location = useLocation();
// reset login status
useEffect(() => {
dispatch(logoutUser());
}, []);
useEffect(() => {
// code to perform same function as componentWillReceiveProps here
}
}, [])
I know useEffect() will be used, but i really dont know how to implement it

Answer 1

componentWillRecieveProps is for all practical purposes deprecated with the recommendation being to use the componentDidUpdate lifecycle method. useEffect hook with appropriate dependency is the functional component equivalent.
For the first side-effect, navigating to "/recruitcentral" when user is authenticated.
useEffect(() => {
if (auth.isAuthenticated) {
props.history.push("/recruitcentral");
}
}, [auth]); // <-- Note: may complain about missing dependency like `history`, you can add these