useEffect not triggered on react hook form change

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: "[email protected]",
          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