useDebounceTextInput

Questo hook permette di avere un campo di testo editabile dall’utente con un debounce di N millisecondi dopo ogni input
Utile per creare campi di ricerca senza eseguire troppe chiamate alle API.

Configurazione default

Di default il debounce in millisecondi è di 250

Firma della funzione

function useDebounceTextInput<T>(defaultValue: T, debounce_ms?: number): UseDebounceTextInputReturnType<T>

T: il tipo generico da applicare allo stato
defaultValue : valore iniziale dello stato in debounce
debounce_ms: tempo di debounce per il set dello stato dopo ogni input (default = 250)

Tipo di ritorno

type UseDebounceTextInputReturnType<T> = [
  inputRef: React.Ref<any>,
  handleInput: (event: React.BaseSyntheticEvent) => void,
  debouncedState: T,
  setInputManually: (value: T) => void,
  cancel: () => void,
  isReady: () => boolean | null
]

Funzionamento

const [inputRef, handleInput, debouncedTestoFiltroRicercaParametri, setDebouncedTestoFiltroRicercaParametri, cancel, isReady] = useDebounceTextInput<string>("")

inputRef: ref da passare al campo di testo
handleInput: funzione da passare a evento onChange del campo di testo
debouncedTestoFiltroRicercaParametri: lo stato in debounce, contiene il valore del campo di testo
setDebouncedTestoFiltroRicercaParametri: cambia lo stato in debounce e il contenuto del campo di testo
cancel: annulla il debounce e ferma l’esecuzione del set dello stato se il debounce è in corso
isReady: determina lo stato del debounce (true: debounce in corso, false: debounce non ancora partito, null: debounce inattivo)

Di fatto quello che fa l’hook è leggere il valore in input dal campo di testo tramite la ref e chiamare una funzione in debounce che dopo un tot di ms (default = 250) imposta l’ultimo valore letto nello stato interno dell’hook che viene poi ritornato.

Esempio di un campo di testo in debounce


  const [inputRef, handleInput, debouncedValoreCampoTesto, setDebouncedValoreCampoTesto, cancel, isReady] = useDebounceTextInput<string>("",/* inserisci ms debounce custom o rimuovimi*/)

  useEffect(() => {
    // debounce di default: 250 ms
    console.log(debouncedValoreCampoTesto)
  },[debouncedValoreCampoTesto])

  <FormTextInput ref={inputRef} onChange={handleInput}>/>

NB: funziona solo con il componente FormTextInput in libreria tsuite-common. In alternativa per farlo funzionare con altri campi di testo bisogna assicursi che la ref venga passata correttamente al campo di input altrimenti questo hook non funzionerà

useToastNotification useStandardApiV2