useDebounce (React Hook)

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

Användning

Denna React hooken kan användas för att debounca ett värde. Detta kan vara användbart för att förhindra att en funktion körs alltför ofta.

Ett exempel när denna hooken är användbar är vid sökfunktionalitet i realtid. Föreställ dig att du bygger en sökapplikation där sökresultaten ska uppdateras i realtid. Om du då gör en sökbegäran vid varje tangenttryckning, kan detta resultera i en stor mängd onödiga begäranden.

Därmed, genom att använda denna hooken kan du ställa in en fördröjning, till exempel 300 millisekunder så att sökbegäran inte skickas förrän användaren slutar skriva. Detta betyder att om en användare skriver en lång sökfråga utan pauser kommer endast en nätverksbegäran att göras när användaren slutar skriva.

Ett exempel på användning:

import React, { useState } from 'react';
import useDebounce from '../hooks/useDebounce';

function SearchInput() {
    const [text, setText] = useState('');
    const debouncedSearchTerm = useDebounce(text, 300);

    useEffect(() => {
        // Gör en sökning
    },[debouncedSearchTerm]);

    return (
    <input
      type="text"
      value={text}
      onChange={e => setText(e.target.value)}
    />
  );
}