I don't know why useForm make component to render twice in react+ts+vite project

[webdev3614]

I created new project with yarn vite create and I replaced default code with following example code.

import { useForm } from 'react-hook-form';

function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
console.log("Hello from React Hook Form");
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input {...register('firstName')} />
<input {...register('lastName', { required: true })} />
{errors.lastName &&

Last name is required.

}
<input {...register('age', { pattern: /\d+/ })} />
{errors.age &&

Please enter number for age.

}


);
}

export default App

[evgeniyworkbel]

Hi. Send a sandbox

[webdev3614]

I fixed the issue using react context.
But If I use useForm directly, React Compoenent is rendered twice.

[tony-hsueh]

Which version of React are you using? If you're using React 18 or above, React's StrictMode will intentionally trigger renders twice in development mode. This is expected behavior and is not related to React Hook Form.

Hope that helps!