<Watch /> Component

[cbetori]

I work with a lot of dynamic forms that need to render specific fields based on other the value of other form fields. I end up using useWatch pretty often and breaking up my form into smaller pieces to reduce the amount of fields that re-render. But from a composability perspective this has been a bit of a pain.

It seems like useWatch could have its own component (similar to useController) that could alleviate this problem. The Watch component would subscribe to field changes and then render a given component. This way you can move the useWatch to lowest component level and prevent larger components from re-rendering. Here is my initial implementation:

type WatchProps<
  TFieldValues extends FieldValues = FieldValues,
  TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
> = {
  render: (
    values: FieldPathValues<TFieldValues, TFieldNames>,
  ) => React.ReactElement;
} & UseWatchProps<TFieldValues, TFieldNames>;


export const Watch = <
  TFieldValues extends FieldValues = FieldValues,
  TFieldNames extends readonly FieldPath<TFieldValues>[] = readonly FieldPath<TFieldValues>[],
>(
  props: WatchProps<TFieldValues, TFieldNames>,
) =>
  props.render(
    useWatch<TFieldValues, TFieldNames>(props),
  );

Example:

 <Watch
    name={['otherField']}
    render={(w) => {
      return (
        <SomeField  value={field.value} label={w === true ? 'Other is true': 'Other is false'} />
      );
    }}
  />

[hyungji-doodlin]

Any updates please?

[Code-Victor]

My exact thought!
I think @tanstack/form has it.

 <form.Subscribe
    selector={(state) => [state.canSubmit, state.isSubmitting]}
    children={([canSubmit, isSubmitting]) => (
            <button type="submit" disabled={!canSubmit}>
                {isSubmitting ? '...' : 'Submit'}
            </button>
         )}
   />

[Code-Victor]

@cbetori, do you have an updated component version?
The types don't work in version ^7.52.1

Thanks

[cbetori]

This is the final result I ended up using in production. Its breaks a bit from what I think a official react-hook-form implementation would implement.

Things I added for my use case:

1. showWhen - function that passes watched values as arguments and expects a boolean return value which will conditionally render
2. children - you can use the render prop as normal or you can pass a function that returns react components ex.

<Watch
   name={['test', 'other']}
   control={control}
   >{(v)=>
     <input />
     <input />
    }
</Watch>

3. This watched values come back as an object rather than an array. I think this makes it much easier to access the values you need. But this breaks away from how useWatch actually works.

Here is the implementation. And to get types working properly you will need to pass in the control argument

import React from 'react';
import {
  DeepPartialSkipArrayKey,
  FieldPath,
  FieldValues,
  Control,
  useWatch,
  FieldPathValue,
} from 'react-hook-form';

export const isFunction = (obj: any): obj is Function =>
  typeof obj === 'function';

export type WatchObject<
  TValues extends FieldValues,
  TNames extends FieldPath<TValues> | readonly FieldPath<TValues>[],
> = TNames extends FieldPath<TValues>[]
  ? { [K in TNames[number]]: FieldPathValue<TValues, K> }
  : TNames extends FieldPath<TValues>
  ? {
      [T in TNames]: FieldPathValue<TValues, TNames>;
    }
  : unknown;

export function useWatchForm<
  TValues extends FieldValues,
  TNames extends FieldPath<TValues>,
>(props: {
  name: TNames;
  defaultValue?: DeepPartialSkipArrayKey<TValues>;
  control: Control<TValues>;
  disabled?: boolean;
  exact?: boolean;
}): WatchObject<TValues, TNames>;
export function useWatchForm<
  TValues extends FieldValues,
  TNames extends readonly FieldPath<TValues>[],
>(props: {
  name: readonly [...TNames];
  defaultValue?: DeepPartialSkipArrayKey<TValues>;
  control: Control<TValues>;
  disabled?: boolean;
  exact?: boolean;
}): WatchObject<TValues, TNames>;
export function useWatchForm<
  TValues extends FieldValues,
  TNames extends readonly FieldPath<TValues>[],
>(props: {
  name: readonly [...TNames];
  defaultValue?: DeepPartialSkipArrayKey<TValues>;
  control: Control<TValues>;
  disabled?: boolean;
  exact?: boolean;
}) {
  const watchedValues = useWatch<TValues, TNames>({
    name: props.name,
    control: props.control,
    defaultValue: props?.defaultValue,
    exact: props?.exact,
    disabled: props?.name ? props?.disabled : true,
  });

  if (typeof props?.name === 'undefined')
    return undefined as any as WatchObject<TValues, TNames>;

  if (typeof props?.name === 'string') {
    return { [props?.name]: watchedValues } as WatchObject<TValues, TNames>;
  }

  const mappedValues = {} as WatchObject<TValues, TNames>;
  for (let i = 0; i < props.name.length; i++) {
    const key = props.name[i] as unknown as keyof typeof mappedValues;
    mappedValues[key] = watchedValues[i];
  }
  return mappedValues;
}

type WatchProps<
  TValues extends FieldValues,
  TNames extends FieldPath<TValues> | readonly FieldPath<TValues>[],
> =
  | {
      render: (values: WatchObject<TValues, TNames>) => React.ReactElement;
      showWhen?: (value: WatchObject<TValues, TNames>) => boolean;
      children?: never;
    }
  | {
      render?: never;
      showWhen?: (value: WatchObject<TValues, TNames>) => boolean;
      children?:
        | React.ReactNode
        | ((values: WatchObject<TValues, TNames>) => React.ReactNode);
    };

export function Watch<
  TValues extends FieldValues,
  TNames extends FieldPath<TValues>,
>(
  props: {
    name: TNames;
    defaultValue?: DeepPartialSkipArrayKey<TValues>;
    control: Control<TValues>;
    disabled?: boolean;
    exact?: boolean;
  } & WatchProps<TValues, TNames>,
): React.ReactElement | React.ReactNode;
export function Watch<
  TValues extends FieldValues,
  TNames extends readonly FieldPath<TValues>[],
>(
  props: {
    name: readonly [...TNames];
    defaultValue?: DeepPartialSkipArrayKey<TValues>;
    control: Control<TValues>;
    disabled?: boolean;
    exact?: boolean;
  } & WatchProps<TValues, TNames>,
): React.ReactElement | React.ReactNode;
export function Watch<
  TValues extends FieldValues,
  TNames extends readonly FieldPath<TValues>[],
>(
  props: {
    name: readonly [...TNames];
    defaultValue?: DeepPartialSkipArrayKey<TValues>;
    control: Control<TValues>;
    disabled?: boolean;
    exact?: boolean;
  } & WatchProps<TValues, TNames>,
) {
  const watchedValues = useWatchForm<TValues, TNames>(props);
  if (props.showWhen && !props.showWhen(watchedValues)) {
    return <></>;
  }

  if (props.render) {
    return props.render(watchedValues);
  }
  return (
    <>
      {isFunction(props.children)
        ? props.children(watchedValues)
        : props.children}
    </>
  );
}

[Code-Victor]

Thanks so much for this