Pass a argument to a function callback

Question

I'm trying to use debounce in lodash to delay the onChange, see the code below.

import React, { useState, useEffect, useCallback } from "react";
import { TopBar } from "@shopify/polaris";
import { debounce } from "lodash";

function SearchBar() {
  const [searchValue, setSearchValue] = useState("");

  const handleSearchFieldChange = ((value:string) => {
    setSearchValue(value);
  });

  const debounceLoadData = useCallback(debounce({searchValue} => fetchData, 1000), []);

  useEffect(() => {
    debounceLoadData();
    console.log({searchValue})
  }, [searchValue]);

  function fetchData(value:string) {
    console.log("searchValue " + value);
  }

  const searchFieldMarkup = (
    <TopBar.SearchField
      onChange={handleSearchFieldChange}
      value={searchValue}
      placeholder="Search Value"
    />
  );

  return <TopBar searchField={searchFieldMarkup} />;
}

In the beginning, I was tring to use searchValue in fetchData function but seems because of scope, it failed to read it, it was always empty though the state had been updated.

As a result, I try to pass it in from the debounceLoadData but I don't know how I can do that as what in useCallback is a function invocation. How can I pass searchValue in fetchData inside debounce.

Perhaps you should get the `fetchData` function working first, without any debouncing or throttling, then make the determination if performance improvements are necessary. — Drew Reese, May 06 '20 at 05:37

Shubham Khatri · Accepted Answer · 2020-05-06T06:14:55.523

lodash debounce takes in a function as the first argument. You can simply use fetchData as the function and pass on the searchValue to debounceLoadData which will then be passed to fetchData on invocation

const debounceLoadData = useCallback(debounce(fetchData, 1000), []);

  useEffect(() => {
    debounceLoadData(searchValue);
    console.log({searchValue})
  }, [searchValue]);

debounce actually returns a function, think of debounce as being implemented like

function debounce(func, wait) {
  let timeout
  return function(...args) {
    const context = this
    clearTimeout(timeout)
    timeout = setTimeout(() => func.apply(context, args), wait)
  }
}

So basically debounceLoadData is the returned function here and arguments passed to it i.e ...args are being then passed to original function fetchData like func.apply(context, args)

Also debounceLoadData is created only once as the callback dependency is [], you whether you pass it to useEffect as a dependency of not will not make any difference.

Please read this post for missing dependency warning

How to fix missing dependency warning when using useEffect React Hook?

How does the value passing work? I figured this out but I don't undertstand. Also I see a output in console ```React Hook useEffect has a missing dependency: 'debounceLoadData'. Either include it or remove the dependency array react-hooks/exhaustive-deps``` — user1888955, May 06 '20 at 06:06
@user1888955 Just keep one thing on mind, what goes into `debounce` comes out the same, in terms of function signature. `debounce` just add the super power of delaying to that function. The function itself remain the same. E.g. `debounce(x => x +1)` comes out the same function `x => x + 1`. — hackape, May 06 '20 at 06:20

hackape · Answer 2 · 2020-05-06T06:15:09.710

I never like useCallback, it's quite a confusing hook, and I always use useMemo instead since it totally covers what useCallback can do (but not the other way around).

function SearchBar() {
  const [searchValue, setSearchValue] = useState("");

  const handleSearchFieldChange = ((value:string) => {
    setSearchValue(value);
  });

  const debounceLoadData = useMemo(() => debounce(fetchData, 1000), []);
  /**
   * the equivalent of useCallback should be:
   *
   * const debounceLoadData = useCallback(debounce(fetchData, 1000), []);
   * 
   * But I really advice against it!
   * There's unnecessary function invocation compared to useMemo.
   */


  useEffect(() => {
    debounceLoadData(searchValue);  // <- you should pass in arg
    console.log({searchValue})
  }, [searchValue]);

  // ...
}

Yet for your case I don't think using lodash debounce is the best solution.

There's a hidden risk that the final invocation of effect fetchData happens AFTER your component is unmounted. And if fetchData contains some state mutation logic, that would raise an error of "Can't call setState (or forceUpdate) on an unmounted component." which is not destructive but not optimal either.

I suggest manually debounce call using setTimeout/clearTimeout. It's pretty simple:

useEffect(() => {
  const timeoutId = setTimeout(() => fetchData(searchValue), 1000)
  return () => clearTimeout(timeoutId)
}, [searchValue])

I marked @ShubhamKhatri 's answer as I used useCallback. But I think you are right about just using setTimeout. — user1888955, May 06 '20 at 06:35

Rashomon · Answer 3 · 2020-05-06T05:44:16.083

0

I think you are getting confused by the functional setState syntax. Try this:

const debounceLoadData = useCallback(() => debounce(() => fetchData(searchValue), 1000), []);

edited May 06 '20 at 05:44

answered May 06 '20 at 05:37

Rashomon

5,962
4
29
67

No you're confusing useCallback with useMemo. Your code is for useMemo. – hackape May 06 '20 at 05:53

Pass a argument to a function callback

3 Answers3