useEffect optimized watch

[AndrewBoklashko]

Hello
I've been recently migrating a project with dozens complex froms from formik to RHF. I am very satisfied with the results, the responsiveness is much higher now and I also like the TypeScript safety that library provides.

One of the hardest issues was to make RHF watch to behave like formik values, i.e. make them useEffect optimized since a lot of code was relying on that behavior. For example, I have multiple forms which act as a filter for data tables, anytime the filter field changes the data table source must be refetched. When trying to implement that with const filter = watch() and then putting filter into useEffect which represents the data source I get infinite loops.

So what I ended up doing is to wrap RHF watch with a decorator and leverage caching + deep equality comparison to return previous value reference if new value is structurally the same:

import { useCallback, useRef } from "react";
import {
  FieldValues,
  UseFormWatch,
  FieldPath,
  WatchObserver,
} from "react-hook-form";
import isEqual from "lodash/isEqual";

const tryGetFromCache = (
  cache: Map<string, unknown>,
  key: string,
  watchValue: unknown
) => {
  const cached = cache.get(key);

  if (typeof cached === "undefined") {
    cache.set(key, watchValue);
    return watchValue;
  }

  if (isEqual(watchValue, cached)) {
    return cached;
  }

  cache.set(key, watchValue);
  return watchValue;
};

export const useCachedWatch = <TValues extends FieldValues>(
  watch: UseFormWatch<TValues>
) => {
  const cache = useRef(new Map<string, unknown>());
  const cachedWatch = useCallback(
    (
      name?:
        | FieldPath<TValues>
        | ReadonlyArray<FieldPath<TValues>>
        | WatchObserver<TValues>,
      defaultValue?: any
    ) => {
      if (typeof name === "undefined") {
        return tryGetFromCache(cache.current, "__glb", watch());
      }

      if (typeof name === "string") {
        return tryGetFromCache(
          cache.current,
          `__fld_${name}`,
          watch(name, defaultValue)
        );
      }

      if (Array.isArray(name)) {
        return tryGetFromCache(
          cache.current,
          `__arr_${name.join()}`,
          watch(name, defaultValue)
        );
      }

      if (typeof name === "function") {
        return watch(name);
      }

      throw new Error("Unsupported watch overload");
    },
    [watch]
  );

  return cachedWatch as UseFormWatch<TValues>;
};

From my initial testing such approach works very well for me and I am able to avoid infinite loops. The point of this discussion is:

• get evaluation from RHF team on the pros/cons of this approach from the perspective of how RHF works, are there any edge cases when this wouldn't work
• I would really like if someone could explain me why RHF is doing a clone of value in watch API, that's not clear to me at all
• discuss if that is something that can be added into a library, giving user a setting watchMode: "render-optimized" | "effect-optimized"