A Form component which automatically run a React Query v2 mutation

form.tsx

import { useCallback, ReactNode, FormEventHandler } from "react";
import { MutationResultPair, MutateConfig, QueryStatus } from "react-query";
import * as yup from "yup";

function noop() {}

type FormProps<Data> = {
  action: MutationResultPair<Data, Error, FormData, never | (() => void)>;
  children(status: QueryStatus): ReactNode;
  validation: yup.ObjectSchema;
  onInvalid?(error: yup.ValidationError): void;
} & Omit<MutateConfig<Data, Error, FormData, () => void>, "onMutate">;

export function Form<Data>({
  children,
  action: [action, { status }],
  validation,
  onSuccess = noop,
  onError = noop,
  onSettled = noop,
  onInvalid = noop,
}: FormProps<Data>) {
  // callbacks
  const handleSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
    function handleSubmit(event) {
      event.preventDefault();
      const formData = new FormData(event.currentTarget);
      validation
        // @ts-expect-error
        .validate(Object.fromEntries(formData.entries()))
        .then(() => {
          action(formData, {
            onSuccess,
            onError,
            onSettled,
          });
        })
        .catch((error: yup.ValidationError) => onInvalid(error));
    },
    [action, onError, onInvalid, onSettled, onSuccess, validation],
  );
  // render
  return (
    <form onSubmit={handleSubmit} style={{ display: "contents" }}>
      {children(status)}
    </form>
  );
}