fix(perf): avoid generating path lookup too often #4382

Author: logaretm

.changeset/sixty-bees-mix.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+feat(perf): improve performance setFieldError and setFieldValue closes #4382

packages/vee-validate/src/useForm.ts

@@ -65,6 +65,7 @@ import {
   normalizeErrorItem,
   normalizeEventValue,
   omit,
+  debounceNextTick,
 } from './utils';
 import { FormContextKey } from './symbols';
 import { validateTypedSchema, validateObjectSchema } from './validate';
@@ -136,8 +137,10 @@ export function useForm<
 
   const extraErrorsBag: Ref<FormErrorBag<TValues>> = ref({});
 
-  const pathStateLookup = computed<Record<string, PathState>>(() => {
-    return pathStates.value.reduce(
+  const pathStateLookup = ref<Record<string, PathState>>({});
+
+  const rebuildPathLookup = debounceNextTick(() => {
+    pathStateLookup.value = pathStates.value.reduce(
       (names, state) => {
         names[normalizeFormPath(toValue(state.path))] = state;
 
@@ -314,6 +317,8 @@ export function useForm<
     }) as PathState<TValue>;
 
     pathStates.value.push(state);
+    pathStateLookup.value[pathValue] = state;
+    rebuildPathLookup();
 
     if (errors.value[pathValue] && !initialErrors[pathValue]) {
       nextTick(() => {
@@ -324,7 +329,9 @@ export function useForm<
     // Handles when a path changes
     if (isRef(path)) {
       watch(path, newPath => {
+        rebuildPathLookup();
         const nextValue = deepCopy(currentValue.value);
+        pathStateLookup.value[newPath] = state;
 
         nextTick(() => {
           setInPath(formValues, newPath, nextValue);
@@ -547,6 +554,8 @@ export function useForm<
     if (!pathState.multiple || pathState.fieldsCount <= 0) {
       pathStates.value.splice(idx, 1);
       unsetInitialValue(path);
+      rebuildPathLookup();
+      delete pathStateLookup.value[path];
     }
   }
 

packages/vee-validate/src/utils/common.ts

@@ -9,11 +9,12 @@ import {
   warn as vueWarning,
   watch,
   MaybeRef,
+  nextTick,
 } from 'vue';
 import { klona as deepCopy } from 'klona/full';
 import { isIndex, isNullOrUndefined, isObject, toNumber } from '../../../shared';
 import { isContainerValue, isEmptyContainer, isEqual, isNotNestedPath } from './assertions';
-import { GenericObject } from '../types';
+import { GenericObject, MaybePromise } from '../types';
 import { FormContextKey, FieldContextKey } from '../symbols';
 
 function cleanupNonNestedPath(path: string) {
@@ -327,3 +328,33 @@ export function omit<TObj extends GenericObject>(obj: TObj, keys: (keyof Generic
 
   return target;
 }
+
+export function debounceNextTick<
+  TFunction extends (...args: any[]) => MaybePromise<any>,
+  TResult = ReturnType<TFunction>,
+>(inner: TFunction): (...args: Parameters<TFunction>) => Promise<TResult> {
+  let lastTick: Promise<any> | null = null;
+  let resolves: any[] = [];
+
+  return function (...args: Parameters<TFunction>) {
+    // Run the function after a certain amount of time
+
+    const thisTick = nextTick(() => {
+      if (lastTick !== thisTick) {
+        return;
+      }
+
+      // Get the result of the inner function, then apply it to the resolve function of
+      // each promise that has been created since the last time the inner function was run
+      const result = inner(...(args as any));
+
+      resolves.forEach(r => r(result));
+      resolves = [];
+      lastTick = null;
+    });
+
+    lastTick = thisTick;
+
+    return new Promise<TResult>(resolve => resolves.push(resolve));
+  };
+}