Alternate to React hook Form useWatch

For my React app, I am consuming React Hook Form (which is on on older version v5 which does not have useWatch)

So, I am currently using watch() to watch my input fields and update my global state on every key input.

Since I do not have an option to upgrade my underlying React Hook Form version, is there any alternate way to optimize the use of watch() for input field entry ?

UPDATED

const inputField = watch(field.id);

const updateGlobalState = _.debounce(() => {
	handleInputChange(field.id, inputField); // This updates the global state (context api obj) in parent component and I update my "defaultValues" passed to the form with the updated value
}, 300);

useMemo(() => {
	setValue(field.id, props?.defaultValues?.[field.id]); // I need this, since there can be use cases where updates in some other field say dropdown causes me to empty out this text field id.
}, [props?.defaultValues]);

useMemo(() => {
		updateGlobalState();	
}, [inputField]);

Two important points from above;

1. Call to handleInputChange updates my global state ({field1: 'A', field2: 'B'}) and I update my "defaultValues" passed to the form with the updated value
2. I use setValue, since there can be use cases where updates in some other field say a dropdown causes me to empty out this text field id.

Yes, there are a few ways to optimize the use of watch() in React Hook Form v5.

1. Debounce the input: Debouncing is a technique where you delay processing the input until the user has stopped typing for a certain amount of time. This can be done using lodash's debounce function or a similar implementation. This way, you're not updating the global state on every keystroke, but rather after the user has stopped typing for a certain amount of time.

2. Use getValues(field) instead of watch(field) where possible: If you only need the value of a field at a specific point in time (like when the form is submitted), you can use getValues(field) instead of watch(field). getValues(field) doesn't cause a re-render when the field changes, so it's more efficient if you don't need to keep track of the field's value in real-time.

import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import _ from 'lodash';

function MyForm() {
  const { register, watch, getValues } = useForm();
  const firstName = watch('firstName');
  const lastName = watch('lastName');

  // Debounce the function that updates the global state
  const updateGlobalState = _.debounce((firstName, lastName) => {
    // Update the global state here
  }, 300);

  useEffect(() => {
    // Only update the global state if both fields are filled out
    if (firstName && lastName) {
      updateGlobalState(firstName, lastName);
    }
  }, [firstName, lastName]);

  return (
    <form>
      <input name="firstName" ref={register} />
      <input name="lastName" ref={register} />
    </form>
  );
}