useEffect debounce search technique-CodePudding

i'm trying to implement search functionality but i don't want to call the api every time i type something . here is the code:

const [term, setTerm] = useState("");
const [result, setResult] = useState([]);

useEffect(() => {
  const search = async () => {
    const respond = await axios.get("https://en.wikipedia.org/w/api.php", {
      params: {
        action: "query",
        list: "search",
        origin: "*",
        format: "json",
        srsearch: term,
      },
    });
    setResult(respond.data.query.search);
  };

  if (!result.length) {
    if (term) {
      search();
    }
  }
}, [term, result.length]);

CodePudding user response：

you can use the setTimeout() function and clearTimeout in the cleanup function and the useRef hook to get the previous state to call the API only once :

  const [result, setResult] = useState([]);
  const termUseRef = useRef(); 

  useEffect(() => {
    termUseRef.current = term
 
  })

  const prevTerm = termUseRef.current;


  useEffect(() => {
    const search = async () => {
      const respond = await axios.get('https://en.wikipedia.org/w/api.php', {
        params: {
          action: 'query',
          list: 'search',
          origin: '*',
          format: 'json',
          srsearch: term,
        },
      });
      setResult(respond.data.query.search);
    };

    if (!result.length) {
      if (term) {
        search();
      }

    } else if(term !== prevTerm) {
      const debounceSearch = setTimeout(() => {
        if (term) {
          search();
        }
      }, 1200);

      return () => {
        clearTimeout(debounceSearch);
      };
    }
  }, [term, result.length, prevTerm]);

CodePudding user response：

You can use setTimeout() . I've added an example below. You can review

  const [searchParams, setSearchParams] = useState('');


  useEffect(() => {
        if (searchParams.length > 0) {
          const apiCall = setTimeout(() => {
            SearchService(searchParams).then((res) => {
             console.log(res.data)
            });
          }, 300);
          return () => clearTimeout(apiCall);
        }
      }, [searchParams]);

  const onChangeInputValue = async (value) => {
    setSearchParams(value);
  };