Deixe seu código React mais bonito e otimize seu tempo com react-use

Hoje fiquei abismado com um pacote relativamente pequeno mas que me pouparia tempo em muitas coisas se eu tivesse visto antes, o react-use.

Entre as diversas ajudas que ele pode trazer, separei uma que iria me ajudar muito um tempo atrás. Imagine fazer um botão de pesquisa, que para não sobrecarregar seu backend e deixar as coisas lentas, você decide esperar 500ms depois que o usuário parou de digitar para realizar a request, só usar o hook useDebounce, veja o exemplo deixado pelo criador:

const Demo = () => {
  const [state, setState] = React.useState('Typing stopped');
  const [val, setVal] = React.useState('');
  const [debouncedValue, setDebouncedValue] = React.useState('');

  const [, cancel] = useDebounce(
    () => {
      setState('Typing stopped');
      setDebouncedValue(val);
    },
    2000,
    [val]
  );

  return (
    <div>
      <input
        type="text"
        value={val}
        placeholder="Debounced input"
        onChange={({ currentTarget }) => {
          setState('Waiting for typing to stop...');
          setVal(currentTarget.value);
        }}
      />
      <div>{state}</div>
      <div>
        Debounced value: {debouncedValue}
        <button onClick={cancel}>Cancel debounce</button>
      </div>
    </div>
  );
};

Isso automaticamente fará com que o debouncedValue tenha esse delay para o usuário.

Sei que não parece muita coisa, mas parece que utilizarei ele como um dos pacotes principais nas minhas futuras aplicações e como não vi ninguém que tinha postado sobre essa lib antes, resolvi postar para quem sabe ajudar alguém.