Invoking function expression

Question

I'm following a React-hooks tutorial and I don't understand why does the function expression, timerId in the top useEffect is being invoked automatically, but the function expression, search, in the bottom useEffect requires it to be called search() in order to invoke it?

 useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedTerm(term);
    }, 1500);
 
    return () => {
      clearTimeout(timerId);
    };
  }, [term]);
 
  useEffect (() => {
    const search = async() => {
      const { data } = await axios.get('https://en.wikipedia.org/w/api.php', {
        params: {
          action: 'query', 
          list: 'search',
          origin: '*',
          format: 'json', 
          srsearch: debouncedTerm
        }
      });
      setResults(data.query.search);
    };
    search();
  }, [debouncedTerm]);

user_2146125 · Answer

It is assigning a function to search variable which needs to be invoked manually.

However in the body of other useEffect it is invoking the setTimeout function and assigning the return value of setTimeout function to timerId variable. Return value of setTimeout function is a positive integer which is the unique identifier of the timeout.

So the value of timerId is not a function to begin with. It's the id of the timeout.

Only function that is being invoked in the body of top useEffect is the setTimeout function.

Invoking function expression

1 Answers