React hook form Rendering too many times - reactjs

Question

I am trying to do something like this.
When user Click on Edit Button then Form fields will appear and user can edit the data. otherwise user can only view the data.
I facing the trouble, when user don't want to edit the form and click on cancel button then page start rendering as many times as the page have total form fields.
On my original form I have 80+ form fields and when user click on cancel button page becomes very slow.
When I remove
ref={register}
from my page then form don't render to many times, but form does not submit with the data.
Is there any way to stop extra rendering?
Here is my code and logic.
Thanks for your attention.
import React, { useState } from "react";
import { useForm } from "react-hook-form";
function Test() {
const { register, handleSubmit } = useForm();
const [edit, setEdit] = useState(false);
const onSubmit = (data) => {
console.log(data);
};
return (
<div className="App">
<header className="App-header">
{console.log("I am redering.")}
<form onSubmit={handleSubmit(onSubmit)}>
<a
href=""
onClick={(e) => {
setEdit(!edit);
e.preventDefault();
}}
>
{edit ? "Cancel" : "Edit"}
</a>
{edit && (
<p>
<input
type="text"
name="email"
ref={register}
placeholder="Email"
/>
</p>
)}
{edit && (
<p>
<input
type="text"
name="firstname"
ref={register}
placeholder="First Name"
/>
</p>
)}
{edit && (
<p>
<input
type="text"
name="lastname"
ref={register}
placeholder="Last Name"
/>
</p>
)}
{edit && (
<>
<input
type="checkbox"
name="contact[]"
id="contact-one"
value="1"
ref={register}
/>
<label htmlFor="contact-one">One</label>
</>
)}
{edit && (
<>
<input
type="checkbox"
name="contact[]"
id="contact-two"
value="2"
ref={register}
/>
<label htmlFor="contact-two">Two</label>
</>
)}
{edit && <button type="submit">Submit</button>}
{edit === false && (
<>
<p>{`My First Name`}</p>
<p>{`My Last Name`}</p>
<p>{`My Email address`}</p>
<p>{`My Contacts`}</p>
</>
)}
</form>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default Test;

Answer 1

<form onSubmit={handleSubmit(onSubmit)}>
This is a function call, which means this gets called immediatelt the form is created on the DOM, your event listeners need to take a reference to the function which will then get called when the event occurs, to do that you wrap this function call in another anonymous function. Then the function will get called when the submit event occurs. So you need to do this
<form onSubmit={()=>{handleSubmit(onSubmit)}}>
Also since this is a submit event, you might want to stop the default behaviour which refreshes the page. Like this
<form onSubmit={(ev)=>{
ev.preventDefault()
handleSubmit(onSubmit)}}>
Update
I did not look at the JSX properly. There are a few things you are probably doing wrong
using ref to get input values rather than state
when taking in any kind of input you want to convert those fields into control components Officila docs on controlled components
I suggest you understand this and state first, that will help you a lot. React docs still uses class components in example code but simply use use state instead of this.state for state varibales