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

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}