Passing a typed path instead of passing names or controls

[Mjtlittle]

Hey team, I am using rhf heavily at work and we are building up a pretty large set of reusable and deep components for our application. In doing so we are finding the typesafety story, more than 1 level deep, to be kind of lacking. Before, we were passing around name prefixes and hoping the corresponding schema matches up deep in the tree.

interface Props {
    name: string
}

function LocationField({ name }: Props) {
    return (<>
        <TextField name={`${name}.state`} />
        <TextField name={`${name}.city`} />
        <TextField name={`${name}.country`} />
    </>)
}

But recently I thought of attaching a type to this value, calling it a Frame. Where the to method below traverses through refining the type. then when the schema or component changes you get a ts error.

interface Props {
    frame: Frame<LocationSchema>
}

function LocationField({ frame }: Props) {
    return (<>
        <TextField frame={frame.to("state")} />
        <TextField frame={frame.to("city")} />
        <TextField frame={frame.to("country")} />
    </>)
}

I have also attached some other helper functions to make adding new components easier...

export class Frame<T> {
  constructor(
    private form: UseFormReturn<any, any, any>,
    public readonly path: string = '',
  ) {}

  to<K extends keyof T>(key: K): Frame<T[K]> { ... }
  asOptional() { return this as Frame<T | undefined>; }
  useController() { return useController<Record<any, T>>({ name: this.path as any }); }
  useFieldArray() { ... }

  useState() { ... }
}

interface Props extends Omit<InputProps, 'value' | 'ref'> {
  frame: Frame<string>;
}

export function ControlledTextInput({ frame, ...otherProps }: Props) {
  const { field } = frame.useController();
  ...
}

Please let me know if this seems like a good idea, given the implementation of rhf. Also if I am missing an easier solution, any advice would be greatly appreciated. Thanks for making a great library!

[ivan-palatov]

I am also trying to make reusable parts of nested forms type-safe. Have been struggling with passing in Control<T> to each form-related component, but it falls apart when it comes to reuseability.

type Foo = {
  bar: string:
}

type Props<T extends Foo> = {
  control: Control<T>;
}

function Component<T extends Foo>({ control }) {
  const bar = useWatch({control, name: "bar" }) // types aren't working
}

And this example doesn't even touch the different name prefixes, which make situation even worse.

So yeah, I am also considering building something similar to your solution right now, thanks for a good starting point 😜.

I could offer you some suggestions based on what I see here:

1. I see that to(path) could only receive keys of T, but why not FieldPath<T> ?

   to<K extends FieldPath<T>>(path: K): Frame<PathValue<T, K>> { /** ... */ }

   I think this way, it would be easier to work with some nested form fields, without the need for frame.to('foo').to('bar').to('baz'), instead just the usual dot notation from rhf frame.to('foo.bar.baz'). Plus, it would work just like an additional feature, which might come in handy later.

2. I don't see register method, but I would recommend you make one for uncontrolled inputs, for perf. optimizations.

3. probably could also add stricter typings for useController, useFieldsArray, using PathValue & PathOfType generics from react-hook-form, that way you would get full typesafety not only outside of form components, but also inside.

As for the drawbacks, I am not sure, seems like a good solution for a complex problem, but you would be creating a new Frame instance every time you use frame.to(), which would trigger a rerender on every owner component update, even if you wrap your components in memo(), you would have to use a custom compareFn, or better yet, create a custom memo wrapper, so that one could easily use additionalCompareFn, something like

const defaultPropsAreEqual = /** react default memo compareFn impl. here */

const formMemo = <TProps extends { frame: Frame }>(
  render: (props: TProps) => React.ReactNode,
  propsAreEqual?: (
    prevProps: Readonly<Omit<TProps, 'frame'>>,
    nextProps: Readonly<Omit<TProps, 'frame'>>
  ) => boolean
): (props: TProps) => React.ReactNode => {
  return memo(render, ({frame: prevFrame, ...prev}, {frame: nextFrame, ...next}) => {
    if (prevFrame.path !== nextFrame.path) {
      return false
    }

    return propsAreEqual ? propsAreEqual(prev, next) : defaultPropsAreEqual(prev, next)
  })
};

For simple applications without the need for nested, reusable forms, I would recommend passing control: Control<T> & name: Path<T> to fields and be done with it. It works flawlessly in our small project, but this week I tried doing it in our main project and it isn't feasible to make it work properly.

[ivan-palatov]

Also, there is a PR for lens solution, which is very similar to yours #12284 , it uses cache object (Map) so that it doesn't require any additional memoization once a Lens for a path has been created.