Next.js Discord

Discord Forum

React hook form issue

Answered
Cape horse mackerel posted this in #help-forum
Open in Discord
Cape horse mackerelOP
Hi guys.
I'm getting a weird error when using react-hook-form.
The error is There was an error while hydrating this Suspense boundary. Switched to client rendering.
"next": "13.4.5",
"react-hook-form": "^7.45.1"

Any ideas?
Answered by Cape horse mackerel
Don't know if this is a good approach but I've fixed it doing 
const [mounted, setMounted] = useState(false);

useEffect(() => setMounted(true) ,[])

if(!mounted) return null;
View full answer

3 Replies

Cape horse mackerelOP
I'm sending a full code example
'use client';
import {SubmitHandler, useForm} from 'react-hook-form';

type FormValues = {
  input: string;
};

const UsersPage = () => {
  const {
    register,
    handleSubmit,
    formState: {errors, isValid},
    watch,
  } = useForm<FormValues>({
    reValidateMode: 'onSubmit',
    defaultValues: {
      input: '',
    },
  });
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);

  const watchForm = watch();
  return (
    <section>
      <h2>Find an user</h2>
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <input
          placeholder="Customer ID or email address"
          {...register('input', {
            required: 'This field is required',
                      })}
        />
        {errors.input?.message}
        <button type="submit" disabled={!isValid}>
          Submit
        </button>
        <pre>{JSON.stringify(watchForm)}</pre>
      </form>
    </section>
  );
};

export default UsersPage;
Cape horse mackerelOP
Don't know if this is a good approach but I've fixed it doing 
const [mounted, setMounted] = useState(false);

useEffect(() => setMounted(true) ,[])

if(!mounted) return null;
Answer
joulev
That means the form is invisible to web crawlers but i suppose that’s good too