<div id="root"></div>
function ChildComponent({ value, setValue }) {
  function makeApiCallRaw(value) {
    console.log("make api call with value", value);
  }

  // const makeApiCall = React.useCallback(_.debounce((value) => {
  //   makeApiCallRaw(value)
  // }, 2000, {trailing: true}), [])

  // Example for wrong usage
  const debouncedmakeApiCall = React.useCallback(
    _.debounce(
      () => {
        makeApiCallRaw(value);
      },
      2000,
      { trailing: true }
    ),
    [value]
  );

  return (
    <input
      defaultValue={value}
      value={value}
      onChange={e => {
        setValue(e.target.value); // non debounced
        debouncedmakeApiCall(e.target.value); // debounced
      }}
    />
  );
}

function App() {
  const [value, setValue] = React.useState("");
  return (
    <div>
      Hello World
      <ChildComponent value={value} setValue={setValue} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js