Compatibility with Lenses

[aspirisen]

Hello 👋

While working on the Lenses project, I’ve encountered several challenges that would benefit from improvements in the core react-hook-form library.

1. Allow Control to Accept Generic Value Types

Currently, the Control type requires both a value type and a path. This presents a problem when we don't have a specific path, which is often the case when working with generic or path-agnostic components.

Problem

We’d like to support simple usage like:

const { register } = useForm<string>();
return <input {...register()} />;

But Control<T, Path> requires a valid path type—so passing string or array causes type errors. To work around this, we created a shim:

Control<
  HookFormControlShim<{ formValues: { etc: {} } }>,
  '__DO_NOT_USE_HOOK_FORM_CONTROL_SHIM__'
>

How the Shim Works

• HookFormControlShim is a helper type that wraps the actual type you want to work with in a known structure.
• __DO_NOT_USE_HOOK_FORM_CONTROL_SHIM__ is a constant string literal used as a dummy path. It always matches the single known key inside the shim object.

Here’s a simplified version:

type HookFormControlShim<T> = { __DO_NOT_USE_HOOK_FORM_CONTROL_SHIM__: T };

This allows us to "trick" the type system into accepting any generic type by wrapping it in a known object shape with a fixed path key. Then, immediately, we unwrap it when passing the path to the form methods.

Suggestion

Allow the Control<T> type to accept arbitrary generic types without constraints and requiring a valid Path<T> up front. This would eliminate the need for HookFormControlShim and enable straightforward usage in path-agnostic code.

---

2. Support Transformed Controllers

Lenses uses a reflect method that can remap or restructure values, requiring transformations during value access and update.

Currently:

• I created a wrapper around useFieldArray that performs value transformation.
• The logic is centralized in LensCore.ts, where getter and setter functions are defined.
• These are passed via an interop method into the RHF overridden hook.

Suggestion

Introduce a native transformation API like:

const transformedControl = control.transform(getter, setter);

This would return a new Control instance with automatic remapping on read/write

---

3. Make useController and useWatch Reactive to Name Changes

Hooks like useController and useWatch don’t currently respond to changes in the name parameter.

In Lenses, reusable components are designed to dynamically bind to different paths—so having static name tracking makes this difficult.

Suggestion

Enable useController and useWatch to reactively respond to changes in the name prop to support dynamic bindings.

---

4. Subscribe to Unregistered Fields

Lenses implements internal caching, which makes it important to track when a field is unregistered.

Currently, I use a manual workaround to detect field unregistration

[aspirisen]

@bluebill1049 what do you think?

[bluebill1049]

3. Make useController and useWatch Reactive to Name Changes

Yes, I can work on that later.

4. Subscribe to Unregistered Fields

Yes, I can work on that later.

[aspirisen]

I've created an issue to make it possible reference it in other issues or PRs #13009