使用React-hook-form useFieldArray时，如何避免删除项触发大量重渲染？

场景描述 #

我使用react-hook-form的useForm管理表单，对应的数据结构如下：

{
  Field1: "some value",
  Field2: "some value",
  // ...其他字段
  Lines: [
    { LineId: "unique-id", /* 其他多个字段 */ },
    // ...更多行数据
  ]
}

表单支持复制行、添加空行、删除行操作，因此用useFieldArray钩子管理Lines数组。

目前循环useFieldArray返回的字段创建Line组件时，必须传递数组索引——哪怕useFieldArray自带id、底层数据也有唯一的LineId。原因是Line组件中大量使用的getValue、setValue，以及Controller组件，都需要通过FieldPath定位数组中的字段：

• 下拉框设置同行其他字段默认值示例：

setValue(`Lines.${index}.${fieldName}`, defaultValue)

• Controller组件的name属性示例：

<Controller
  name={`Lines.${index}.${fieldName}`}
  // 其他配置项
/>

问题 #

删除某一行时，所有行及字段都会触发重渲染。如果表单包含数百行，每行还有10+带验证规则的字段，性能问题会非常突出。

我知道可以通过标记行“已删除”而非从fieldArray中移除的方式规避，但认为react-hook-form应该有更原生的优化方案，想请教有没有更优的解决办法？

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