Function ReactFinalForm

src/ReactFinalForm.tsx:40–197

({
  debug,
  decorators = [],
  destroyOnUnregister,
  form: alternateFormApi,
  initialValues,
  initialValuesEqual,
  keepDirtyOnReinitialize,
  mutators,
  onSubmit,
  subscription = all,
  validate,
  validateOnBlur,
  ...rest
}: FormProps<FormValues>)

);

function ReactFinalForm<FormValues = Record<string, any>>({
  debug,
  decorators = [],
  destroyOnUnregister,
  form: alternateFormApi,
  initialValues,
  initialValuesEqual,
  keepDirtyOnReinitialize,
  mutators,
  onSubmit,
  subscription = all,
  validate,
  validateOnBlur,
  ...rest
}: FormProps<FormValues>) {
  const config: Config<FormValues> = {
    debug,
    destroyOnUnregister,
    initialValues,
    keepDirtyOnReinitialize,
    mutators,
    onSubmit,
    validate,
    validateOnBlur,
  };

  const form: FormApi<FormValues> = useConstant(() => {
    const f = alternateFormApi || createForm<FormValues>(config);
    // pause validation until children register all fields on first render (unpaused in useEffect() below)
    f.pauseValidation();
    return f;
  });

  // Get initial state without triggering callbacks during render
  const [state, setState] = React.useState<FormState<FormValues>>(() => {
    // Get initial state synchronously but without callbacks
    return form.getState();
  });

  // save a copy of state that can break through the closure
  // on the shallowEqual() line below.
  const stateRef = React.useRef<FormState<FormValues>>(state);
  stateRef.current = state;

  React.useEffect(() => {
    // We have rendered, so all fields are now registered, so we can unpause validation
    form.isValidationPaused() && form.resumeValidation();
    const unsubscriptions: Unsubscribe[] = [
      form.subscribe((s) => {
        setState((prevState) => {
          if (!shallowEqual(s, prevState)) {
            return s;
          }
          return prevState;
        });
      }, subscription),
      ...(decorators ? decorators.map((decorator) => decorator(form)) : []),
    ];