Cancel old debounced handlers when new one is sent in props

src/components/inputs/Slider/Slider.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useLayoutEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { StyledSlider, StyledTextField, FormControl, FormHelperText } from './SliderStyles'
-import { debounce } from 'lodash'
 import { SliderColor, SliderProps } from './types'
+import useDebouncedCallback from 'hooks/useDebouncedCallback'
 
 /**
  * Sliders allow users to make selections from a range of values.
@@ -50,8 +50,7 @@ const Slider: React.FC<SliderProps> = ({
     [min, max, onSliderChange]
   )
 
-  // we need to disable this warning since the useCallback hook is not sure about the dependencies of debounce
-  const debouncedOnChange = useCallback(debounce(onTextChanged, 500), [500, onTextChanged]) //eslint-disable-line react-hooks/exhaustive-deps
+  const debouncedOnChange = useDebouncedCallback(onTextChanged, 500)
 
   return (
     <FormControl fullWidth={fullWidth} error={error} required={required}>

src/components/inputs/TextField/TextField.tsx

@@ -7,8 +7,8 @@ import IconButton from '@mui/material/IconButton'
 import CloseIcon from '@mui/icons-material/Close'
 import { is, isNil } from 'ramda'
 import i18n from 'i18next'
-import { debounce } from 'lodash'
 import { AddButtonProps, ClearButtonProps, NumberTextFieldProps, SubtractButtonProps, TextFieldProps } from './types'
+import useDebouncedCallback from 'hooks/useDebouncedCallback'
 
 const NumberTextField = React.forwardRef<HTMLElement, NumberTextFieldProps>(function NumberFormatCustom(props, ref) {
   const {
@@ -155,12 +155,12 @@ const TextField: React.FC<TextFieldProps> = ({
   const isNumeric = receivedIsNumeric || isStepper
 
   const [liveValue, setLiveValue] = useState(value)
+
   useLayoutEffect(() => {
     setLiveValue(value)
   }, [value])
 
-  // we need to disable this warning since the useCallback hook is not sure about the dependencies of debounce
-  const debouncedOnChange = useCallback(disabled ? onChange : debounce(onChange, debounceBy), [debounceBy, onChange]) //eslint-disable-line react-hooks/exhaustive-deps
+  const debouncedOnChange = useDebouncedCallback(onChange, debounceBy)
 
   const handleClearInput = useCallback(() => {
     onChange('')

src/hooks/useDebouncedCallback.ts

@@ -0,0 +1,25 @@
+import { debounce } from 'lodash'
+import { useMemo, useRef } from 'react'
+
+const useDebouncedCallback = (callback: (...args: any[]) => any, debounceBy: number) => {
+  const debouncedCallbackRef = useRef<any>()
+
+  const debouncedCallback = useMemo(() => {
+    if (debounceBy) {
+      if (
+        debouncedCallbackRef.current &&
+        debouncedCallbackRef.current.cancel &&
+        typeof debouncedCallbackRef.current.cancel === 'function'
+      )
+        debouncedCallbackRef.current.cancel()
+      const debounced = debounce(callback, debounceBy)
+      debouncedCallbackRef.current = debounced
+      return debounced
+    }
+    return callback
+  }, [callback, debounceBy])
+
+  return debouncedCallback
+}
+
+export default useDebouncedCallback