Basically FormikPersist but saved on a server not in device-specific storage

Autosave.js

import { useEffect, useRef } from "react";
import debounce from "lodash/debounce";

// basically a save-dedicated clone of
// a hook that would be called useDebouncedCallback
const AutoSave = ({
  values,          // what's in the form
  saveProgress,    // a network request / api call
  interval = 5000, // ms
}) => {
  const debounced = useRef(
    debounce(newValues => saveProgress(newValues), interval)
  );

  useEffect(() => {
    debounced.current(values);
  }, [values]);

  return null;
};

export default AutoSave;

ExampleForm.js

import React from "react";
import { PUT } from "../../lib/service";

// form helpers
import { Formik, Form } from "formik";
import AutoSave from "./exampleJustAbove.js";

const api = {
  saveProgress: params => PUT(`${location.origin}/some/endpoint`, params),
};

const defaultValues = {
  key: "value",
  more: "stuff",
};

// where `persistedValues` are likely draft values passed in as props
const DecentForm = ({ initialPersistedValues }) => {
  const [persistedValues, setDatabasePayload] = useState(
    initialPersistedValues
  );

  const saveProgress = async values => {
    // probably something like setIsSaving(true);

    const params = buildFormParams(sections, sheetBasics, values);

    try {
      await api
        .saveProgress(params)
        .then(res => setDatabasePayload(res.payload))
        .then(() => {
          // something that's like...
          // setIsSaving(false);
          // setSaveMsg("Progress saved!");
          // // clear success messsage in 3 seconds
          // setTimeout(() => setSaveMsg(), 3000);
        });
    } catch (error) {
      // something that's like...
      // setIsSaving(false);
      // setError(error);
      // setSaveMsg("An error occurred! See top of page");
      // setTimeout(() => setSaveMsg(), 3000);
    }
  };

  return (
    <Formik
      onSubmit={() => {
        alert("you probably meant to implement me");
      }}
      initialValues={persistedValues || defaultValues}
    >
      {formikProps => (
        <Form className="decent-form">
          <AutoSave
            saveProgress={saveProgress}
            values={formikProps.values}
            interval={15000} // or whatever you want
          />
          {/* actual form redacted */}
        </Form>
      )}
    </Formik>
  );
};