How to use ComponentWillReceieveProp in React Hooks

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