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>
  );
}

CodePudding user response：

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

CodePudding user response：

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: "[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")}
              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>
  );
}