Conform 项目中 useForm 钩子在上下文中的 ID 生成问题解析

在 React 表单验证库 Conform 的使用过程中，开发者可能会遇到一个关于表单 ID 生成的微妙问题。本文将深入分析这个问题及其解决方案。

问题背景

当开发者在 Conform 的 <FormProvider> 上下文内部使用 useForm({}) 钩子时，预期行为是能够获取当前上下文的表单 ID。然而实际上，每次调用都会生成一个新的 ID，这与预期不符。

技术分析

Conform 的设计初衷是让 useForm() 钩子更像 createForm()，主要用于创建表单而非获取上下文信息。在 v1.0.5 版本中，即使用户处于表单上下文内部，调用空参数的 useForm() 也会生成新 ID，这是因为：

1. 默认情况下会调用 React 的 useId() 生成 ID
2. 虽然 useId() 在 React 树结构不变时是稳定的，但这不符合在上下文中获取已有表单 ID 的预期

解决方案

Conform 在 v1.1.0-pre.0 版本中对此进行了改进：

1. 引入了 useFormMetadata() 钩子，现在可以省略 formId 参数
2. 当在表单上下文内部调用时，会自动获取当前表单的元数据
3. 这使得开发者能够更方便地在表单组件树中的任何位置访问表单状态

实际应用

对于需要创建提交按钮组件的场景，现在可以这样实现：

function SubmitButton() {
  const { isSubmitting } = useFormMetadata();
  
  return (
    <button type="submit" disabled={isSubmitting}>
      {isSubmitting ? '提交中...' : '提交'}
    </button>
  );
}

最佳实践

1. 创建表单时使用 useForm(config) 并明确配置
2. 在子组件中需要访问表单状态时使用 useFormMetadata()
3. 避免在子组件中使用空参数的 useForm()
4. 对于表单提交状态，结合 useFormMetadata() 和 useNavigation() 可以实现更精细的控制

这个改进使得 Conform 的表单状态管理更加直观和符合开发者预期，特别是在构建复杂表单组件时。