const [flag, setFlag] = React.useState(false)
const [username, setUsername] = React.useState('')
const [password, setPassword] = React.useState('')
const [errorUsername, setErrorUsername] = React.useState(true)
const [errorPassword, setErrorPassword] = React.useState(true)
const [text, setText] = React.useState({
user: 'Input your username*',
pass: 'Enter your password*',
})
const userValid = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
const passValid = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{0,}$/
React.useEffect(
() => setText({
user: errorUsername ? 'Username*' : 'Invalid username',
pass: errorPassword ? 'Password*' : 'Invalid password',
}),
[errorPassword, errorUsername]
)
React.useEffect(
() => {
setErrorPassword(passValidate.test(password))
},
[password]
)
React.useEffect(
() => setErrorUsername(userValidate.test(username)),
[username]
)
I am encountering an issue where the content of my text variable changes as soon as the page loads, even before any user input. I have set up dependencies for my useEffect hooks to trigger only after users enter their account details, but they are executing immediately upon initial render. Any help in resolving this would be greatly appreciated.