v3

.changeset/afraid-buses-kiss.md

@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Add `useSetFieldValue` and `useSetFieldTouched` hooks

.changeset/gentle-boxes-turn.md

@@ -0,0 +1,15 @@
+---
+'formik': patch
+---
+
+Added optimized Form, ErrorMessage, and the following additional optimized field-level hooks
+and components that only rerender when their respective slices have changed:
+
+- `unstable_useFieldValue`
+- `unstable_useFieldTouched`
+- `unstable_useFieldError`
+- `unstable_useStrictField`
+- `unstable_StrictField`
+
+In addition, there is a very very unstable `unstable_useFormikContextSelector` that we'll be using
+to prototype other APIss in product that is also included. This will definitely **not** be released, so you have been warned.

.changeset/honest-radios-poke.md

@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Fix useFieldTouched selector

.changeset/lazy-olives-agree.md

@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Add hooks `useSetValue`, `useSetErrors`, `useSetTouched`, `useSetStatus`, `useSubmitForm`, `useResetForm`, `useIsSubmitting`, `useIsValid`, `useIsDirty`, `useValidateForm`, `useValidateField`

.changeset/little-olives-enjoy.md

@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Ensure that parse and format aren't passed through in Field components

.changeset/pre.json

@@ -0,0 +1,19 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "formik": "2.2.1",
+    "formik-native": "2.1.9",
+    "@formik/codemod": "3.0.0-next.2"
+  },
+  "changesets": [
+    "afraid-buses-kiss",
+    "gentle-boxes-turn",
+    "honest-radios-poke",
+    "lazy-olives-agree",
+    "little-olives-enjoy",
+    "quiet-beans-attack",
+    "two-fans-film",
+    "wicked-goats-burn"
+  ]
+}

.changeset/quiet-beans-attack.md

@@ -0,0 +1,8 @@
+---
+'formik': major
+---
+
+Added `parse`, `format`, and `formatOnBlur` to `getFieldProps` options, `<Field>`, and `useField`. Going forward, there is no reason aside from backwards compatibility to continue using either `formikProps.handleChange` or `formikProps.handleBlur`. These are both inferior to the `onChange` and `onBlur` functions returned by `getFieldProps()` which the ability to utilize `parse`, `format`, and `formatOnBlur`.
+
+**Breaking Change**
+Instead of just passing back `formikProps.handleChange` and `formikProps.handleBlur`, the `onChange` and `onBlur` handlers returned by `getFieldProps()` (and thus `useField`/`<Field>`) are now scoped to the field already and now accept either a React Synthetic event or a value. In the past, you could need to curry the handler with the string name of field to get this functionality. This likely doesn't impact many users, but it is technically breaking nonetheless.

.changeset/two-fans-film.md

@@ -0,0 +1,19 @@
+---
+'formik': patch
+---
+
+Renames `unstable_StrictField` to `FastField` and thus deprecates `<FastField shouldUpdate>` prop. If you need this functionality, use `useFormikContext()` and `useField()` in a custom component wrapped in `React.memo()` instead. In addition, and this is breaking, `FastField` is no longer passed `form` object in any render prop.
+
+If you still need to access the `form` object in render use `FormikConsumer` like so:
+
+```diff
+- import { FastField } from 'formik'
++ import { FastField, FormikConsumer } from 'formik'
+
+<FastField name="firstName">
+- {({ field, meta, form }) => ( /* ... */ )}
++ {({ field, meta }) => (
++   <FormikConsumer>{form => /* ... */}</FormikConsumer>
++ )}
+</FastField>
+```

.changeset/wicked-goats-burn.md

@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Implement useField field.onBlur to avoid rerendering entire form on blur events

MIGRATING-v3.md

@@ -0,0 +1,47 @@
+# Formik 3 Migration Guide
+
+## Breaking changes
+
+- `FastField` no longer accepts `shouldUpdate` prop. Given the new implementation of `FastField`, this functionality is likely no longer needed anyways.
+- `FastField` is no longer passed a `form` object (which contained `formikProps` in any render prop. If you still need to access the `form` object in the render prop use regular `Field` (which updates on every render).
+- Instead of just passing back `formikProps.handleChange` and `formikProps.handleBlur`, the `onChange` and `onBlur` handlers returned by `getFieldProps()` and `useField`/`<Field>`/`<FastField>`) are now scoped to the field already and now accept either a React Synthetic event or a value. In the past, you could curry the handler with the string name of field to get this functionality. This likely doesn't impact many users, but it is technically breaking nonetheless.
+
+## Improvements
+
+- Selective rendering!
+- `<Form>`, `<ErrorMessage>`, and `<FastField>` have been re-implemented to optimize rendering (i.e. minimally re-render)
+- `useField()` no longer updates on every key stroke, but only when that field is updated. This is a massive performance boost.
+- Added `parse`, `format`, and `formatOnBlur` to `getFieldProps` options, `<Field>`, and `useField`. Going forward, there is no reason aside from backwards compatibility to continue using either `formikProps.handleChange` or `formikProps.handleBlur`. These are both inferior to the `onChange` and `onBlur` functions returned by `getFieldProps()`, `<Field>`/`<FastField>`'s `field` object, or `useField` which have the ability to utilize `parse`, `format`, and `formatOnBlur`.
+- **New Hooks!**
+  - `useFieldInitialValue`
+  - `useFieldInitialTouched`
+  - `useFieldInitialError`
+  - `useInitialValues`
+  - `useInitialErrors`
+  - `useInitialTouched`
+  - `useInitialStatus`
+  - `useFieldTouched`
+  - `useFieldValue`
+  - `useFieldError`
+  - `useValues`
+  - `useSetValue`
+  - `useSetErrors`
+  - `useErrors`
+  - `useTouched`
+  - `useSetTouched`
+  - `useStatus`
+  - `useSetStatus`
+  - `useSubmitForm`
+  - `useResetForm`
+  - `useIsSubmitting`
+  - `useIsValid`
+  - `useIsDirty`
+  - `useValidateForm`
+  - `useValidateField`
+
+## Performance Suggestions
+
+- Prefer `<FastField>` to `<Field>`
+- Prefer a custom component with `useField()` over `<Field>`
+- The new helpers in `field.onChange` and `field.onBlur` returned from `useField()` can now handle either events or raw values. There is thus no need to call `useFormikContext` just to access `setFieldValue` and `setFieldBlur` anymore if you're updating the same field.
+- Move away from using `useFormikContext` and instead use one or more of the above hooks (ideally only the `useFieldXXX` ones if you can). `useFormikContext`, `useValues`, `useTouched` and `useErrors` hooks will rerender any components that use them when they change. Unless you're making a debugger, in most cases, your field or component doesn't need all of Formik state and so instead, use the new `useFieldXXX` hooks which will only rerender if that particular slice of Formik state updates.

app/package.json

@@ -8,10 +8,16 @@
     "start": "next start"
   },
   "dependencies": {
+    "format-string-by-pattern": "^1.2.1",
     "formik": "^2.1.5",
     "next": "9.5.3",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "yup": "^0.29.3"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.6",
+    "@types/react": "^16.9.56",
+    "@types/react-dom": "^16.9.9"
   }
 }

app/pages/format.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Formik, Field, Form } from 'formik';
+import formatString from 'format-string-by-pattern';
+
+const masks = [
+  { name: 'phone-1', parse: '999-999-9999' },
+  { name: 'phone-2', parse: '(999) 999-9999' },
+  { name: 'phone-3', parse: '+49 (AAAA) BBBBBB' },
+];
+
+const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
+
+export default function Example() {
+  return (
+    <div>
+      <Formik
+        initialValues={masks.reduce((prev, curr) => {
+          prev[curr.name] = '';
+          return prev;
+        }, {} as any)}
+        onSubmit={async values => {
+          await sleep(300);
+          alert(JSON.stringify(values, null, 2));
+        }}
+      >
+        <Form>
+          {masks.map(mask => (
+            <div key={mask.name}>
+              <label>
+                {mask.name}
+                <Field
+                  name={mask.name}
+                  type="text"
+                  parse={formatString(mask.parse)}
+                  placeholder={mask.parse}
+                />
+              </label>
+            </div>
+          ))}
+
+          <button type="submit">Submit</button>
+        </Form>
+      </Formik>
+    </div>
+  );
+}

app/pages/index.tsx

@@ -16,6 +16,11 @@ function Home() {
             <a>Async Submission</a>
           </Link>
         </li>
+        <li>
+          <Link href="/format">
+            <a>Parse + Format</a>
+          </Link>
+        </li>
       </ul>
       <style jsx>{`
         main {

app/pages/perf.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Formik, FastField as Field, Form, ErrorMessage } from 'formik';
+import * as Yup from 'yup';
+
+let renderCount = 0;
+
+const Basic = () => (
+  <div>
+    <h1>Sign Up</h1>
+    <Formik
+      initialValues={{
+        firstName: '',
+        lastName: '',
+        email: '',
+        favorite: '',
+        checked: [],
+        picked: '',
+        lastName2: '',
+        lastName3: '',
+        lastName4: '',
+        lastName5: '',
+        lastName6: '',
+        lastName7: '',
+        lastName8: '',
+        lastName9: '',
+        lastName10: '',
+        lastName11: '',
+        lastName12: '',
+        lastName13: '',
+        lastName14: '',
+        lastName15: '',
+        lastName16: '',
+        lastName17: '',
+        lastName18: '',
+        lastName19: '',
+        lastName20: '',
+      }}
+      validationSchema={Yup.object().shape({
+        email: Yup.string().email('Invalid email address').required('Required'),
+        firstName: Yup.string().required('Required'),
+        lastName: Yup.string()
+          .min(2, 'Must be longer than 2 characters')
+          .max(20, 'Nice try, nobody has a last name that long')
+          .required('Required'),
+      })}
+      onSubmit={async values => {
+        await new Promise(r => setTimeout(r, 500));
+        alert(JSON.stringify(values, null, 2));
+      }}
+    >
+      <Form>
+        <Field name="firstName" placeholder="Jane" />
+        <ErrorMessage name="firstName" component="p" />
+
+        <Field name="lastName" placeholder="Doe" />
+        <Field name="lastName2" placeholder="Doe" />
+        <Field name="lastName3" placeholder="Doe" />
+        <Field name="lastName4" placeholder="Doe" />
+        <Field name="lastName5" placeholder="Doe" />
+        <Field name="lastName6" placeholder="Doe" />
+        <Field name="lastName7" placeholder="Doe" />
+        <Field name="lastName8" placeholder="Doe" />
+        <Field name="lastName9" placeholder="Doe" />
+        <Field name="lastName10" placeholder="Doe" />
+        <Field name="lastName11" placeholder="Doe" />
+        <Field name="lastName12" placeholder="Doe" />
+        <Field name="lastName13" placeholder="Doe" />
+        <Field name="lastName14" placeholder="Doe" />
+        <Field name="lastName15" placeholder="Doe" />
+        <Field name="lastName16" placeholder="Doe" />
+        <Field name="lastName17" placeholder="Doe" />
+        <Field name="lastName18" placeholder="Doe" />
+        <Field name="lastName19" placeholder="Doe" />
+        <Field name="lastName20" placeholder="Doe" />
+        <ErrorMessage name="lastName" component="p" />
+
+        <Field
+          id="email"
+          name="email"
+          placeholder="jane@acme.com"
+          type="email"
+        />
+        <ErrorMessage name="email" component="p" />
+
+        <label>
+          <Field type="checkbox" name="toggle" />
+          <span style={{ marginLeft: 3 }}>Toggle</span>
+        </label>
+
+        <div id="checkbox-group">Checkbox Group </div>
+        <div role="group" aria-labelledby="checkbox-group">
+          <label>
+            <Field type="checkbox" name="checked" value="One" />
+            One
+          </label>
+          <label>
+            <Field type="checkbox" name="checked" value="Two" />
+            Two
+          </label>
+          <label>
+            <Field type="checkbox" name="checked" value="Three" />
+            Three
+          </label>
+        </div>
+        <div id="my-radio-group">Picked</div>
+        <div role="group" aria-labelledby="my-radio-group">
+          <label>
+            <Field type="radio" name="picked" value="One" />
+            One
+          </label>
+          <label>
+            <Field type="radio" name="picked" value="Two" />
+            Two
+          </label>
+        </div>
+        <button type="submit">Submit</button>
+        <div id="renderCounter">{renderCount++}</div>
+      </Form>
+    </Formik>
+  </div>
+);
+
+export default Basic;