Escribí un enlace personalizado (lo llamo useChanges) en React que se espera que realice un seguimiento de los objetos modificados. Toma tres parámetros (matriz inicial de objetos cambiados, matriz original de objetos, una función selectora que selecciona una propiedad del objeto que tiene un valor único entre los otros objetos).
Vea el ejemplo de trabajo aquí: https://codesandbox.io/s/compassionate-murdock-ey8zx
La forma en que se usa el enlace personalizado es con un formulario que tiene una entrada y un área de texto (componentes controlados). Cada vez que un usuario escribe en una entrada o en un área de texto, los valores se almacenan en el estado. Además, utilizo la función de eliminación de rebotes para todo el estado del formulario y, cada vez que cambian los valores de los formularios bloqueados, tengo un bloque de código dentro de useEffect que se ejecuta. En este bloque de código, llamo a una función applyChanges que proporciona el enlace personalizado.
El problema es cuando incluyo todas las dependencias sugeridas en useEffect. Por el momento solo he debouncedValues en la matriz de dependencia. Sin embargo, ESLint me dice que también incluya la función getChangedItemAndOriginalItem y la función applyChanges. Si los incluyo, da como resultado un bucle infinito y el componente nunca deja de volver a renderizarse.
Intenté memorizar ambas funciones en el enlace personalizado, pero no sirvió de nada ya que la regla ESLint se quejó de la falta de dependencias en el enlace personalizado.
¿Hay alguna manera de cambiar mi código de manera que pueda hacer feliz a ESLint?