React form validation hook causes infinite re-render loop - reactjs

Question

I've checked for other questions, they didn't help me
I built a React hook to validate my form inputs. However, it causes an infinite re-render loop. I've tracked down the problem to the useEffect dependency array. When I exclude the validators dependency, it works great! I won't ever change the validators during runtime, so is this prop is not needed in the dependency array? My ESLint react-hooks-plugin keeps giving me a warning that the validators dependency is missing. Please help me out. Can I leave out the validators dependency from the useEffect dependency array if I won't change it during runtime? Here is my hook and my form component:
import { useState, useEffect } from "react";
function setObjectValues<
K extends { [key: string]: unknown },
T
>(
object: K,
value: T
): { [key in keyof K]?: T } {
const initialResults: {
[key in keyof K]?: T;
} = {};
for (const key in object) {
initialResults[key] = value;
}
return initialResults;
}
export function useValidation<
K,
T extends {
[key: string]: (value: K) => boolean;
}
>(
value: K,
validators: T
): {
valid: boolean;
results: { [key in keyof T]?: boolean };
} {
const [results, setResults] = useState<
{ [key in keyof T]?: boolean }
>(setObjectValues(validators, true));
useEffect(() => {
const newResults: {
[key in keyof T]?: boolean;
} = {};
for (const key in validators) {
const valid = validators[key](value);
newResults[key] = valid;
}
setResults(newResults);
}, [value, validators]);
const valid = Object.values(results).every(
(item) => item === true
);
return { valid, results };
}
My component:
import { NextPage } from "next";
import {
useFirebase,
useValidation,
} from "app/hooks";
import {
useState,
useCallback,
FormEvent,
} from "react";
import { useRouter } from "next/router";
type InputType = "email" | "password";
const SignUp: NextPage = () => {
const firebase = useFirebase();
const router = useRouter();
const [email, setEmail] = useState("");
const {
valid: emailValid,
results: emailValidationResults,
} = useValidation(email, {
containsAt: (value) => value.includes("#"),
});
const [password, setPassword] = useState("");
const {
valid: passwordValid,
results: passwordValidationResults,
} = useValidation(password, {
isLongEnough: (value) => value.length >= 8,
containsLowerCase: (value) =>
value.toUpperCase() !== value,
containsUpperCase: (value) =>
value.toLowerCase() !== value,
containsNumber: (value) => /\d/.test(value),
});
const handleSubmit = useCallback(
(event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (
emailValid === true &&
passwordValid === true &&
email !== "" &&
password !== ""
) {
const error = firebase.createUser(
email,
password
);
if (error) {
console.warn(error.code);
} else {
router.push("/");
}
} else {
console.warn("Invalid user values");
}
},
[
email,
emailValid,
firebase,
password,
passwordValid,
router,
]
);
console.log(emailValid, passwordValid);
return (
<form onSubmit={handleSubmit}>
<label htmlFor="email">Email</label>
<input
value={email}
onChange={(event): void =>
setEmail(event.target.value)
}
id="email"
placeholder="Email"
/>
<p>{emailValid}</p>
<label htmlFor="password">Password</label>
<input
value={password}
onChange={(event): void =>
setPassword(event.target.value)
}
id="password"
placeholder="Password"
/>
<p>{passwordValid}</p>
<button type="submit">Submit</button>
</form>
);
};
export default SignUp;

Answer 1

const {
valid: passwordValid,
results: passwordValidationResults,
} = useValidation(password, {
isLongEnough: (value) => value.length >= 8,
containsLowerCase: (value) =>
value.toUpperCase() !== value,
containsUpperCase: (value) =>
value.toLowerCase() !== value,
containsNumber: (value) => /\d/.test(value),
});
Here, validators is actually an Object that is created during Signup render. When you create a new Object, it is always a new, different object, even though the values inside of it might be the same. This is the reason why adding it to the dependencies array causes infinite re-renders.
If the object does not depend on your component's state or props, move the declaration to outside of the component so that it is only created once.
// outside SignUp
const validators = {
isLongEnough: (value) => value.length >= 8,
containsLowerCase: (value) =>
value.toUpperCase() !== value,
containsUpperCase: (value) =>
value.toLowerCase() !== value,
containsNumber: (value) => /\d/.test(value),
};
// inside SignUp
const {
valid: passwordValid,
results: passwordValidationResults,
} = useValidation(password, validators);
I would suggest keeping validators in the dependencies array, because it should still work anyway. Leaving it out most of the time is a code smell. Most of the time, if validators changed, you will want the effect to be re-run again.