issue: When React frequently update value of the input it doesn't get updated in the form state

[isBatak]

Version Number

7.52.2

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-hidden-input-ws-wmvchr

Steps to reproduce

1. Go to the sandbox link
2. Click on the "Example 2" radio
3. Click on the submit
4. See in the console that field values are not updated

{ 
label: "Example 2"
price1: "0.0 undefined"
price2: "0.00 undefined"
price3: "0.000 undefined"
}

Expected behaviour

{ 
label: "Example 2"
price1: "0.0 Example 2"
price2: "0.00 Example 2"
price3: "0.000 Example 2"
}

I need to frequently update input fields with computed values that come from the websocket. Data is coming from the websocket and is computed based on some other field selection. I tried using useEffect and setState, but then I get this React error.

I also tried using the register function value option, but it didn't helped. Maybe I misunderstood the docs.

Set up value for the registered input. This prop should be utilised inside useEffect or invoke once, each re-run will update or overwrite the input value which you have supplied.

Also, I want to use the WEB platform and use input fields instead of imperatively setting state, so I can more easily migrate to React form actions in the future.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[isBatak]

@bluebill1049 I noticed you added the "status: need more detail" label.
Is there any additional information or clarification you need from me?
This issue is currently a blocker for me, so I would really appreciate any help you can provide.

[bluebill1049]

dead csb

[isBatak]

@bluebill1049 forgot to make it public 🤦‍♂️ please check it now

[isBatak]

@bluebill1049, could you please take a quick look at this issue and share your opinion on the usage? I might be doing something wrong, or there could be a better solution that I'm not aware of. Thanks!

[bluebill1049]

Doesn't work as what you supplied example, because register onChange never gets updated, what I would suggest to use setValue or reset API instead.

[isBatak]

With setValue I’m getting this error:
“Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.”

Wouldn’t reset also reset the radio input?

[isBatak]

I did this in the end

export default function App() {
  const { register, handleSubmit, watch } = useForm();
  const realTimeValues = useRealTimeValues(watch("label"));

  const onSubmit: SubmitHandler<{}> = (data, event) => {
    // collect the values form the hidden inputs
    const hiddenFiledValues = Array.from(event?.target.elements).reduce<
      Record<string, string>
    >((acc, element) => {
      if (element instanceof HTMLInputElement && element.type === "hidden") {
        acc[element.name] = element.value;
      }

      return acc;
    }, {});

    console.log("Form Data:", data);
    console.log("Hidden field values:", hiddenFiledValues);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>
          <input type="radio" value="Example 1" {...register("label")} />
          Example 1
        </label>
      </div>
      <div>
        <label>
          <input type="radio" value="Example 2" {...register("label")} />
          Example 2
        </label>
      </div>
      <div>
        <label>
          <input type="radio" value="Example 3" {...register("label")} />
          Example 3
        </label>
      </div>

      {(Object.keys(realTimeValues) as Array<keyof typeof realTimeValues>).map(
        (key) => (
          <div>
            <input key={key} value={realTimeValues[key]} hidden />
          </div>
        )
      )}

      <button type="submit">Submit</button>
    </form>
  );
}