existe alguna diferencia entre colocar en el form onSubmit={handleSubmit} y onClick={handleSubmit} en el button del formulario?

gndx Pero nunca como las suyas maestrazo!! 😎

La explicación de @drodva620 es genial :D

Hola, podemos explicarlo de la siguiente manera, tengo una manzana, y le digo a mi amigo, -ve diciendome que cosas pasan con esta manzana, y cuando termine de lavarla y cortarla, di que esta lista para ser comida o no. Eso es onSubmit, tenemos un form con varias casillas, podemos validar los valores de cada casilla y comparar si todas las casillas tienen los datos correctos o no, al instante, onClick es decirle a tu amigo, -le hare cosas a esta manzana, no digas nada, lavare la manzana, y la corte, luego tocare tu hombro y solo ahi me diras que la manzana esta lista para ser comida o no.

<code>
//FormSignup.js

<form onSubmit={handleSubmit} className='form' noValidate>
        <h1>Create account</h1>
        <div className='form-inputs'>
          <label className='form-label'>Username</label>
          <input
            className='form-input'
            type='text'
            name='username'
            placeholder='Enter your username'
            value={values.username}
            onChange={handleChange}
          />
          {hiddenUserNameErrorText ? errors.username && <p>{errors.username}</p> : null}
        </div>
        <div className='form-inputs'>
          <label className='form-label'>Email</label>
          <input
            className='form-input'
            type='email'
            name='email'
            placeholder='Enter your email'
            value={values.email}
            onChange={handleChange}
          />
          {hiddenEmailErrorText ? errors.email && <p>{errors.email}</p> : null}
        </div>
        <div className='form-inputs'>
          <label className='form-label'>Password</label>
          <input
            className='form-input'
            type='password'
            name='password'
            placeholder='Enter your password'
            value={values.password}
            onChange={handleChange}
          />
          {hiddenPasswordErrorText ? errors.password && <p>{errors.password}</p> : null}
        </div>
        <div className='form-inputs'>
          <label className='form-label'>Confirm Password</label>
          <input
            className='form-input'
            type='password'
            name='password2'
            placeholder='Confirm your password'
            value={values.password2}
            onChange={handleChange}
          />
          {hiddenPassword2ErrorText ? errors.password2 && <p>{errors.password2}</p> : null}
        </div>
        <button className='form-input-btn' type='submit'>
          Sign up
        </button>
        <span className='form-input-login'>
          Already have an account? Login <a href='/'>here</a>
        </span>
      </form>

//useForm.js

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

    setErrors(validate(values))
    setIsSubmitting(true)
  }