useEffect not triggered on react hook form change - reactjs

Question

looking to use react hook form with useEffect to get changes in real time (as the user is filling out the form), is there a reason why useEffect isn't triggered here and if so is there a way to trigger it whenever the form data changes? example here is from https://remotestack.io/react-hook-form-set-update-form-values-with-useeffect-hook/
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
export default function SimpleForm() {
const { register, handleSubmit, reset, formState } = useForm();
const [student, initStudent] = useState(null);
useEffect(() => {
setTimeout(
() =>
initStudent({
name: "Little Johnny",
email: "lil#johnny.com",
grade: "3rd",
}),
1200
);
}, []);
useEffect(() => {
console.log("updating.,..");
reset(student);
}, [reset, student]);
function onFormSubmit(dataRes) {
console.log(dataRes);
return false;
}
return (
<div>
<h2 className="mb-3">
React Initiate Form Values in useEffect Hook Example
</h2>
{student && (
<form onSubmit={handleSubmit(onFormSubmit)}>
<div className="form-group mb-3">
<label>Name</label>
<input
type="text"
name="name"
{...register("name")}
className="form-control"
/>
</div>
<div className="form-group mb-3">
<label>Email</label>
<input
type="email"
name="email"
{...register("email")}
className="form-control"
/>
</div>
<div className="form-group mb-3">
<label>Grade</label>
<input
type="text"
name="grade"
{...register("grade")}
className="form-control"
/>
</div>
<button type="submit" className="btn btn-dark">
Send
</button>
</form>
)}
{!student && (
<div className="text-center p-3">
<span className="spinner-border spinner-border-sm align-center"></span>
</div>
)}
</div>
);
}

Answer 1

You can use watch mode of react hook form to get every change.
const { register, handleSubmit, reset, formState, watch } = useForm();
useEffect(() => {
watch((value, { name, type }) => console.log(value, name, type));
}, [watch]);
Read more about watch mode form here

Answer 2

You need to trigger a state change whenever your input field value changes, and you do so using onClick event attribute like so:
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
export default function SimpleForm() {
const { register, handleSubmit, reset, formState } = useForm();
const [student, initStudent] = useState(null);
useEffect(() => {
setTimeout(
() =>
initStudent({
name: "Little Johnny",
email: "lil#johnny.com",
grade: "3rd",
}),
1200
);
}, []);
useEffect(() => {
console.log("updating.,..");
reset(student);
}, [reset, student]);
function onFormSubmit(dataRes) {
console.log(dataRes);
return false;
}
return (
<div>
<h2 className="mb-3">
React Initiate Form Values in useEffect Hook Example
</h2>
{student && (
<form onSubmit={handleSubmit(onFormSubmit)}>
<div className="form-group mb-3">
<label>Name</label>
<input
type="text"
name="name"
{...register("name")}
onClick={(e)=>initStudent({...student, name: e.target.value})}
className="form-control"
/>
</div>
<div className="form-group mb-3">
<label>Email</label>
<input
type="email"
name="email"
{...register("email")}
onClick={(e)=>initStudent({...student, email: e.target.value})}
className="form-control"
/>
</div>
<div className="form-group mb-3">
<label>Grade</label>
<input
type="text"
name="grade"
{...register("grade")}
onClick={(e)=>initStudent({...student, grade: e.target.value})}
className="form-control"
/>
</div>
<button type="submit" className="btn btn-dark">
Send
</button>
</form>
)}
{!student && (
<div className="text-center p-3">
<span className="spinner-border spinner-border-sm align-center"></span>
</div>
)}
</div>
);
}