react-hook-form未声明formState时阻止重渲染的机制探究

先看你给出的代码示例：

let renderCount = 0;

const App = () => {
  const {register, handleSubmit, /*formState: {errors}*/} = useForm();
  renderCount++;
  //...
}

未声明formState: {errors}时不重渲染的机制 #

React Hook Form的核心设计逻辑是最小化组件重渲染，它把表单的核心状态（比如验证错误、输入值）存储在组件外部的独立容器中，而非组件自身的useState或useReducer状态里。

当你没有显式订阅errors状态时，组件不会和这部分状态建立关联。就算表单提交触发验证、errors发生更新，组件也不会感知到这个变化，自然不会触发重渲染。这是React Hook Form默认性能优化的一部分，避免不必要的渲染开销。

声明formState: {errors}时触发重渲染的机制 #

formState是React Hook Form提供的订阅式状态集合，里面包含了errors、isDirty、isValid等和表单状态相关的属性。当你解构formState: {errors}时，相当于告诉React Hook Form：这个组件需要监听errors状态的变化。

一旦表单提交出现验证错误，errors状态更新，React Hook Form就会通知所有订阅了该状态的组件，触发组件重渲染，这样你就能在组件中获取最新的错误信息，进而做错误提示等操作。

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