I wrote a custom hook (I call it useChanges) in React that is expected to keep track of changed objects. It takes three parameters (initial array of changed objects, original array of objects, a selector function that selects a property of the object that has a unique value among the other objects).

See the working example here: https://codesandbox.io/s/compassionate-murdock-ey8zx

The way the custom hook is used is with a form that has one input and one textarea (controlled components). Whenever a user types into an input or into a textarea the values are stored in state. Additionally, I use debouncing functionality for the whole form state and whenever debounced form values change I have a block of code inside useEffect that runs. In this block of code I call a function applyChanges which is provided by the custom hook.

The problem is when I include all suggested dependencies to the useEffect. At the moment I have only debouncedValues in the dependency array. However ESLint tells me to also include getChangedItemAndOriginalItem function and applyChanges function. If I include them it results in an infinite loop and the component never stops re-rendering.

I have tried to memoize both the functions in the custom hook but it did not help as ESLint rule complained about missing dependencies in the custom hook.

Is there a way to change my code in a way so that I can make ESLint happy?