debouncedEffect3.jsx

debouncedEffect3.jsx

function ChildComponent({ value, setValue }) {
  function makeApiCallRaw(value) {
    console.log("make api call with value", value);
  }
  const debouncedmakeApiCall = React.useCallback(
    debounce(
      value => {
        makeApiCallRaw(value);
      },
      2000,
      { trailing: true }
    ),
    []
  );

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