How to debounce Formik Field ReactJS

Question

I want to debounce Formik <Field/> but when I type in the field seems debounce does not work. Also I have tried lodash.debounce, throttle-debounce and the same result. How to solve this?

CodeSandbox - https://codesandbox.io/s/priceless-nobel-7p6nt

Snippet:

import ReactDOM from "react-dom";
import { withFormik, Field, Form } from "formik";

const App = ({ setFieldValue }) => {
  let timeout;
  const [text, setText] = useState("");

  const onChange = text => {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => setText(text), 750);
  };

  return (
    <Form>
      <Field
        type="text"
        name="textField"
        placeholder="Type something..."
        onChange={e => {
          onChange(e.target.value);
          setFieldValue("textField", e.target.value);
        }}
        style={{ width: "100%" }}
      />
      <br />
      <br />
      <div>output: {text}</div>
    </Form>
  );
};

const Enhanced = withFormik({
  mapPropsToValues: () => ({
    textField: ""
  }),
  handleSubmit: (values, { setSubmitting }) => {
    setSubmitting(false);
    return false;
  }
})(App);

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

Answer 1

  const [text, setText] = useState("");
  const [t, setT] = useState(null);

  const onChange = text => {
    if (t) clearTimeout(t);
    setT(setTimeout(() => setText(text), 750));
  };

Answer 2

I would like to suggest to move the call inside of timeout function.

const App = ({ setFieldValue }) => {
      let timeout;
      const [text, setText] = useState("");

      const onChange = text => {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          setText(text);
          //changing value in container
          setFieldValue("textField", text);
        }, 750);
      };

      return (
        <Form>
          <Field
            type="text"
            name="textField"
            placeholder="Type something..."
            onChange={e => {
              onChange(e.target.value);
            }}
            style={{ width: "100%" }}
          />
          <br />
          <br />
          <div>output: {text}</div>
        </Form>
      );
    };