Form validation without useMemo

no-usememo-form.js

const rules = [
 '8 characteres',
 'lowercase word',
 'uppercase word',
];

// Lista de erros
const Errors = ({ active }) => {
  return active && (
    <ul>
      {rules.map((value, index) => (
        <li key={index}>{value}</li>
      ))}
    </ul>
  );
}

const CreateAccountForm = () => {
  const [password, setPassword] = useState('');
  const [showErrors, setShowErrors] = useState(false);

  const checkPassword = event => {
    const { value } = event.target;
    setShowErrors(value.length < 8);
    setPassword(value);
  };

  return (
    <form>
      <h1>Login</h1>
      <input placeholder="Email" />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={checkPassword}
      />
      <Errors active={showErrors} />
    </form>
  );
};