Next.js Discord

Discord Forum

I have react related question regd clearTimeout()

Unanswered
Ragdoll posted this in #help-forum
Open in Discord
RagdollOP
Can anyone explain if this function is called or not? My console.log not prints.
 () => {
      console.log("TimeoutId", timeoutId)
      clearTimeout(timeoutId);
    }


Full code:

import React, { useEffect, useState } from "react";

function fetchSearchResult(keyword) {
  console.log(keyword)
}

function SearchInput() {
  const [seachTerm, setSearchTerm] = useState('');
  const [debouncedSeachTerm, setDebouncedSearchTerm] = useState('');

  const handleInputChange = e => {
    setSearchTerm(e.target.value);

    const timeoutId = setTimeout(() => {
      setDebouncedSearchTerm(e.target.value);
    }, 500);

    return () => {
      console.log("TimeoutId", timeoutId)
      clearTimeout(timeoutId);
    }
  }

  useEffect(() => {
    fetchSearchResult(debouncedSeachTerm);
  }, [debouncedSeachTerm]);

  return (
    <div>
      <label>Seach:</label>
      <input
        type="text"
        value={seachTerm}
        onChange={handleInputChange}
      />
    </div>

  )
}

export default SearchInput;

0 Replies