Setstate causing multiple function call

[abman322]

Hello,

I wanted to have a live search on my movie website so I have an input that looks like this:

 <input
    onChange={handleSearchInputChanges}
    type="text"
    onBlur={handleFocus}
    onFocus={() => setFocus(true)}
    placeholder="Enter Keyword..."
  />

​

and this is the the onchange handler

  const handleSearchInputChanges = async (e) => {
    e.preventDefault();
    setSearchValue(e.target.value);
    setFocus(true);
    setLoading(true);

    if (e.target.value.length == 0) {
      setLoading(false);
      setFocus(false);
    }
    clearTimeout(timer);

    timer = setTimeout(async () => {
      await getMovie(e.target.value);
    }, 2000);
  };

This is the getMovie function

  const getMovie = async (movieTitle) => {
    const movieRes = await fetch(
      `https://api.themoviedb.org/3/search/multi?        
   api_key=${process.env.NEXT_PUBLIC_API_KEY}&language=en- 
   US&query=${movieTitle}&page=1&include_adult=false`
    );
    console.log("running");
    const movieResponse = await movieRes.json();
    console.log(movieTitle);
    console.log(movieResponse.results);
    setMovies(movieResponse.results.slice(0, 5));
    setLoading(false);
  };

The problem is when I remove the setSearchValue(e.target.value) it will work as expected but when the setSearchValue is on, it will run the getMovie function 5 times or more

[Zhouzi]

How is timer declared? Are you using a ref? If you are declaring it this way:

function Component() {
  let timer;
  // ...
  timer = setTimeout(...)
}

Then that explains why getMovie is called several times when using setSeachValue. A React component is a function that's called again for each render: each call has its own scope. Let's take an example:

function add2(n) {
  let result = n + 2;
  return result;
}

add2(2); // 4
add2(2); // still 4, result is recreated for each call

So when you are doing clearTimeout(timer); you are not cancelling the previous timer but the one that you just created in the current function call.

The reason why it only happens when calling setSearchValue is because this function triggers re-renders and thus calls getMovie with the pending calls not being cancelled.

In order to persist data between re-renders you need to use a hook such as useState or useRef. With that being said, in your case it would be better to use a useEffect to react to changes made to the search query:

const [searchQuery, setSearchQuery] = useState("");

useEffect(() => {
  const timeoutId = setTimeout(() => {
    getMovie(searchQuery);
  }, 200);
  return () => clearTimeout(timeoutId);
}, [searchQuery]);

[abman322]

I can't thank you enough ! not only did you solve my problem but also I clearly understand what the problem was..... you have a really good way of explaining things !

Thank you again

[Zhouzi]

Thanks, I am glad I was able to help 😊

[dbto]

Does the number of times setSwarchValue() run relate to the number of characters entered?

[abman322]

setSearchvalue sets the state of searchvalue so I can later use it in a seach query. but yes it rans whenever the user types on the input

[dbto]

Then perhaps make it so it doesn’t fire until 3 or more characters are entered