I have a form with no fields but when i did submit it renders twice

[alexk345]

``I have a form with no fields but when i did submit it renders twice. I think user should decide when to render.
I always watch that console for errors but because it render i have two pages of console.log statement because of this. Too much annoyance.

I want to handle error and clearing myself. I dont hookform do anything unless i tell it to do.

I read all the examples and i have not found one. Rendering is not issue but i have big form with console.log on every field. I wanted to observer what server send me when i do handleSumbit ..instead my console filled with all existing log statement because its rendering twice without any fields in the form.

it can update state but use it with useRef not useState. I want to clear error myself. I mean you should let user to do anything and default can be done hookform.

function Form(props) {
const methods = useFormContext();
const [mounted, setMounted] = React.useState(false);
const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
const submit = async (event) => {
let hasError = false;
let type = '';
await control.handleSubmit(async (data) => {
const formData = new FormData();
let formDataJson = '';
try {
formDataJson = JSON.stringify(data);
}
catch (_a) { }
for (const name of control._names.mount) {
formData.append(name, get(data, name));
}
if (onSubmit) {
await onSubmit({
data,
event,
method,
formData,
formDataJson,
});
}
if (action) {
try {
const shouldStringifySubmissionData = [
headers && headers['Content-Type'],
encType,
].some((value) => value && value.includes('json'));
const response = await fetch(action, {
method,
headers: {
...headers,
...(encType ? { 'Content-Type': encType } : {}),
},
body: shouldStringifySubmissionData ? formDataJson : formData,
});
if (response &&
(validateStatus
? !validateStatus(response.status)
: response.status < 200 || response.status >= 300)) {
hasError = true;
onError && onError({ response });
type = String(response.status);
}
else {
onSuccess && onSuccess({ response });
}
}
catch (error) {
hasError = true;
onError && onError({ error });
}
}
})(event);
if (hasError && props.control) {
props.control._subjects.state.next({
isSubmitSuccessful: false,
});
props.control.setError('root.server', {
type,
});
}
};
React.useEffect(() => {
setMounted(true);
}, []);
return render ? (React.createElement(React.Fragment, null, render({
submit,
}))) : (React.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
}

==============================================================================

My only solution now is i have to do handlesubmit myself instead of letting hookform does it. Hookform should not render anything on its own if there is no ERROR

[alexk345]

I solved it by doing my own handlesubmit which get form data