[v2] Hooks

[jaredpalmer]

Improvements

• Create <Field as> prop (Create <Field as> and deprecate <Field component> and <Field render> #1406)
• Add meta prop to <Field children> (Create <Field as> and deprecate <Field component> and <Field render> #1406)
• Break out useFormik from <Formik>
• onReset and handleReset tests
• async onSubmit (no more setSubmitting(false) needed)
• Make validation cancellable (Using styled components with formik is incredibly slow #1026, Slow on large form. #671)
• useField's second element is field metadata (Add meta prop to Field, FastField #343)
• Add initialErrors, initialTouched, initialStatus (Add initialXXXX and fix isValid #1410)
• Fix isValid (Add initialXXXX and fix isValid #1410)
• <Field >'s uses handleBlur('path') and handleChange('path') override
  (executeBlur should not inspect event if path is set #1113)
• Upgrade to TypeScript 3.5 and React 16.9 ([v2] Upgrade to TS 3.5.x #1559)

Breaking Changes

• Breaking TypeScript change: FormikActions have been renamed to FormikHelpers
• Formik no longer uses console.error in its warnings, but rather console.warn

Deprecations

These are just warnings for now.

• <Field render> (Create <Field as> and deprecate <Field component> and <Field render> #1406)
• <Field component> (Create <Field as> and deprecate <Field component> and <Field render> #1406)
• isInitialValid and fix isValid (Add initialXXXX and fix isValid #1410)

Documentation

• useField
• "Creating your own <FieldGroup>"
• Checkboxes and Radio inputs
• <FormikConsumer>
• useFormikContext
• useFormik
• Rewrite examples with hooks
• Rewrite tutorial with hooks
• Migration Guide
• Blog post

Feel free to start making PR's to this branch. This is going to take a minute to figure out as there are a LOT of new paradigms.

#1046 #1005

[weyert]

Why the rename of FormikContext to FormikCtx?

[tgriesser]

I don't have the time to make this into a formal PR right now but maybe it'll provide a little inspiration. It's a proof-of-concept of Formik working with hooks. Because of the imperative API exposed by formik, the key I found is to mostly use refs internally rather than state, otherwise the values will get stale, e.g. if you set a field and call submitForm in the same event handler. It's just a first pass, so I'm sure there's plenty of room for improvement, but it seems to work alright:

https://gist.github.com/tgriesser/fdd08da075fec80328792319606c76e5

[jaredpalmer]

I (think) I'm almost done with useFormik. I made one perf improvement which I think we should push down to v1: avoid toggling isValidating if field-level validation is synchronous.

[jaredpalmer]

@tgriesser hrm. that's definitely a footgun with calling submit form in the same handler. i wonder if there is a way to avoid that aside from ref + force update. refs won't show up in dev tools for example.

[jaredpalmer]

Pretty close here. There is definitely some quirks without the state updater callback

[weyert]

How can I extend it with warnings?

[jaredpalmer]

If we decide to allow a stateReducer prop, then yes. However, that debate will come later.

[weyert]

Any way to progress this ticket? :)

[jaredpalmer]

@FredyC useField is going to accept either a string name or and object with #1555

[MatyCZ]

Will useField accept validation too? There is no way how to add validation function to the field using the useField hook.

[danielkcz]

@MatyCZ Is it really that hard to at least read the previous comment? 🙄 😆

[MatyCZ]

@FredyC Jared mentioned accepting an object with #1555 as answer to your question about validation. #1555 is already merged, but useField doesn`t accept validation as object prop.

[fabb]

Maybe remove the status functionality from the hook? Users could use the regular useState hook with the additional benefit that it‘s not of type any.

[alfred-pb]

Any progress with the docs?

[jaredpalmer]

I am working on docs this week

[GollyJer]

I realize the docs aren't ready but does there happen to be a hooks code example sitting around somewhere? 😀

[alfred-pb]

@jaredpalmer thanks! A video will be also appreciate it 👍

[veenedu]

A demo, until we see something from @jaredpalmer

import { Formik, useFormikContext } from "formik";

const MyForm = () => {
  const {
    handleSubmit,
    handleChange,
    values,
    errors,
    isSubmitting
  } = useFormikContext();
  console.log("isSubmitting", isSubmitting);
  return (
    <div>
      <h2>Using hooks</h2>
      <form
        onSubmit={e => {
          e.preventDefault();
          handleSubmit();
        }}
      >
        <div>
          Name <input name="name" value={values.name} onChange={handleChange} />
        </div>
        {errors.name && <div>{errors.name}</div>}
        <div>
          age
          <input name="age" value={values.age} onChange={handleChange} />
          {errors.age && <div>{errors.age}</div>}
        </div>
        <div>
          <input value="submit" type="submit" disabled={isSubmitting} />
        </div>
      </form>
    </div>
  );
};

const initialValues = {
  name: "Praveen",
  age: 35
};
const config = {
  initialValues,
  onSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      console.log("Submit", values);
      console.log("Here");
      setSubmitting(false);
    }, 1400);
  },
  validate: values => {
    const errors = {};
    if (!values.name) {
      errors["name"] = "Name is required";
    }
    if (!values.age) {
      errors["age"] = "age is required";
    }
    if (values.age && isNaN(Number(values.age))) {
      errors["age"] = "Please enter a number";
    }
    return errors;
  }
};

const Wrapped = () => (
  <Formik {...config}>
    <MyForm />
  </Formik>
);

export default Wrapped;

https://codesandbox.io/s/serene-grothendieck-se2om

[fabb]

AFAIK the Wrapped part and especially <Formik> is unnecessary when you use the hook.

[fabb]

And formik handles the preventDefault for you when you pass the event to handleSubmit:

<form onSubmit={handleSubmit}>

[veenedu]

Then how to validation rules, initial values?

@fabb

[fabb]

Ah ok, now I know the difference between useFormik and useFormikContext. The former takes the config, the latter expects being wrapped inside of a Formik Provider as you did. How confusing.

I‘m not sure if the former is meant for public use, but I think it can be used like this:

... = useFormik(config);

https://github.com/jaredpalmer/formik/blob/master/src/Formik.tsx#L125

I think you need the provider though when you use Formik‘s <Field> (I don‘t).

[GoPro16]

https://github.com/Availity/availity-react/tree/master/packages/form

Our whole reactstrap form, selects, and datepickers are built using formik v2. Probably a good production example of this. Sorry if this is frowned upon to do this until a stable release 😏

[tommedema]

@GoPro16 checked your code but don't see references to useFormik anywhere

[GoPro16]

@GoPro16 checked your code but don't see references to useFormik anywhere

We use the useField hook and the useFormikContext hook the most. We don't ever use useFormik because we don't need all of the formikbag, only just a sub selection like what useFormikContext returns.

https://availity.github.io/availity-react/form/components/form/

[septs]

@jaredpalmer release the feature to next version?