如何解决react-hook-form的无限重渲染问题？

核心原因分析 #

虽然你没直接使用useState或useEffect，但react-hook-form内部依赖状态管理，以下是常见触发无限重渲染的场景：

1. 每次渲染重新创建验证规则对象 #

如果你的register配置中，rules是在组件渲染时动态创建的对象（比如直接写{ required: true, minLength: 5 }而未缓存），react-hook-form会判定规则发生变化，触发字段重新注册，进而引发无限重渲染循环。

修复方案：
用useMemo缓存验证规则对象，确保每次渲染时引用一致：

import { useMemo } from 'react';

const signupRules = useMemo(() => ({
  username: {
    required: '用户名不能为空',
    minLength: {
      value: 3,
      message: '用户名至少3个字符'
    }
  },
  // 其他字段规则
}), []);

// 注册字段时使用缓存后的规则
const { register } = useForm({
  defaultValues: { /* 默认值 */ },
  mode: 'onChange'
});

2. 渲染阶段调用状态更新方法 #

如果在组件渲染时直接调用setValue、trigger等react-hook-form的方法，会触发状态更新，导致组件重新渲染，进而再次调用这些方法形成循环。

修复方案：
确保这类方法只在事件处理函数（如onSubmit、onChange）或useEffect中调用，不要直接写在组件渲染代码里：

// 错误示例：直接在渲染阶段调用
setValue('username', 'test');

// 正确示例：放在事件或effect里
useEffect(() => {
  setValue('username', 'default');
}, []);

const handleSubmit = (data) => {
  // 处理提交逻辑
};

3. 自定义验证函数引用不稳定 #

如果自定义验证函数是在组件内部定义的（每次渲染都会重新创建），react-hook-form会认为验证规则变化，频繁触发验证，导致重渲染循环。

修复方案：
用useCallback缓存自定义验证函数：

const validateUsername = useCallback(async (value) => {
  // 自定义验证逻辑，比如检查用户名是否已存在
  const isExist = await checkUsernameExists(value);
  return isExist ? '用户名已存在' : true;
}, []);

const signupRules = useMemo(() => ({
  username: {
    required: '用户名不能为空',
    validate: validateUsername
  }
}), [validateUsername]);

4. 表单组件的props引用不稳定 #

如果父组件传递给表单组件的props每次都是新的引用（比如传递对象或数组时未缓存），会导致表单组件频繁重渲染，进而触发react-hook-form内部的状态更新循环。

修复方案：
用useMemo缓存传递给子组件的复杂props，或者拆解为基本类型props：

// 父组件中缓存props
const formProps = useMemo(() => ({
  defaultValues: { username: '', email: '' },
  onSubmit: handleSubmit
}), [handleSubmit]);

// 传递给子组件
<SignupForm {...formProps} />

快速排查步骤 #

1. 检查useForm的配置是否每次渲染都创建新对象，比如defaultValues如果是动态生成的，用useMemo缓存。
2. 查看所有register调用的规则参数，确保没有动态创建的对象。
3. 检查是否有在组件顶层（渲染阶段）调用setValue、trigger等方法。
4. 用React DevTools的Profiler工具查看组件重渲染的触发原因，定位到具体字段或方法。

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