CODEWITHSUNDEEP
javascriptreactjs
Jerry
Jerry

Reputation: 41

why my debounce event call 5 times query?

I use lodash-debounce on input tag.

If I typed in five letters, api called 5 times.

 const onChangeInput: ChangeEventHandler = (e: any) => {
    setWords(e.target.value);
    e.target.value.length >= 2 && debounceInputChanged();
  };

  const debounceInputChanged = useMemo(
    () =>
      debounce(() => {
        searchWords();
      }, 1000),
    [words],
  );

doesnt work lodash-debounce.


  const onChangeInput: ChangeEventHandler = (e: any) => {
    setInput(e.target.value);
    debounceInput(e.target.value);
  };

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const debounceInput = useMemo(
    () =>
      debounce((value: any) => {
        console.log(value);
      }, 3000),
    [input],
  );

console.log shows 1 12 123 1234 I expect console.log only shows 1234 enter image description here

Upvotes: 0

Views: 56

Answers (2)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41417

Create seperate hook for debounce like this

import { useEffect, useState } from "react";

export default function useDebounce(value: string, delay: number = 1000) {
   const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      // Update debounced value after delay
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

     return () => {
        clearTimeout(handler);
      };
    },
    [value, delay] // Only re-call effect if value or delay changes
  );

  return debouncedValue;
}

In the Component

 const debouncedSearch = useDebounce(words); // usestate variable 

  useEffect(() => {
      searchWords();

  }, [debouncedSearch]);

Upvotes: 1

Himanshu Prajapati
Himanshu Prajapati

Reputation: 134

const onChangeInput: ChangeEventHandler = (e: any) => {
setWords(e.target.value);
e.target.value.length >= 2 && debounceInputChanged();
};

const debounceInputChanged = useMemo(
() =>
  debounce(() => {
    searchWords();
  }, 1000),
[words], // you are passing dependency over here so it's called when the word is updated.
);

Upvotes: 0

Related Questions