<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(
      value => {
        makeApiCallRaw(value);
      },
      2000,
      { trailing: true }
    ),
    []
  );

  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"));