debouncedEffectSnippet2.jsx

debouncedEffectSnippet2.jsx

import debounce from "lodash/debounce";

function makeApiCallRaw(value) {
  console.log("make api call with value", value);
}

const debouncedmakeApiCall = debounce(makeApiCallRaw, 200, { trailing: true });
function ChildComponent({ value, setValue }) {
  return (
    <input
      defaultValue={value}
      value={value}
      onChange={e => {
        setValue(e.target.value); // Has to be non debounced
        debouncedmakeApiCall(e.target.value); // has to be debounced
      }}
    />
  );
}

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