React Hook Form v5无useWatch，如何优化watch()监听输入的性能？

针对你在React Hook Form v5中遇到的watch()监听输入引发的频繁更新问题，结合你的业务场景，给出以下优化方案：

1. 用useEffect替代useMemo处理防抖更新 #

你当前用useMemo触发防抖函数，不符合useMemo的设计初衷（它用于缓存计算值而非执行副作用）。换成useEffect能更合理地处理状态更新的副作用，同时清理防抖定时器避免内存泄漏。

2. 优化setValue的依赖项 #

原代码依赖整个props.defaultValues对象，会导致其他字段变化时也触发当前字段的setValue。改为监听目标字段的具体值，减少不必要的更新。

3. 缓存防抖函数避免重复创建 #

用useCallback包裹防抖函数，确保组件重渲染时不会重复创建新的防抖实例，保证防抖逻辑的一致性。

修改后的完整代码：

import { useCallback, useEffect } from 'react';
import _ from 'lodash';

// ... 你的组件逻辑
const inputField = watch(field.id);
const targetDefaultValue = props?.defaultValues?.[field.id];

// 用useCallback缓存防抖函数，避免每次重渲染创建新实例
const updateGlobalState = useCallback(
  _.debounce((fieldId, value) => {
    handleInputChange(fieldId, value);
  }, 300),
  [handleInputChange]
);

// 监听输入字段变化，触发防抖更新
useEffect(() => {
  if (inputField !== undefined) {
    updateGlobalState(field.id, inputField);
  }
  // 清理防抖定时器，防止组件卸载后仍执行
  return () => updateGlobalState.cancel();
}, [inputField, updateGlobalState, field.id]);

// 监听目标字段的默认值变化，更新表单值
useEffect(() => {
  setValue(field.id, targetDefaultValue);
}, [targetDefaultValue, setValue, field.id]);

优化说明： #

• useEffect替代useMemo：useEffect专门用于处理副作用（比如更新全局状态），语义更清晰，还能通过返回清理函数取消未执行的防抖任务，避免内存泄漏。
• 缩小依赖范围：将依赖从整个props.defaultValues改为targetDefaultValue，只有当前字段的默认值真正变化时才执行setValue，减少不必要的表单更新。
• useCallback缓存防抖函数：避免组件重渲染时重复创建防抖函数实例，保证防抖逻辑稳定。

内容的提问来源于stack exchange，提问作者copenndthagen