React: UseEffect Dec

 const Login = (props) => {

  const [enteredEmail, setEnteredEmail] = useState('');

  const [emailIsValid, setEmailIsValid] = useState();

  const [enteredPassword, setEnteredPassword] = useState('');

  const [passwordIsValid, setPasswordIsValid] = useState();

  const [formIsValid, setFormIsValid] = useState(false);

  useEffect(()=>{

   const identifier= setTimeout(()=>{

    console.log('triggered only once for all the  keystrokes typed in between 1000millis')

    setFormIsValid(

      enteredEmail.includes('@') && enteredPassword.trim().length > 6

    );

   },1000);

   return ()=>{

    console.log("cleanup...")

    clearTimeout(identifier);

  };  //cleaning up after 5seconds

  },[enteredEmail, enteredPassword])

  const emailChangeHandler = (event) => {

    setEnteredEmail(event.target.value);

    // setFormIsValid( // moved to useEffect.

    //   event.target.value.includes('@') && enteredPassword.trim().length > 6

    // );

  };

const passwordChangeHandler = (event) => {

    setEnteredPassword(event.target.value);

    setFormIsValid(

      event.target.value.trim().length > 6 && enteredEmail.includes('@')

    );

  };

 const validateEmailHandler = () => {

    setEmailIsValid(enteredEmail.includes('@'));

  };

  const validatePasswordHandler = () => {

    setPasswordIsValid(enteredPassword.trim().length > 6);

  };

  const submitHandler = (event) => {

    event.preventDefault();

    props.onLogin(enteredEmail, enteredPassword);

  };

  <form onSubmit={submitHandler}>

        <div

          className={`${classes.control} ${

            emailIsValid === false ? classes.invalid : ''

          }`}

        >

          <label htmlFor="email">E-Mail</label>

          <input

            type="email"

            id="email"

            value={enteredEmail} placeholder="UseEffect Used Here-- [Check Console]"

            onChange={emailChangeHandler}

            onBlur={validateEmailHandler}

          />

        </div>

        <div

          className={`${classes.control} ${

            passwordIsValid === false ? classes.invalid : ''

          }`}

        >

FILE: LOGIN.js

import React, { useEffect, useState } from 'react';

import Card from '../UI/Card/Card';

import classes from './Login.module.css';

import Button from '../UI/Button/Button';

const Login = (props) => {

  const [enteredEmail, setEnteredEmail] = useState('');

  const [emailIsValid, setEmailIsValid] = useState();

  const [enteredPassword, setEnteredPassword] = useState('');

  const [passwordIsValid, setPasswordIsValid] = useState();

  const [formIsValid, setFormIsValid] = useState(false);

  useEffect(()=>{

   const identifier= setTimeout(()=>{

    console.log('triggered only once for all the  keystrokes typed in between 1000millis')

    setFormIsValid(

      enteredEmail.includes('@') && enteredPassword.trim().length > 6

    );

   },1000);

   return ()=>{

    console.log("cleanup...")

    clearTimeout(identifier);

  };  //cleaning up after 5seconds

  },[enteredEmail, enteredPassword])

  const emailChangeHandler = (event) => {

    setEnteredEmail(event.target.value);

    // setFormIsValid( // moved to useEffect.

    //   event.target.value.includes('@') && enteredPassword.trim().length > 6

    // );

  };

  const passwordChangeHandler = (event) => {

    setEnteredPassword(event.target.value);

    setFormIsValid(

      event.target.value.trim().length > 6 && enteredEmail.includes('@')

    );

  };

  const validateEmailHandler = () => {

    setEmailIsValid(enteredEmail.includes('@'));

  };

  const validatePasswordHandler = () => {

    setPasswordIsValid(enteredPassword.trim().length > 6);

  };

  const submitHandler = (event) => {

    event.preventDefault();

    props.onLogin(enteredEmail, enteredPassword);

  };

  return (

    <Card className={classes.login}>

      <form onSubmit={submitHandler}>

        <div

          className={`${classes.control} ${

            emailIsValid === false ? classes.invalid : ''

          }`}

        >

          <label htmlFor="email">E-Mail</label>

          <input

            type="email"

            id="email"

            value={enteredEmail} placeholder="UseEffect Used Here-- [Check Console]"

            onChange={emailChangeHandler}

            onBlur={validateEmailHandler}

          />

        </div>

        <div

          className={`${classes.control} ${

            passwordIsValid === false ? classes.invalid : ''

          }`}

        >

          <label htmlFor="password">Password</label>

          <input

            type="password"

            id="password"

            value={enteredPassword}

            onChange={passwordChangeHandler}

            onBlur={validatePasswordHandler}

          />

        </div>

        <div className={classes.actions}>

          <Button type="submit" className={classes.btn} disabled={!formIsValid}>

            Login

          </Button>

        </div>

      </form>

    </Card>

  );

};

export default Login;