debounceuseeffectsnippet1.jsx

debounceuseeffectsnippet1.jsx

function ChildComponent({ value, setValue }) {
  
  function makeApiCallRaw(value) {
      console.log("make api call with value", value)
  }
  
  return (
    <input
      defaultValue={value}
      value={value}
      onChange={e => {
        setValue(e.target.value); // Has to be non-debounced
        makeApiCall(e.target.value) // has to be debounced
      }}
    />
  );
}

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

ReactDOM.render(<App />, document.getElementById("root"));