how to prevent useEffect to display validation erros when the page loading?

Question

const Login = () => {

const [errors, setErrors] = useState({})

var newErrors = {}

const formValidation = () => { if (name === "") { newErrors.name = Name Can't Be Blanck }

if (email === "") {
  newErrors.email = <h1 className="text-red-800 text-center"> Email Address Is Required</h1>
} else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
  newErrors.email = <h1 className="text-red-800 text-center">Email address is invalid</h1>
} else {
  newErrors.email = <h1 className="text-green-800 text-center ">Email is Valid</h1>
}

if (password === "") {
  newErrors.password = <h1 className="text-red-800 text-center">Password Is Required</h1>
} else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/.test(password)) {
  newErrors.password = <h1 className="text-red-800 text-center">Invalid Password Format</h1>
} else {
  newErrors.password = <h1 className="text-green-800 text-center ">Correct Password</h1>
}

setErrors(newErrors)

}

const handleSubmit = (e) => { e.preventDefault()

formValidation()
console.log({ name, email, password })

}

useEffect(() => { if (newErrors) { formValidation()enter code here } }, [name, email, password])

return (
<div
  className="login grid place-content-center  
bg-gradient-to-r from-purple-900 via-purple-1000 to-blue-800 "
>
  <form
    className="card grid place-content-center  h-96 w-96  
   "
    onSubmit={handleSubmit}
  >
    <label htmlFor="">name:</label>
    <input
      type="text"
      value={name}
      placeholder="Enter Your Name"
      onChange={(e) => setName(e.target.value)}
    />
    {errors.name}
  </form>
</div>

) }

export default Login

Answer 1

The way i'd do it is to add a state called loading const {loading,setLoading}= useState(false) set loading to true when , of course , loading. and render errors conditionally using { loading? null : errors.name}