From b4b1dc0c49c3424015e9d11beff46a7aa1d7cec1 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 28 Jan 2020 16:22:12 -0500
Subject: [PATCH 01/51] Add parse, format, formatOnBlur to getFieldProps()

---
 packages/formik/src/Formik.tsx | 76 +++++++++++++++++++++++++++++++---
 1 file changed, 71 insertions(+), 5 deletions(-)

diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
index 7cbef8ea5..35fa15cfc 100755
--- a/packages/formik/src/Formik.tsx
+++ b/packages/formik/src/Formik.tsx
@@ -24,6 +24,7 @@ import {
   getActiveElement,
   getIn,
   isObject,
+  isInputEvent,
 } from './utils';
 import { FormikProvider } from './FormikContext';
 import invariant from 'tiny-warning';
@@ -51,6 +52,11 @@ type FormikMessage<Values> =
       payload: FormikState<Values>;
     };
 
+const defaultParseFn = (value: unknown, _name: string) => value;
+
+const defaultFormatFn = (value: unknown, _name: string) =>
+  value === undefined ? '' : value;
+
 // State reducer
 function formikReducer<Values>(
   state: FormikState<Values>,
@@ -892,22 +898,46 @@ export function useFormik<Values extends FormikValues = FormikValues>({
     [state.errors, state.touched, state.values]
   );
 
-  const getFieldHelpers = React.useCallback(
+  const getFieldHelpers = useEventCallback(
     (name: string): FieldHelperProps<any> => {
       return {
         setValue: (value: any) => setFieldValue(name, value),
         setTouched: (value: boolean) => setFieldTouched(name, value),
         setError: (value: any) => setFieldError(name, value),
       };
-    },
-    [setFieldValue, setFieldTouched, setFieldError]
+    }
+  );
+
+  const getValueFromEvent = useEventCallback(
+    (event: React.SyntheticEvent<any>, fieldName: string) => {
+      if (event.persist) {
+        event.persist();
+      }
+      const target = event.target ? event.target : event.currentTarget;
+      const { type, value, checked, options, multiple } = target;
+      let val;
+      let parsed;
+      val = /number|range/.test(type)
+        ? ((parsed = parseFloat(value)), isNaN(parsed) ? '' : parsed)
+        : /checkbox/.test(type) // checkboxes
+        ? getValueForCheckbox(getIn(state.values, fieldName!), checked, value)
+        : !!multiple // <select multiple>
+        ? getSelectedValues(options)
+        : value;
+      return val;
+    }
   );
 
   const getFieldProps = React.useCallback(
     (nameOrOptions): FieldInputProps<any> => {
       const isAnObject = isObject(nameOrOptions);
-      const name = isAnObject ? nameOrOptions.name : nameOrOptions;
+      const name = isAnObject
+        ? nameOrOptions.name
+          ? nameOrOptions.name
+          : nameOrOptions.id
+        : nameOrOptions;
       const valueState = getIn(state.values, name);
+      const touchedState = getIn(state.touched, name);
 
       const field: FieldInputProps<any> = {
         name,
@@ -921,6 +951,9 @@ export function useFormik<Values extends FormikValues = FormikValues>({
           value: valueProp, // value is special for checkboxes
           as: is,
           multiple,
+          parse = defaultParseFn,
+          format = defaultFormatFn,
+          formatOnBlur = false,
         } = nameOrOptions;
 
         if (type === 'checkbox') {
@@ -939,10 +972,43 @@ export function useFormik<Values extends FormikValues = FormikValues>({
           field.value = field.value || [];
           field.multiple = true;
         }
+
+        if (type !== 'radio' && type !== 'checkbox' && !!format) {
+          if (formatOnBlur === true) {
+            if (touchedState === true) {
+              field.value = format(field.value);
+            }
+          } else {
+            field.value = format(field.value);
+          }
+        }
+
+        // We incorporate the fact that we know the `name` prop by scoping `onChange`.
+        // In addition, to support `parse` fn, we can't just re-use the OG `handleChange`, but
+        // instead re-implement it's guts.
+        if (type !== 'radio' && type !== 'checkbox') {
+          field.onChange = (eventOrValue: React.ChangeEvent<any> | any) => {
+            if (isInputEvent(eventOrValue)) {
+              if (eventOrValue.persist) {
+                eventOrValue.persist();
+              }
+              setFieldValue(name, parse(getValueFromEvent(eventOrValue, name)));
+            } else {
+              setFieldValue(name, parse(eventOrValue));
+            }
+          };
+        }
       }
       return field;
     },
-    [handleBlur, handleChange, state.values]
+    [
+      getValueFromEvent,
+      handleBlur,
+      handleChange,
+      setFieldValue,
+      state.touched,
+      state.values,
+    ]
   );
 
   const dirty = React.useMemo(

From 5bb4e7cc3b6d9331a3c4d6c492db50e8877f489d Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 28 Jan 2020 17:06:34 -0500
Subject: [PATCH 02/51] Add TS types to FieldConfig

---
 packages/formik/src/Field.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx
index 4c4718fed..5091a5fcb 100644
--- a/packages/formik/src/Field.tsx
+++ b/packages/formik/src/Field.tsx
@@ -52,6 +52,22 @@ export interface FieldConfig<V = any> {
    */
   validate?: FieldValidator;
 
+  /**
+   * Function to parse raw input value before setting it to state
+   */
+  parse?: (value: any, name: string) => any;
+
+  /**
+   * Function to transform value passed to input
+   */
+  format?: (value: any, name: string) => any;
+
+  /**
+   * Wait until blur event before formatting input value?
+   * @default false
+   */
+  formatOnBlur?: boolean;
+
   /**
    * Field name
    */

From 303ec5110c5cff1505c983fb0e34bf722284d47b Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 28 Jan 2020 17:12:41 -0500
Subject: [PATCH 03/51] Add parse-format example

---
 examples/parse-format/README.md    |  5 +++
 examples/parse-format/index.js     | 49 ++++++++++++++++++++++++++++++
 examples/parse-format/package.json | 17 +++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 examples/parse-format/README.md
 create mode 100644 examples/parse-format/index.js
 create mode 100644 examples/parse-format/package.json

diff --git a/examples/parse-format/README.md b/examples/parse-format/README.md
new file mode 100644
index 000000000..ec1fbb040
--- /dev/null
+++ b/examples/parse-format/README.md
@@ -0,0 +1,5 @@
+# Formik Basic Example
+
+This example demonstrates how to use `parse` and `format` to create an input mask with Formik.
+
+[![Edit formik-example-parse-format](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/jaredpalmer/formik/tree/master/examples/parse-format?fontsize=14&hidenavigation=1&theme=dark)
diff --git a/examples/parse-format/index.js b/examples/parse-format/index.js
new file mode 100644
index 000000000..5d3eedb59
--- /dev/null
+++ b/examples/parse-format/index.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Formik, Field, Form } from 'formik';
+
+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 => new Promise(r => setTimeout(r, ms));
+
+const Example = () => {
+  return (
+    <div>
+      <Formik
+        initialValues={masks.reduce((prev, curr) => {
+          prev[curr.name] = '';
+          return prev;
+        }, {})}
+        onSubmit={async values => {
+          await sleep(500);
+          alert(JSON.stringify(values, null, 2));
+        }}
+        render={({ values }) => (
+          <Form>
+            {masks.map(mask => (
+              <div key={mask.name}>
+                <label>
+                  {mask.name}
+                  <Field
+                    name={mask.name}
+                    parse={formatString(mask.parse)}
+                    placeholder={mask.parse}
+                  />
+                </label>
+              </div>
+            ))}
+
+            <button type="submit">Submit</button>
+            <pre>{JSON.stringify(values, null, 2)}</pre>
+          </Form>
+        )}
+      />
+    </div>
+  );
+};
+
+ReactDOM.render(<Example />, document.getElementById('root'));
diff --git a/examples/parse-format/package.json b/examples/parse-format/package.json
new file mode 100644
index 000000000..1f81911fe
--- /dev/null
+++ b/examples/parse-format/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "formik-example-parse-format",
+  "version": "0.1.0",
+  "description": "This example demonstrates how to use parse and format to create an input mask with Formik",
+  "main": "index.js",
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0",
+    "formik": "latest"
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "semi": true
+  }
+}

From 9be5333cad9e3b1c1d30749a84a140ab63471c08 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Thu, 6 Feb 2020 11:12:30 -0500
Subject: [PATCH 04/51] Fix examples

---
 examples/format-string-by-pattern/README.md   |  5 ++
 examples/format-string-by-pattern/index.js    | 50 +++++++++++++++++++
 .../format-string-by-pattern/package.json     | 18 +++++++
 examples/parse-format/index.js                | 37 +++++---------
 packages/formik/src/Field.tsx                 |  2 +-
 5 files changed, 87 insertions(+), 25 deletions(-)
 create mode 100644 examples/format-string-by-pattern/README.md
 create mode 100644 examples/format-string-by-pattern/index.js
 create mode 100644 examples/format-string-by-pattern/package.json

diff --git a/examples/format-string-by-pattern/README.md b/examples/format-string-by-pattern/README.md
new file mode 100644
index 000000000..05f5a0939
--- /dev/null
+++ b/examples/format-string-by-pattern/README.md
@@ -0,0 +1,5 @@
+# Formik Formating Strings by Pattern Example
+
+This example demonstrates how to format a string by a pattern with Formik. We use the [format-string-by-pattern](https://github.com/arthurdenner/format-string-by-pattern) package to help with parsing.
+
+[![Edit formik-example-format-string-by-patter](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/jaredpalmer/formik/tree/master/examples/format-string-by-patter?fontsize=14&hidenavigation=1&theme=dark)
diff --git a/examples/format-string-by-pattern/index.js b/examples/format-string-by-pattern/index.js
new file mode 100644
index 000000000..d3da73e99
--- /dev/null
+++ b/examples/format-string-by-pattern/index.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+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 => new Promise(r => setTimeout(r, ms));
+
+const Example = () => {
+  return (
+    <div>
+      <Formik
+        initialValues={masks.reduce((prev, curr) => {
+          prev[curr.name] = '';
+          return prev;
+        }, {})}
+        onSubmit={async values => {
+          await sleep(500);
+          alert(JSON.stringify(values, null, 2));
+        }}
+        render={({ values }) => (
+          <Form>
+            {masks.map(mask => (
+              <div key={mask.name}>
+                <label>
+                  {mask.name}
+                  <Field
+                    name={mask.name}
+                    parse={formatString(mask.parse)}
+                    placeholder={mask.parse}
+                  />
+                </label>
+              </div>
+            ))}
+
+            <button type="submit">Submit</button>
+            <pre>{JSON.stringify(values, null, 2)}</pre>
+          </Form>
+        )}
+      />
+    </div>
+  );
+};
+
+ReactDOM.render(<Example />, document.getElementById('root'));
diff --git a/examples/format-string-by-pattern/package.json b/examples/format-string-by-pattern/package.json
new file mode 100644
index 000000000..a585d84ce
--- /dev/null
+++ b/examples/format-string-by-pattern/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "formik-example-format-string-by-pattern",
+  "version": "0.1.0",
+  "description": "This example demonstrates how to format a string by a pattern with Formik",
+  "main": "index.js",
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0",
+    "format-string-by-pattern": "1.1.1",
+    "formik": "latest"
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "semi": true
+  }
+}
diff --git a/examples/parse-format/index.js b/examples/parse-format/index.js
index 5d3eedb59..6791843ab 100644
--- a/examples/parse-format/index.js
+++ b/examples/parse-format/index.js
@@ -2,46 +2,35 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Formik, Field, Form } from 'formik';
 
-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 => new Promise(r => setTimeout(r, ms));
 
 const Example = () => {
   return (
     <div>
       <Formik
-        initialValues={masks.reduce((prev, curr) => {
-          prev[curr.name] = '';
-          return prev;
-        }, {})}
+        initialValues={{
+          username: '',
+        }}
         onSubmit={async values => {
           await sleep(500);
           alert(JSON.stringify(values, null, 2));
         }}
-        render={({ values }) => (
+      >
+        {({ values }) => (
           <Form>
-            {masks.map(mask => (
-              <div key={mask.name}>
-                <label>
-                  {mask.name}
-                  <Field
-                    name={mask.name}
-                    parse={formatString(mask.parse)}
-                    placeholder={mask.parse}
-                  />
-                </label>
-              </div>
-            ))}
+            <label htmlFor="username">Username</label>
+            <Field
+              id="username"
+              name="username"
+              parse={value => value && value.toUpperCase()}
+              format={value => (value ? value.toLowerCase() : '')}
+            />
 
             <button type="submit">Submit</button>
             <pre>{JSON.stringify(values, null, 2)}</pre>
           </Form>
         )}
-      />
+      </Formik>
     </div>
   );
 };
diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx
index 5091a5fcb..7f784b3c2 100644
--- a/packages/formik/src/Field.tsx
+++ b/packages/formik/src/Field.tsx
@@ -55,7 +55,7 @@ export interface FieldConfig<V = any> {
   /**
    * Function to parse raw input value before setting it to state
    */
-  parse?: (value: any, name: string) => any;
+  parse?: (value: unknown, name: string) => any;
 
   /**
    * Function to transform value passed to input

From d89ed12117546c6ab4275d67b94a83790ef1d2f4 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Thu, 6 Feb 2020 13:02:02 -0500
Subject: [PATCH 05/51] Smarter react native event handling

---
 packages/formik/src/Formik.tsx | 29 ++++++++++++++++++++++++-----
 packages/formik/src/utils.ts   |  7 +++++++
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
index 35fa15cfc..af0206f24 100755
--- a/packages/formik/src/Formik.tsx
+++ b/packages/formik/src/Formik.tsx
@@ -25,6 +25,7 @@ import {
   getIn,
   isObject,
   isInputEvent,
+  isReactNative,
 } from './utils';
 import { FormikProvider } from './FormikContext';
 import invariant from 'tiny-warning';
@@ -910,9 +911,20 @@ export function useFormik<Values extends FormikValues = FormikValues>({
 
   const getValueFromEvent = useEventCallback(
     (event: React.SyntheticEvent<any>, fieldName: string) => {
-      if (event.persist) {
-        event.persist();
+      // React Native/Expo Web/maybe other render envs
+      if (
+        !isReactNative &&
+        event.nativeEvent &&
+        (event.nativeEvent as any).text !== undefined
+      ) {
+        return (event.nativeEvent as any).text;
       }
+
+      // React Native
+      if (isReactNative && event.nativeEvent) {
+        return (event.nativeEvent as any).text;
+      }
+
       const target = event.target ? event.target : event.currentTarget;
       const { type, value, checked, options, multiple } = target;
       let val;
@@ -1208,9 +1220,16 @@ function arrayMerge(target: any[], source: any[], options: any): any[] {
 
 /** Return multi select values based on an array of options */
 function getSelectedValues(options: any[]) {
-  return Array.from(options)
-    .filter(el => el.selected)
-    .map(el => el.value);
+  const result = [];
+  if (options) {
+    for (let index = 0; index < options.length; index++) {
+      const option = options[index];
+      if (option.selected) {
+        result.push(option.value);
+      }
+    }
+  }
+  return result;
 }
 
 /** Return the next value for a checkbox */
diff --git a/packages/formik/src/utils.ts b/packages/formik/src/utils.ts
index 0acfe710b..17d4374f0 100755
--- a/packages/formik/src/utils.ts
+++ b/packages/formik/src/utils.ts
@@ -40,6 +40,13 @@ export const isPromise = (value: any): value is PromiseLike<any> =>
 export const isInputEvent = (value: any): value is React.SyntheticEvent<any> =>
   value && isObject(value) && isObject(value.target);
 
+/** @private Are we in RN? */
+export const isReactNative =
+  typeof window !== 'undefined' &&
+  window.navigator &&
+  window.navigator.product &&
+  window.navigator.product === 'ReactNative';
+
 /**
  * Same as document.activeElement but wraps in a try-catch block. In IE it is
  * not safe to call document.activeElement if there is nothing focused.

From ca194f71b99ca4b4f8246005a26fb02887e5461c Mon Sep 17 00:00:00 2001
From: John Rom <web@johnrom.com>
Date: Mon, 9 Mar 2020 09:29:30 -0400
Subject: [PATCH 06/51] Parse Format PR Review Changes (#2280)

* Moved default number parse logic from onChange to parse

* tests: onChange is no longer equal to handleChange

* Remove parse and format from input props
---
 packages/formik/src/Field.tsx       |  4 ++--
 packages/formik/src/Formik.tsx      | 15 ++++++++-------
 packages/formik/test/Field.test.tsx | 12 ++++++------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx
index 7f784b3c2..4b0cfa122 100644
--- a/packages/formik/src/Field.tsx
+++ b/packages/formik/src/Field.tsx
@@ -208,7 +208,7 @@ export function Field({
   if (component) {
     // This behavior is backwards compat with earlier Formik 0.9 to 1.x
     if (typeof component === 'string') {
-      const { innerRef, ...rest } = props;
+      const { innerRef, parse, format, ...rest } = props;
       return React.createElement(
         component,
         { ref: innerRef, ...field, ...rest },
@@ -227,7 +227,7 @@ export function Field({
   const asElement = is || 'input';
 
   if (typeof asElement === 'string') {
-    const { innerRef, ...rest } = props;
+    const { innerRef, parse, format, ...rest } = props;
     return React.createElement(
       asElement,
       { ref: innerRef, ...field, ...rest },
diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
index af0206f24..77c6f9ff4 100755
--- a/packages/formik/src/Formik.tsx
+++ b/packages/formik/src/Formik.tsx
@@ -54,6 +54,11 @@ type FormikMessage<Values> =
     };
 
 const defaultParseFn = (value: unknown, _name: string) => value;
+const numberParseFn = (value: any, _name: string) => {
+  const parsed = parseFloat(value);
+
+  return isNaN(parsed) ? '' : parsed;
+};
 
 const defaultFormatFn = (value: unknown, _name: string) =>
   value === undefined ? '' : value;
@@ -927,16 +932,12 @@ export function useFormik<Values extends FormikValues = FormikValues>({
 
       const target = event.target ? event.target : event.currentTarget;
       const { type, value, checked, options, multiple } = target;
-      let val;
-      let parsed;
-      val = /number|range/.test(type)
-        ? ((parsed = parseFloat(value)), isNaN(parsed) ? '' : parsed)
-        : /checkbox/.test(type) // checkboxes
+
+      return /checkbox/.test(type) // checkboxes
         ? getValueForCheckbox(getIn(state.values, fieldName!), checked, value)
         : !!multiple // <select multiple>
         ? getSelectedValues(options)
         : value;
-      return val;
     }
   );
 
@@ -963,7 +964,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
           value: valueProp, // value is special for checkboxes
           as: is,
           multiple,
-          parse = defaultParseFn,
+          parse = /number|range/.test(type) ? numberParseFn : defaultParseFn,
           format = defaultFormatFn,
           formatOnBlur = false,
         } = nameOrOptions;
diff --git a/packages/formik/test/Field.test.tsx b/packages/formik/test/Field.test.tsx
index 3d227caeb..df11f2f47 100644
--- a/packages/formik/test/Field.test.tsx
+++ b/packages/formik/test/Field.test.tsx
@@ -124,11 +124,11 @@ describe('Field / FastField', () => {
         </>
       );
 
-      const { handleBlur, handleChange } = getFormProps();
+      const { handleBlur } = getFormProps();
       injected.forEach((props, idx) => {
         expect(props.field.name).toBe('name');
         expect(props.field.value).toBe('jared');
-        expect(props.field.onChange).toBe(handleChange);
+        expect(props.field.onChange).toEqual(expect.any(Function));
         expect(props.field.onBlur).toBe(handleBlur);
         expect(props.form).toEqual(getFormProps());
         if (idx !== 2) {
@@ -145,7 +145,7 @@ describe('Field / FastField', () => {
 
       expect(asInjectedProps.name).toBe('name');
       expect(asInjectedProps.value).toBe('jared');
-      expect(asInjectedProps.onChange).toBe(handleChange);
+      expect(asInjectedProps.onChange).toEqual(expect.any(Function));
       expect(asInjectedProps.onBlur).toBe(handleBlur);
 
       expect(queryAllByText(TEXT)).toHaveLength(4);
@@ -170,11 +170,11 @@ describe('Field / FastField', () => {
         </>
       );
 
-      const { handleBlur, handleChange } = getFormProps();
+      const { handleBlur } = getFormProps();
       injected.forEach((props, idx) => {
         expect(props.field.name).toBe('name');
         expect(props.field.value).toBe('jared');
-        expect(props.field.onChange).toBe(handleChange);
+        expect(props.field.onChange).toEqual(expect.any(Function));
         expect(props.field.onBlur).toBe(handleBlur);
         expect(props.form).toEqual(getFormProps());
         if (idx !== 2) {
@@ -191,7 +191,7 @@ describe('Field / FastField', () => {
 
       expect(asInjectedProps.name).toBe('name');
       expect(asInjectedProps.value).toBe('jared');
-      expect(asInjectedProps.onChange).toBe(handleChange);
+      expect(asInjectedProps.onChange).toEqual(expect.any(Function));
       expect(asInjectedProps.onBlur).toBe(handleBlur);
       expect(queryAllByText(TEXT)).toHaveLength(4);
     });

From d750a8f8124845bc1f82be116633b1de4360937a Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Thu, 17 Sep 2020 10:31:30 -0400
Subject: [PATCH 07/51] Migate context to use-context-selector

---
 packages/formik/package.json          |  3 ++-
 packages/formik/src/Formik.tsx        | 13 ++++++++++---
 packages/formik/src/FormikContext.tsx | 21 ++++++++++++++++++---
 packages/formik/src/connect.tsx       | 15 +++++++--------
 yarn.lock                             | 17 +++++++----------
 5 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/packages/formik/package.json b/packages/formik/package.json
index b434ff6bd..e8a4a52d8 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -48,7 +48,8 @@
     "react-fast-compare": "^2.0.1",
     "scheduler": "^0.18.0",
     "tiny-warning": "^1.0.2",
-    "tslib": "^1.10.0"
+    "tslib": "^1.10.0",
+    "use-context-selector": "^1.1.2"
   },
   "resolutions": {
     "@types/react": "16.9.17",
diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
index f27a8d7cc..20a2bf533 100755
--- a/packages/formik/src/Formik.tsx
+++ b/packages/formik/src/Formik.tsx
@@ -12,7 +12,8 @@ import {
   FieldMetaProps,
   FieldHelperProps,
   FieldInputProps,
-  FormikHelpers, FormikHandlers,
+  FormikHelpers,
+  FormikHandlers,
 } from './types';
 import {
   isFunction,
@@ -455,7 +456,13 @@ export function useFormik<Values extends FormikValues = FormikValues>({
         validateFormWithLowPriority(initialValues.current);
       }
     }
-  }, [enableReinitialize, props.initialValues, resetForm, validateOnMount, validateFormWithLowPriority]);
+  }, [
+    enableReinitialize,
+    props.initialValues,
+    resetForm,
+    validateOnMount,
+    validateFormWithLowPriority,
+  ]);
 
   React.useEffect(() => {
     if (
@@ -621,7 +628,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
       if (!isString(eventOrTextValue)) {
         // If we can, persist the event
         // @see https://reactjs.org/docs/events.html#event-pooling
-        if ((eventOrTextValue as React.ChangeEvent<any>).persist) {
+        if (!!(eventOrTextValue as React.ChangeEvent<any>).persist) {
           (eventOrTextValue as React.ChangeEvent<any>).persist();
         }
         const target = eventOrTextValue.target
diff --git a/packages/formik/src/FormikContext.tsx b/packages/formik/src/FormikContext.tsx
index 7c27ae3c6..7daab0da3 100644
--- a/packages/formik/src/FormikContext.tsx
+++ b/packages/formik/src/FormikContext.tsx
@@ -1,15 +1,30 @@
 import * as React from 'react';
 import { FormikContextType } from './types';
 import invariant from 'tiny-warning';
+import { createContext, useContextSelector } from 'use-context-selector';
 
-export const FormikContext = React.createContext<FormikContextType<any>>(
+export const FormikContext = createContext<FormikContextType<any>>(
   undefined as any
 );
 export const FormikProvider = FormikContext.Provider;
-export const FormikConsumer = FormikContext.Consumer;
+
+export function FormikConsumer<Values = any>({
+  children,
+}: {
+  children: (formik: FormikContextType<Values>) => React.ReactNode;
+}) {
+  const formik = useContextSelector(
+    FormikContext,
+    React.useCallback(c => c, [])
+  ) as FormikContextType<Values>;
+  return <>{children(formik)}</>;
+}
 
 export function useFormikContext<Values>() {
-  const formik = React.useContext<FormikContextType<Values>>(FormikContext);
+  const formik = useContextSelector(
+    FormikContext,
+    React.useCallback(c => c, [])
+  ) as FormikContextType<Values>;
 
   invariant(
     !!formik,
diff --git a/packages/formik/src/connect.tsx b/packages/formik/src/connect.tsx
index a009d0e76..8bc51892d 100644
--- a/packages/formik/src/connect.tsx
+++ b/packages/formik/src/connect.tsx
@@ -1,9 +1,8 @@
-import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-
-import { FormikContextType } from './types';
-import { FormikConsumer } from './FormikContext';
+import * as React from 'react';
 import invariant from 'tiny-warning';
+import { FormikConsumer } from './FormikContext';
+import { FormikContextType } from './types';
 
 /**
  * Connect any component to Formik context, and inject as a prop called `formik`;
@@ -12,16 +11,16 @@ import invariant from 'tiny-warning';
 export function connect<OuterProps, Values = {}>(
   Comp: React.ComponentType<OuterProps & { formik: FormikContextType<Values> }>
 ) {
-  const C: React.SFC<OuterProps> = (props: OuterProps) => (
-    <FormikConsumer>
-      {formik => {
+  const C: React.FC<OuterProps> = (props: OuterProps) => (
+    <FormikConsumer
+      children={(formik: FormikContextType<Values>) => {
         invariant(
           !!formik,
           `Formik context is undefined, please verify you are rendering <Form>, <Field>, <FastField>, <FieldArray>, or your custom context-using component as a child of a <Formik> component. Component name: ${Comp.name}`
         );
         return <Comp {...props} formik={formik} />;
       }}
-    </FormikConsumer>
+    />
   );
   const componentDisplayName =
     Comp.displayName ||
diff --git a/yarn.lock b/yarn.lock
index 0892bed93..1197ba708 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2173,7 +2173,7 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/react-dom@^16.9.4":
+"@types/react-dom@16.9.4", "@types/react-dom@^16.9.4":
   version "16.9.4"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
   integrity sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==
@@ -2188,15 +2188,7 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.23":
-  version "16.9.16"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.16.tgz#4f12515707148b1f53a8eaa4341dae5dfefb066d"
-  integrity sha512-dQ3wlehuBbYlfvRXfF5G+5TbZF3xqgkikK7DWAsQXe2KnzV+kjD4W2ea+ThCrKASZn9h98bjjPzoTYzfRqyBkw==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^2.2.0"
-
-"@types/react@^16.9.17":
+"@types/react@*", "@types/react@16.9.17", "@types/react@^16.8.23", "@types/react@^16.9.17":
   version "16.9.17"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
   integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==
@@ -12230,6 +12222,11 @@ url-to-options@^1.0.1:
   resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
   integrity sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=
 
+use-context-selector@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-context-selector/-/use-context-selector-1.1.2.tgz#63bf6e3502fd383f1257c49df2495e05564d262e"
+  integrity sha512-uwtrMKEHjZQ8JXMZLUljVDY4CqpAC3MgMcmtpZACG+pJeJ7GNDzBW0thC2RbJX2wKYMvLtYRXgQEqaOnmlF/KQ==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

From e2fe6720d4c25c30026802dc47225c52d04d1500 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 27 Oct 2020 13:57:23 -0400
Subject: [PATCH 08/51] Enter prerelease mode

---
 .changeset/pre.json | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/pre.json

diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 000000000..dfc5034dd
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,9 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "formik": "2.2.1",
+    "formik-native": "2.1.9"
+  },
+  "changesets": []
+}

From 5efd691b8784fda6645d362189f55c618f030758 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 27 Oct 2020 14:27:07 -0400
Subject: [PATCH 09/51] Add changeset

---
 .changeset/quiet-beans-attack.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/quiet-beans-attack.md

diff --git a/.changeset/quiet-beans-attack.md b/.changeset/quiet-beans-attack.md
new file mode 100644
index 000000000..00169e094
--- /dev/null
+++ b/.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.

From 18f82f87a535b4206c47837933d99833a46aca24 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 27 Oct 2020 14:27:49 -0400
Subject: [PATCH 10/51] Format string

---
 examples/format-string-by-pattern/index.js | 6 +++---
 examples/parse-format/index.js             | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/examples/format-string-by-pattern/index.js b/examples/format-string-by-pattern/index.js
index d3da73e99..ab0703d96 100644
--- a/examples/format-string-by-pattern/index.js
+++ b/examples/format-string-by-pattern/index.js
@@ -9,7 +9,7 @@ const masks = [
   { name: 'phone-3', parse: '+49 (AAAA) BBBBBB' },
 ];
 
-const sleep = ms => new Promise(r => setTimeout(r, ms));
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
 const Example = () => {
   return (
@@ -19,13 +19,13 @@ const Example = () => {
           prev[curr.name] = '';
           return prev;
         }, {})}
-        onSubmit={async values => {
+        onSubmit={async (values) => {
           await sleep(500);
           alert(JSON.stringify(values, null, 2));
         }}
         render={({ values }) => (
           <Form>
-            {masks.map(mask => (
+            {masks.map((mask) => (
               <div key={mask.name}>
                 <label>
                   {mask.name}
diff --git a/examples/parse-format/index.js b/examples/parse-format/index.js
index 6791843ab..c8cdc35ac 100644
--- a/examples/parse-format/index.js
+++ b/examples/parse-format/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Formik, Field, Form } from 'formik';
 
-const sleep = ms => new Promise(r => setTimeout(r, ms));
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
 const Example = () => {
   return (
@@ -11,7 +11,7 @@ const Example = () => {
         initialValues={{
           username: '',
         }}
-        onSubmit={async values => {
+        onSubmit={async (values) => {
           await sleep(500);
           alert(JSON.stringify(values, null, 2));
         }}
@@ -22,8 +22,8 @@ const Example = () => {
             <Field
               id="username"
               name="username"
-              parse={value => value && value.toUpperCase()}
-              format={value => (value ? value.toLowerCase() : '')}
+              parse={(value) => value && value.toUpperCase()}
+              format={(value) => (value ? value.toLowerCase() : '')}
             />
 
             <button type="submit">Submit</button>

From 3d46ee57246e65f5eac4411b4b885cf63c8df103 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 27 Oct 2020 18:41:57 +0000
Subject: [PATCH 11/51] Version Packages (next)

---
 .changeset/pre.json                 | 4 +++-
 packages/formik-native/CHANGELOG.md | 7 +++++++
 packages/formik-native/package.json | 4 ++--
 packages/formik/CHANGELOG.md        | 9 +++++++++
 packages/formik/package.json        | 2 +-
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index dfc5034dd..63b5e6c9f 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -5,5 +5,7 @@
     "formik": "2.2.1",
     "formik-native": "2.1.9"
   },
-  "changesets": []
+  "changesets": [
+    "quiet-beans-attack"
+  ]
 }
diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
index 90e6960f2..aed8abc95 100644
--- a/packages/formik-native/CHANGELOG.md
+++ b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # formik-native
 
+## 2.1.10-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`5efd691`](https://github.com/formium/formik/commit/5efd691b8784fda6645d362189f55c618f030758)]:
+  - formik@3.0.0-next.0
+
 ## 2.1.9
 
 ### Patch Changes
diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
index 7804cb5aa..6232f9f13 100644
--- a/packages/formik-native/package.json
+++ b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.9",
+  "version": "2.1.10-next.0",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -31,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "2.2.1"
+    "formik": "3.0.0-next.0"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
index c22053307..21dfa5bfd 100644
--- a/packages/formik/CHANGELOG.md
+++ b/packages/formik/CHANGELOG.md
@@ -1,5 +1,14 @@
 # formik
 
+## 3.0.0-next.0
+
+### Major Changes
+
+- [`5efd691`](https://github.com/formium/formik/commit/5efd691b8784fda6645d362189f55c618f030758) [#2255](https://github.com/formium/formik/pull/2255) Thanks [@jaredpalmer](https://github.com/jaredpalmer)! - 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.
+
 ## 2.2.1
 
 ### Patch Changes
diff --git a/packages/formik/package.json b/packages/formik/package.json
index 34f22772f..0afc75db5 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "2.2.1",
+  "version": "3.0.0-next.0",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",

From ff681d305747b74db3efd6cefbdd6afc0a8dbeeb Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 27 Oct 2020 14:46:41 -0400
Subject: [PATCH 12/51] Fix format by string pattern example

---
 examples/format-string-by-pattern/index.js | 36 +++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/examples/format-string-by-pattern/index.js b/examples/format-string-by-pattern/index.js
index ab0703d96..4370b5e6f 100644
--- a/examples/format-string-by-pattern/index.js
+++ b/examples/format-string-by-pattern/index.js
@@ -23,26 +23,26 @@ const Example = () => {
           await sleep(500);
           alert(JSON.stringify(values, null, 2));
         }}
-        render={({ values }) => (
-          <Form>
-            {masks.map((mask) => (
-              <div key={mask.name}>
-                <label>
-                  {mask.name}
-                  <Field
-                    name={mask.name}
-                    parse={formatString(mask.parse)}
-                    placeholder={mask.parse}
-                  />
-                </label>
-              </div>
-            ))}
+      >
+        <Form>
+          {masks.map((mask) => (
+            <div key={mask.name}>
+              <label>
+                {mask.name}
+                <Field
+                  name={mask.name}
+                  parse={formatString(mask.parse)}
+                  placeholder={mask.parse}
+                />
+              </label>
+            </div>
+          ))}
 
-            <button type="submit">Submit</button>
-            <pre>{JSON.stringify(values, null, 2)}</pre>
-          </Form>
+          <button type="submit">Submit</button>
+          <pre>{JSON.stringify(values, null, 2)}</pre>
+        </Form>
         )}
-      />
+      </Formik>
     </div>
   );
 };

From d12154623c1ed22f135ea50724a9ce64f776eff8 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 27 Oct 2020 15:21:46 -0400
Subject: [PATCH 13/51] Fix parse and format in Field component

---
 app/package.json                   |  1 +
 app/pages/format.tsx               | 46 ++++++++++++++++++++++++++++++
 app/pages/index.tsx                |  5 ++++
 cypress/integration/format.spec.ts | 15 ++++++++++
 packages/formik/src/Field.tsx      | 18 +++++++-----
 5 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 app/pages/format.tsx
 create mode 100644 cypress/integration/format.spec.ts

diff --git a/app/package.json b/app/package.json
index d29ce15bb..c7a78a18e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "format-string-by-pattern": "^1.2.1",
     "formik": "^2.1.5",
     "next": "9.5.3",
     "react": "16.13.1",
diff --git a/app/pages/format.tsx b/app/pages/format.tsx
new file mode 100644
index 000000000..35f42e3f4
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
index 30daffeed..cffed6a9f 100644
--- a/app/pages/index.tsx
+++ b/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 {
diff --git a/cypress/integration/format.spec.ts b/cypress/integration/format.spec.ts
new file mode 100644
index 000000000..386bbcc28
--- /dev/null
+++ b/cypress/integration/format.spec.ts
@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+describe('format and parse', () => {
+  it('parse strings', () => {
+    cy.visit('http://localhost:3000/format');
+
+    // Check that Formik can parse with Field
+    cy.get('input[name="phone-1"]').type('9999999999');
+    cy.get('input[name="phone-1"]').should('have.value', '999-999-9999');
+    cy.get('input[name="phone-2"]').type('9999999999');
+    cy.get('input[name="phone-2"]').should('have.value', '(999) 999-9999');
+    cy.get('input[name="phone-3"]').type('+49AAAABBBBBB');
+    cy.get('input[name="phone-3"]').should('have.value', '+49 (AAAA) BBBBBB');
+  });
+});
diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx
index 5981c23d9..2f06f0e87 100644
--- a/packages/formik/src/Field.tsx
+++ b/packages/formik/src/Field.tsx
@@ -60,7 +60,7 @@ export interface FieldConfig<V = any> {
   /**
    * Function to transform value passed to input
    */
-  format?: (value: any, name: string) => any;
+  format?: (value: unknown, name: string) => any;
 
   /**
    * Wait until blur event before formatting input value?
@@ -194,7 +194,10 @@ export function Field({
       unregisterField(name);
     };
   }, [registerField, unregisterField, name, validate]);
-  const field = formik.getFieldProps({ name, ...props });
+  const field = formik.getFieldProps({
+    name,
+    ...props,
+  });
   const meta = formik.getFieldMeta(name);
   const legacyBag = { field, form: formik };
 
@@ -209,7 +212,7 @@ export function Field({
   if (component) {
     // This behavior is backwards compat with earlier Formik 0.9 to 1.x
     if (typeof component === 'string') {
-      const { innerRef, parse, format, ...rest } = props;
+      const { innerRef, parse, format, formatOnBlur, ...rest } = props;
       return React.createElement(
         component,
         { ref: innerRef, ...field, ...rest },
@@ -217,9 +220,10 @@ export function Field({
       );
     }
     // We don't pass `meta` for backwards compat
+    const { parse, format, formatOnBlur, ...rest } = props;
     return React.createElement(
       component,
-      { field, form: formik, ...props },
+      { field, form: formik, ...rest },
       children
     );
   }
@@ -228,13 +232,13 @@ export function Field({
   const asElement = is || 'input';
 
   if (typeof asElement === 'string') {
-    const { innerRef, parse, format, ...rest } = props;
+    const { innerRef, parse, format, formatOnBlur, ...rest } = props;
     return React.createElement(
       asElement,
       { ref: innerRef, ...field, ...rest },
       children
     );
   }
-
-  return React.createElement(asElement, { ...field, ...props }, children);
+  const { parse, format, formatOnBlur, ...rest } = props;
+  return React.createElement(asElement, { ...field, ...rest }, children);
 }

From 1c2175a24b1d1223b4cdedf424ef62057edf0063 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 27 Oct 2020 15:22:59 -0400
Subject: [PATCH 14/51] Add changeset

---
 .changeset/little-olives-enjoy.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/little-olives-enjoy.md

diff --git a/.changeset/little-olives-enjoy.md b/.changeset/little-olives-enjoy.md
new file mode 100644
index 000000000..359a3ba39
--- /dev/null
+++ b/.changeset/little-olives-enjoy.md
@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Ensure that parse and format aren't passed through in Field components

From 86ed17fde5d6066a9be6d463c59d44a1c205ad0b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 27 Oct 2020 19:42:03 +0000
Subject: [PATCH 15/51] Version Packages (next)

---
 .changeset/pre.json                 | 1 +
 packages/formik-native/CHANGELOG.md | 7 +++++++
 packages/formik-native/package.json | 4 ++--
 packages/formik/CHANGELOG.md        | 6 ++++++
 packages/formik/package.json        | 2 +-
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 63b5e6c9f..b512f5604 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -6,6 +6,7 @@
     "formik-native": "2.1.9"
   },
   "changesets": [
+    "little-olives-enjoy",
     "quiet-beans-attack"
   ]
 }
diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
index aed8abc95..7856b38f3 100644
--- a/packages/formik-native/CHANGELOG.md
+++ b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # formik-native
 
+## 2.1.10-next.1
+
+### Patch Changes
+
+- Updated dependencies [[`1c2175a`](https://github.com/formium/formik/commit/1c2175a24b1d1223b4cdedf424ef62057edf0063)]:
+  - formik@3.0.0-next.1
+
 ## 2.1.10-next.0
 
 ### Patch Changes
diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
index 6232f9f13..e161f55e8 100644
--- a/packages/formik-native/package.json
+++ b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.10-next.0",
+  "version": "2.1.10-next.1",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -31,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "3.0.0-next.0"
+    "formik": "3.0.0-next.1"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
index 21dfa5bfd..234a7c8d5 100644
--- a/packages/formik/CHANGELOG.md
+++ b/packages/formik/CHANGELOG.md
@@ -1,5 +1,11 @@
 # formik
 
+## 3.0.0-next.1
+
+### Patch Changes
+
+- [`1c2175a`](https://github.com/formium/formik/commit/1c2175a24b1d1223b4cdedf424ef62057edf0063) [#2848](https://github.com/formium/formik/pull/2848) Thanks [@jaredpalmer](https://github.com/jaredpalmer)! - Ensure that parse and format aren't passed through in Field components
+
 ## 3.0.0-next.0
 
 ### Major Changes
diff --git a/packages/formik/package.json b/packages/formik/package.json
index 0afc75db5..5807223f5 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "3.0.0-next.0",
+  "version": "3.0.0-next.1",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",

From 71a9652ed5aaf9714125401e44e67a34874f88e7 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Tue, 27 Oct 2020 16:23:33 -0400
Subject: [PATCH 16/51] Fix format by string example

---
 examples/format-string-by-pattern/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/examples/format-string-by-pattern/index.js b/examples/format-string-by-pattern/index.js
index 4370b5e6f..cf351ec3c 100644
--- a/examples/format-string-by-pattern/index.js
+++ b/examples/format-string-by-pattern/index.js
@@ -39,9 +39,7 @@ const Example = () => {
           ))}
 
           <button type="submit">Submit</button>
-          <pre>{JSON.stringify(values, null, 2)}</pre>
         </Form>
-        )}
       </Formik>
     </div>
   );

From 6cf0e938a5e02ba099d56526de609bbfe8e79676 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Wed, 28 Oct 2020 10:27:50 -0400
Subject: [PATCH 17/51] Add an unlink script to package.json

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 96ad496d6..8adf6285e 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,8 @@
     "cypress": "cypress run",
     "precommit": "lint-staged",
     "cypress:open": "cypress open",
-    "start:app": "npm run build && yarn --cwd packages/formik link && yarn --cwd node_modules/react link && yarn --cwd ./app link react formik && yarn --cwd ./app && yarn --cwd ./app run dev"
+    "start:app": "npm run build && yarn --cwd packages/formik link && yarn --cwd node_modules/react link && yarn --cwd ./app link react formik && yarn --cwd ./app && yarn --cwd ./app run dev",
+    "unlink": "yarn --cwd node_modules/react unlink && yarn --cwd packages/formik unlink"
   },
   "lint-staged": {
     "**/*.{ts,tsx,md,mdx,js,jsx}": [

From 235df97ab10ba93cf615f6e01b8eec2e6c7f0c1a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sat, 7 Nov 2020 18:15:47 +0000
Subject: [PATCH 18/51] Version Packages (next)

---
 .changeset/pre.json                 | 4 +++-
 packages/formik-native/CHANGELOG.md | 9 +++++++++
 packages/formik-native/package.json | 8 +++-----
 packages/formik/CHANGELOG.md        | 8 ++++++++
 packages/formik/package.json        | 2 +-
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index b512f5604..21329e77b 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -7,6 +7,8 @@
   },
   "changesets": [
     "little-olives-enjoy",
-    "quiet-beans-attack"
+    "moody-apples-return",
+    "quiet-beans-attack",
+    "tough-dragons-dream"
   ]
 }
diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
index 34b183107..d51034fc4 100644
--- a/packages/formik-native/CHANGELOG.md
+++ b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,14 @@
 # formik-native
 
+## 2.1.10-next.2
+
+### Patch Changes
+
+- [`e0a28e6`](https://github.com/formium/formik/commit/e0a28e6872ebfd06e636aac84829b60d704b0694) [#2867](https://github.com/formium/formik/pull/2867) Thanks [@umidbekkarimov](https://github.com/umidbekkarimov)! - Fix low priority validation for browser password autofill.
+
+- Updated dependencies [[`e0a28e6`](https://github.com/formium/formik/commit/e0a28e6872ebfd06e636aac84829b60d704b0694), [`958d67c`](https://github.com/formium/formik/commit/958d67ca2c3e006031c31150ea0a42248b28ffc7)]:
+  - formik@3.0.0-next.2
+
 ## 2.1.10-next.1
 
 ### Patch Changes
diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
index b35ce0f77..16fca5d27 100644
--- a/packages/formik-native/package.json
+++ b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.10-next.1",
+  "version": "2.1.10-next.2",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -19,9 +19,7 @@
   "module": "dist/index.esm.js",
   "react-native": "src/index.js",
   "typings": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "start": "tsdx watch --tsconfig tsconfig.build.json --verbose --noClean",
     "build": "tsdx build --tsconfig tsconfig.build.json",
@@ -33,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "3.0.0-next.1"
+    "formik": "3.0.0-next.2"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
index afc517de0..238b9f501 100644
--- a/packages/formik/CHANGELOG.md
+++ b/packages/formik/CHANGELOG.md
@@ -1,5 +1,13 @@
 # formik
 
+## 3.0.0-next.2
+
+### Patch Changes
+
+- [`e0a28e6`](https://github.com/formium/formik/commit/e0a28e6872ebfd06e636aac84829b60d704b0694) [#2867](https://github.com/formium/formik/pull/2867) Thanks [@umidbekkarimov](https://github.com/umidbekkarimov)! - Fix low priority validation for browser password autofill.
+
+* [`958d67c`](https://github.com/formium/formik/commit/958d67ca2c3e006031c31150ea0a42248b28ffc7) [#2874](https://github.com/formium/formik/pull/2874) Thanks [@maddhruv](https://github.com/maddhruv)! - fix FastField initial value when input type is radio or checkbox
+
 ## 3.0.0-next.1
 
 ### Patch Changes
diff --git a/packages/formik/package.json b/packages/formik/package.json
index e3f47f31b..c6f829b72 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.2",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",

From 9e1dd6226be407a00327b54d78b1ab090c311292 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Mon, 9 Nov 2020 12:22:42 -0500
Subject: [PATCH 19/51] Add formik codemod package

---
 packages/formik-codemod/.gitignore            |   5 +
 packages/formik-codemod/README.md             |   9 +
 packages/formik-codemod/bin/cli.ts            | 209 ++++++
 packages/formik-codemod/bin/formik-codemod.ts |  13 +
 packages/formik-codemod/package.json          |  24 +
 .../name-import.input.js                      |   1 +
 .../name-import.output.js                     |   1 +
 .../__tests__/field-to-legacy-field.test.js   |  15 +
 .../transforms/field-to-legacy-field.ts       |  15 +
 packages/formik-codemod/tsconfig.json         |  12 +
 yarn.lock                                     | 704 ++++++++++++++++--
 11 files changed, 934 insertions(+), 74 deletions(-)
 create mode 100644 packages/formik-codemod/.gitignore
 create mode 100644 packages/formik-codemod/README.md
 create mode 100644 packages/formik-codemod/bin/cli.ts
 create mode 100644 packages/formik-codemod/bin/formik-codemod.ts
 create mode 100644 packages/formik-codemod/package.json
 create mode 100644 packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.input.js
 create mode 100644 packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js
 create mode 100644 packages/formik-codemod/transforms/__tests__/field-to-legacy-field.test.js
 create mode 100644 packages/formik-codemod/transforms/field-to-legacy-field.ts
 create mode 100644 packages/formik-codemod/tsconfig.json

diff --git a/packages/formik-codemod/.gitignore b/packages/formik-codemod/.gitignore
new file mode 100644
index 000000000..5eadbe573
--- /dev/null
+++ b/packages/formik-codemod/.gitignore
@@ -0,0 +1,5 @@
+*.d.ts
+*.js
+*.js.map
+!transforms/__tests__/**/*.js
+!transforms/__testfixtures__/**/*.js
\ No newline at end of file
diff --git a/packages/formik-codemod/README.md b/packages/formik-codemod/README.md
new file mode 100644
index 000000000..6cc9dc2e6
--- /dev/null
+++ b/packages/formik-codemod/README.md
@@ -0,0 +1,9 @@
+# Formik Codemods
+
+Formik provides Codemod transformations to help upgrade your codebase when a feature is deprecated.
+
+Codemods are transformations that run on your codebase programmatically. This allows for a large amount of changes to be applied without having to manually go through every file.
+
+## Documentation
+
+Visit [formik.org/docs/codemods](https://formik.org/docs/codemods) to view the documentation for this package.
diff --git a/packages/formik-codemod/bin/cli.ts b/packages/formik-codemod/bin/cli.ts
new file mode 100644
index 000000000..528f56192
--- /dev/null
+++ b/packages/formik-codemod/bin/cli.ts
@@ -0,0 +1,209 @@
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/cli.js
+// @next/codemod optional-name-of-transform optional/path/to/src [...options]
+
+const globby = require('globby');
+const inquirer = require('inquirer');
+const meow = require('meow');
+const path = require('path');
+const execa = require('execa');
+const chalk = require('chalk');
+const isGitClean = require('is-git-clean');
+
+const transformerDirectory = path.join(__dirname, '../', 'transforms');
+const jscodeshiftExecutable = require.resolve('.bin/jscodeshift');
+
+function checkGitStatus(force) {
+  let clean = false;
+  let errorMessage = 'Unable to determine if git directory is clean';
+  try {
+    clean = isGitClean.sync(process.cwd());
+    errorMessage = 'Git directory is not clean';
+  } catch (err) {
+    if (err && err.stderr && err.stderr.indexOf('Not a git repository') >= 0) {
+      clean = true;
+    }
+  }
+
+  if (!clean) {
+    if (force) {
+      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
+    } else {
+      console.log('Thank you for using @formik/codemod!');
+      console.log(
+        chalk.yellow(
+          '\nBut before we continue, please stash or commit your git changes.'
+        )
+      );
+      console.log(
+        '\nYou may use the --force flag to override this safety check.'
+      );
+      process.exit(1);
+    }
+  }
+}
+
+function runTransform({ files, flags, transformer }) {
+  const transformerPath = path.join(transformerDirectory, `${transformer}.js`);
+
+  let args = [];
+
+  const { dry, print } = flags;
+
+  if (dry) {
+    args.push('--dry');
+  }
+  if (print) {
+    args.push('--print');
+  }
+
+  args.push('--verbose=2');
+
+  args.push('--ignore-pattern=**/node_modules/**');
+
+  args.push('--extensions=tsx,ts,jsx,js');
+  args.push('--parser=tsx');
+
+  args = args.concat(['--transform', transformerPath]);
+
+  if (flags.jscodeshift) {
+    args = args.concat(flags.jscodeshift);
+  }
+
+  args = args.concat(files);
+
+  console.log(`Executing command: jscodeshift ${args.join(' ')}`);
+
+  const result = execa.sync(jscodeshiftExecutable, args, {
+    stdio: 'inherit',
+    stripEof: false,
+  });
+
+  if (result.error) {
+    throw result.error;
+  }
+}
+
+const TRANSFORMER_INQUIRER_CHOICES = [
+  {
+    name:
+      'name-default-component: Transforms anonymous components into named components to make sure they work with Fast Refresh',
+    value: 'name-default-component',
+  },
+  {
+    name:
+      'withamp-to-config: Transforms the withAmp HOC into Next.js 9 page configuration',
+    value: 'withamp-to-config',
+  },
+  {
+    name:
+      'url-to-withrouter: Transforms the deprecated automatically injected url property on top level pages to using withRouter',
+    value: 'url-to-withrouter',
+  },
+];
+
+function expandFilePathsIfNeeded(filesBeforeExpansion) {
+  const shouldExpandFiles = filesBeforeExpansion.some(file =>
+    file.includes('*')
+  );
+  return shouldExpandFiles
+    ? globby.sync(filesBeforeExpansion)
+    : filesBeforeExpansion;
+}
+
+function run() {
+  const cli = meow(
+    {
+      description: 'Codemods for updating Formik in codebases.',
+      help: `
+    Usage
+      $ npx @formik/codemod <transform> <path> <...options>
+        transform    One of the choices from https://github.com/formium/formik/tree/master/packages/formik-codemod
+        path         Files or directory to transform. Can be a glob like pages/**.js
+    Options
+      --force            Bypass Git safety checks and forcibly run codemods
+      --dry              Dry run (no changes are made to files)
+      --print            Print transformed files to your terminal
+      --jscodeshift  (Advanced) Pass options directly to jscodeshift
+    `,
+    },
+    {
+      boolean: ['force', 'dry', 'print', 'help'],
+      string: ['_'],
+      alias: {
+        h: 'help',
+      },
+    }
+  );
+
+  if (!cli.flags.dry) {
+    checkGitStatus(cli.flags.force);
+  }
+
+  if (
+    cli.input[0] &&
+    !TRANSFORMER_INQUIRER_CHOICES.find(x => x.value === cli.input[0])
+  ) {
+    console.error('Invalid transform choice, pick one of:');
+    console.error(
+      TRANSFORMER_INQUIRER_CHOICES.map(x => '- ' + x.value).join('\n')
+    );
+    process.exit(1);
+  }
+
+  inquirer
+    .prompt([
+      {
+        type: 'input',
+        name: 'files',
+        message: 'On which files or directory should the codemods be applied?',
+        when: !cli.input[1],
+        default: '.',
+        // validate: () =>
+        filter: files => files.trim(),
+      },
+      {
+        type: 'list',
+        name: 'transformer',
+        message: 'Which transform would you like to apply?',
+        when: !cli.input[0],
+        pageSize: TRANSFORMER_INQUIRER_CHOICES.length,
+        choices: TRANSFORMER_INQUIRER_CHOICES,
+      },
+    ])
+    .then(answers => {
+      const { files, transformer } = answers;
+
+      const filesBeforeExpansion = cli.input[1] || files;
+      const filesExpanded = expandFilePathsIfNeeded([filesBeforeExpansion]);
+
+      const selectedTransformer = cli.input[0] || transformer;
+
+      if (!filesExpanded.length) {
+        console.log(
+          `No files found matching ${filesBeforeExpansion.join(' ')}`
+        );
+        return null;
+      }
+
+      return runTransform({
+        files: filesExpanded,
+        flags: cli.flags,
+        transformer: selectedTransformer,
+      });
+    });
+}
+
+module.exports = {
+  run: run,
+  runTransform: runTransform,
+  checkGitStatus: checkGitStatus,
+  jscodeshiftExecutable: jscodeshiftExecutable,
+  transformerDirectory: transformerDirectory,
+};
diff --git a/packages/formik-codemod/bin/formik-codemod.ts b/packages/formik-codemod/bin/formik-codemod.ts
new file mode 100644
index 000000000..8c336a0db
--- /dev/null
+++ b/packages/formik-codemod/bin/formik-codemod.ts
@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/react-codemod.js
+// next-codemod optional-name-of-transform optional/path/to/src [...options]
+
+require('./cli').run();
diff --git a/packages/formik-codemod/package.json b/packages/formik-codemod/package.json
new file mode 100644
index 000000000..e819eb683
--- /dev/null
+++ b/packages/formik-codemod/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@formik/codemod",
+  "version": "3.0.0-next.2",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "4.1.0",
+    "execa": "4.0.3",
+    "globby": "11.0.1",
+    "inquirer": "7.3.3",
+    "is-git-clean": "1.1.0",
+    "jscodeshift": "^0.6.4",
+    "meow": "7.0.1"
+  },
+  "files": [
+    "transforms/*.js",
+    "bin/*.js"
+  ],
+  "scripts": {
+    "prepublish": "yarn tsc -d -p tsconfig.json",
+    "build": "yarn tsc -d -w -p tsconfig.json",
+    "test": "jest"
+  },
+  "bin": "./bin/formik-codemod.js"
+}
diff --git a/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.input.js b/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.input.js
new file mode 100644
index 000000000..12a535a04
--- /dev/null
+++ b/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.input.js
@@ -0,0 +1 @@
+import { Formik, Field, Form } from 'formik';
diff --git a/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js b/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js
new file mode 100644
index 000000000..a1ec48bc8
--- /dev/null
+++ b/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js
@@ -0,0 +1 @@
+import { Formik, LegacyField as Field, Form } from 'formik';
diff --git a/packages/formik-codemod/transforms/__tests__/field-to-legacy-field.test.js b/packages/formik-codemod/transforms/__tests__/field-to-legacy-field.test.js
new file mode 100644
index 000000000..4c2aee1ae
--- /dev/null
+++ b/packages/formik-codemod/transforms/__tests__/field-to-legacy-field.test.js
@@ -0,0 +1,15 @@
+/* global jest */
+jest.autoMockOff();
+
+const defineTest = require('jscodeshift/dist/testUtils').defineTest;
+
+const fixtures = ['name-import'];
+
+fixtures.forEach(test =>
+  defineTest(
+    __dirname,
+    'field-to-legacy-field',
+    null,
+    `field-to-legacy-field/${test}`
+  )
+);
diff --git a/packages/formik-codemod/transforms/field-to-legacy-field.ts b/packages/formik-codemod/transforms/field-to-legacy-field.ts
new file mode 100644
index 000000000..bec83cf6f
--- /dev/null
+++ b/packages/formik-codemod/transforms/field-to-legacy-field.ts
@@ -0,0 +1,15 @@
+export default function transformer(file, api) {
+  // j is just a shorthand for the jscodeshift api
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const done = () => root.toSource();
+  const imports = root.find(j.ImportDeclaration, {
+    source: { value: 'formik' },
+  });
+
+  if (imports.length < 1) {
+    return;
+  }
+  console.log(imports);
+  return done();
+}
diff --git a/packages/formik-codemod/tsconfig.json b/packages/formik-codemod/tsconfig.json
new file mode 100644
index 000000000..bad575540
--- /dev/null
+++ b/packages/formik-codemod/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "target": "es2015",
+    "downlevelIteration": true,
+    "preserveWatchOutput": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/yarn.lock b/yarn.lock
index 3470d1a46..5ff13c644 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18,7 +18,12 @@
     invariant "^2.2.4"
     semver "^5.5.0"
 
-"@babel/core@^7.0.0":
+"@babel/compat-data@^7.12.1", "@babel/compat-data@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.5.tgz#f56db0c4bb1bbbf221b4e81345aab4141e7cb0e9"
+  integrity sha512-DTsS7cxrsH3by8nqQSpFSyjSfSYl57D6Cf4q8dW3LK83tBKBDCkfcay1nYkXq1nIHXnpX8WMMb/O25HOy3h1zg==
+
+"@babel/core@^7.0.0", "@babel/core@^7.1.6":
   version "7.12.3"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8"
   integrity sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==
@@ -134,6 +139,16 @@
     levenary "^1.1.1"
     semver "^5.5.0"
 
+"@babel/helper-compilation-targets@^7.12.1":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.5.tgz#cb470c76198db6a24e9dbc8987275631e5d29831"
+  integrity sha512-+qH6NrscMolUlzOYngSBMIOQpKUGPPsc61Bu5W10mg84LxZ7cmvnBHzARKbDoFxVvqqAbj6Tg6N7bSrWSPXMyw==
+  dependencies:
+    "@babel/compat-data" "^7.12.5"
+    "@babel/helper-validator-option" "^7.12.1"
+    browserslist "^4.14.5"
+    semver "^5.5.0"
+
 "@babel/helper-create-class-features-plugin@^7.10.4", "@babel/helper-create-class-features-plugin@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz#3c45998f431edd4a9214c5f1d3ad1448a6137f6e"
@@ -359,6 +374,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
   integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
 
+"@babel/helper-validator-option@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9"
+  integrity sha512-YpJabsXlJVWP0USHjnC/AQDTLlZERbON577YUVO/wLpqyj6HAtVYnWaQaN0iUN+1/tWn3c+uKKXjRut5115Y2A==
+
 "@babel/helper-wrap-function@^7.10.4":
   version "7.12.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz#3332339fc4d1fbbf1c27d7958c27d34708e990d9"
@@ -406,6 +426,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.5.tgz#cbf45321619ac12d83363fcf9c94bb67fa646d71"
   integrity sha512-KNlOe9+/nk4i29g0VXgl8PEXIRms5xKLJeuZ6UptN0fHv+jDiriG+y94X6qAgWTR0h3KaoM1wK5G5h7MHFRSig==
 
+"@babel/parser@^7.1.6":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.5.tgz#b4af32ddd473c0bfa643bd7ff0728b8e71b81ea0"
+  integrity sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ==
+
 "@babel/plugin-external-helpers@^7.0.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.12.1.tgz#df474775860b3b8bdfeaedd45596cd2c7f36a2be"
@@ -422,7 +447,16 @@
     "@babel/helper-remap-async-to-generator" "^7.10.4"
     "@babel/plugin-syntax-async-generators" "^7.8.0"
 
-"@babel/plugin-proposal-class-properties@^7.0.0":
+"@babel/plugin-proposal-async-generator-functions@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e"
+  integrity sha512-d+/o30tJxFxrA1lhzJqiUcEJdI6jKlNregCv5bASeGf2Q4MXmnwH7viDo7nhx1/ohf09oaH8j1GVYG/e3Yqk6A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.12.1"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+
+"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
   integrity sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==
@@ -454,6 +488,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-dynamic-import" "^7.8.0"
 
+"@babel/plugin-proposal-dynamic-import@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.12.1.tgz#43eb5c2a3487ecd98c5c8ea8b5fdb69a2749b2dc"
+  integrity sha512-a4rhUSZFuq5W8/OO8H7BL5zspjnc1FLd9hlOxIK/f7qG4a0qsqk8uvF/ywgBA8/OmjsapjpvaEOYItfGG1qIvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+
 "@babel/plugin-proposal-export-default-from@^7.0.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.12.1.tgz#c6e62d668a8abcfe0d28b82f560395fecb611c5a"
@@ -470,6 +512,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
+"@babel/plugin-proposal-export-namespace-from@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.1.tgz#8b9b8f376b2d88f5dd774e4d24a5cc2e3679b6d4"
+  integrity sha512-6CThGf0irEkzujYS5LQcjBx8j/4aQGiVv7J9+2f7pGfxqyKh3WnmVJYW3hdrQjyksErMGBPQrCnHfOtna+WLbw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
 "@babel/plugin-proposal-json-strings@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
@@ -478,6 +528,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-json-strings" "^7.8.0"
 
+"@babel/plugin-proposal-json-strings@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.12.1.tgz#d45423b517714eedd5621a9dfdc03fa9f4eb241c"
+  integrity sha512-GoLDUi6U9ZLzlSda2Df++VSqDJg3CG+dR0+iWsv6XRw1rEq+zwt4DirM9yrxW6XWaTpmai1cWJLMfM8qQJf+yw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+
 "@babel/plugin-proposal-logical-assignment-operators@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.11.0.tgz#9f80e482c03083c87125dee10026b58527ea20c8"
@@ -486,7 +544,15 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0":
+"@babel/plugin-proposal-logical-assignment-operators@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.12.1.tgz#f2c490d36e1b3c9659241034a5d2cd50263a2751"
+  integrity sha512-k8ZmVv0JU+4gcUGeCDZOGd0lCIamU/sMtIiX3UWnUc5yzgq6YUGyEolNYD+MLYKfSzgECPcqetVcJP9Afe/aCA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz#3ed4fff31c015e7f3f1467f190dbe545cd7b046c"
   integrity sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==
@@ -510,7 +576,15 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.0.0":
+"@babel/plugin-proposal-numeric-separator@^7.12.1":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.5.tgz#b1ce757156d40ed79d59d467cb2b154a5c4149ba"
+  integrity sha512-UiAnkKuOrCyjZ3sYNHlRlfuZJbBHknMQ9VMwVeX97Ofwx7RpD6gS2HfqTCh8KNUQgcOm8IKt103oR4KIjh7Q8g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069"
   integrity sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==
@@ -528,7 +602,7 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
     "@babel/plugin-transform-parameters" "^7.10.4"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.0.0":
+"@babel/plugin-proposal-optional-catch-binding@^7.0.0", "@babel/plugin-proposal-optional-catch-binding@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.1.tgz#ccc2421af64d3aae50b558a71cede929a5ab2942"
   integrity sha512-hFvIjgprh9mMw5v42sJWLI1lzU5L2sznP805zeT6rySVRA0Y18StRhDqhSxlap0oVgItRsB6WSROp4YnJTJz0g==
@@ -544,7 +618,7 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
 
-"@babel/plugin-proposal-optional-chaining@^7.0.0":
+"@babel/plugin-proposal-optional-chaining@^7.0.0", "@babel/plugin-proposal-optional-chaining@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz#cce122203fc8a32794296fc377c6dedaf4363797"
   integrity sha512-c2uRpY6WzaVDzynVY9liyykS+kVU+WRZPMPYpkelXH8KBt1oXoI89kPbZKKG/jDT5UK92FTW2fZkZaJhdiBabw==
@@ -570,6 +644,14 @@
     "@babel/helper-create-class-features-plugin" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-proposal-private-methods@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.12.1.tgz#86814f6e7a21374c980c10d38b4493e703f4a389"
+  integrity sha512-mwZ1phvH7/NHK6Kf8LP7MYDogGV+DKB1mryFOEwx5EBNQrosvIczzZFTUmWaeujd5xT6G1ELYWUz3CutMhjE1w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.10.4", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
@@ -578,6 +660,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-proposal-unicode-property-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.1.tgz#2a183958d417765b9eae334f47758e5d6a82e072"
+  integrity sha512-MYq+l+PvHuw/rKUz1at/vb6nCnQ2gmJBNaM62z0OgH7B2W1D9pvkpYtlti9bGtizNIU1K3zm4bZF9F91efVY0w==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
@@ -592,7 +682,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-class-properties@^7.0.0":
+"@babel/plugin-syntax-class-properties@^7.0.0", "@babel/plugin-syntax-class-properties@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.1.tgz#bcb297c5366e79bebadef509549cd93b04f19978"
   integrity sha512-U40A76x5gTwmESz+qiqssqmeEsKvcSyvtgktrm0uzcARAmM9I1jR221f6Oq+GmHrcD+LvZDag1UTOTe2fL3TeA==
@@ -704,6 +794,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-syntax-top-level-await@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.1.tgz#dd6c0b357ac1bb142d98537450a319625d13d2a0"
+  integrity sha512-i7ooMZFS+a/Om0crxZodrTzNEPJHZrlMVGMTEpFAj6rYY/bKCddB0Dk/YxfPuYXOopuhKk/e1jV6h+WUU9XN3A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-typescript@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.1.tgz#460ba9d77077653803c3dd2e673f76d66b4029e5"
@@ -711,7 +808,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-arrow-functions@^7.0.0":
+"@babel/plugin-transform-arrow-functions@^7.0.0", "@babel/plugin-transform-arrow-functions@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3"
   integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==
@@ -725,7 +822,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-async-to-generator@^7.0.0":
+"@babel/plugin-transform-async-to-generator@^7.0.0", "@babel/plugin-transform-async-to-generator@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.12.1.tgz#3849a49cc2a22e9743cbd6b52926d30337229af1"
   integrity sha512-SDtqoEcarK1DFlRJ1hHRY5HvJUj5kX4qmtpMAm2QnhOlyuMC4TMdCRgW6WXpv93rZeYNeLP22y8Aq2dbcDRM1A==
@@ -743,7 +840,7 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/helper-remap-async-to-generator" "^7.10.4"
 
-"@babel/plugin-transform-block-scoped-functions@^7.0.0":
+"@babel/plugin-transform-block-scoped-functions@^7.0.0", "@babel/plugin-transform-block-scoped-functions@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.1.tgz#f2a1a365bde2b7112e0a6ded9067fdd7c07905d9"
   integrity sha512-5OpxfuYnSgPalRpo8EWGPzIYf0lHBWORCkj5M0oLBwHdlux9Ri36QqGW3/LR13RSVOAoUUMzoPI/jpE4ABcHoA==
@@ -757,7 +854,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-block-scoping@^7.0.0":
+"@babel/plugin-transform-block-scoping@^7.0.0", "@babel/plugin-transform-block-scoping@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.1.tgz#f0ee727874b42a208a48a586b84c3d222c2bbef1"
   integrity sha512-zJyAC9sZdE60r1nVQHblcfCj29Dh2Y0DOvlMkcqSo0ckqjiCwNiUezUKw+RjOCwGfpLRwnAeQ2XlLpsnGkvv9w==
@@ -771,7 +868,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-classes@^7.0.0":
+"@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.1.tgz#65e650fcaddd3d88ddce67c0f834a3d436a32db6"
   integrity sha512-/74xkA7bVdzQTBeSUhLLJgYIcxw/dpEpCdRDiHgPJ3Mv6uC11UhjpOhl72CgqbBCmt1qtssCyB2xnJm1+PFjog==
@@ -799,7 +896,7 @@
     "@babel/helper-split-export-declaration" "^7.10.4"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.0.0":
+"@babel/plugin-transform-computed-properties@^7.0.0", "@babel/plugin-transform-computed-properties@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.12.1.tgz#d68cf6c9b7f838a8a4144badbe97541ea0904852"
   integrity sha512-vVUOYpPWB7BkgUWPo4C44mUQHpTZXakEqFjbv8rQMg7TC6S6ZhGZ3otQcRH6u7+adSlE5i0sp63eMC/XGffrzg==
@@ -813,7 +910,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-destructuring@^7.0.0":
+"@babel/plugin-transform-destructuring@^7.0.0", "@babel/plugin-transform-destructuring@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.12.1.tgz#b9a570fe0d0a8d460116413cb4f97e8e08b2f847"
   integrity sha512-fRMYFKuzi/rSiYb2uRLiUENJOKq4Gnl+6qOv5f8z0TZXg3llUwUhsNNwrwaT/6dUhJTzNpBr+CUvEWBtfNY1cw==
@@ -835,6 +932,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-dotall-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.1.tgz#a1d16c14862817b6409c0a678d6f9373ca9cd975"
+  integrity sha512-B2pXeRKoLszfEW7J4Hg9LoFaWEbr/kzo3teWHmtFCszjRNa/b40f9mfeqZsIDLLt/FjwQ6pz/Gdlwy85xNckBA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-duplicate-keys@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz#697e50c9fee14380fe843d1f306b295617431e47"
@@ -842,7 +947,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-exponentiation-operator@^7.0.0":
+"@babel/plugin-transform-duplicate-keys@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.1.tgz#745661baba295ac06e686822797a69fbaa2ca228"
+  integrity sha512-iRght0T0HztAb/CazveUpUQrZY+aGKKaWXMJ4uf9YJtqxSUe09j3wteztCUDRHs+SRAL7yMuFqUsLoAKKzgXjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-exponentiation-operator@^7.0.0", "@babel/plugin-transform-exponentiation-operator@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.1.tgz#b0f2ed356ba1be1428ecaf128ff8a24f02830ae0"
   integrity sha512-7tqwy2bv48q+c1EHbXK0Zx3KXd2RVQp6OC7PbwFNt/dPTAV3Lu5sWtWuAj8owr5wqtWnqHfl2/mJlUmqkChKug==
@@ -858,7 +970,7 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-flow-strip-types@^7.0.0":
+"@babel/plugin-transform-flow-strip-types@^7.0.0", "@babel/plugin-transform-flow-strip-types@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz#8430decfa7eb2aea5414ed4a3fa6e1652b7d77c4"
   integrity sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==
@@ -866,7 +978,7 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-flow" "^7.12.1"
 
-"@babel/plugin-transform-for-of@^7.0.0":
+"@babel/plugin-transform-for-of@^7.0.0", "@babel/plugin-transform-for-of@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.1.tgz#07640f28867ed16f9511c99c888291f560921cfa"
   integrity sha512-Zaeq10naAsuHo7heQvyV0ptj4dlZJwZgNAtBYBnu5nNKJoW62m0zKcIEyVECrUKErkUkg6ajMy4ZfnVZciSBhg==
@@ -880,7 +992,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-function-name@^7.0.0":
+"@babel/plugin-transform-function-name@^7.0.0", "@babel/plugin-transform-function-name@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.1.tgz#2ec76258c70fe08c6d7da154003a480620eba667"
   integrity sha512-JF3UgJUILoFrFMEnOJLJkRHSk6LUSXLmEFsA23aR2O5CSLUxbeUX1IZ1YQ7Sn0aXb601Ncwjx73a+FVqgcljVw==
@@ -896,7 +1008,7 @@
     "@babel/helper-function-name" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-literals@^7.0.0":
+"@babel/plugin-transform-literals@^7.0.0", "@babel/plugin-transform-literals@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.1.tgz#d73b803a26b37017ddf9d3bb8f4dc58bfb806f57"
   integrity sha512-+PxVGA+2Ag6uGgL0A5f+9rklOnnMccwEBzwYFL3EUaKuiyVnUipyXncFcfjSkbimLrODoqki1U9XxZzTvfN7IQ==
@@ -910,7 +1022,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-member-expression-literals@^7.0.0":
+"@babel/plugin-transform-member-expression-literals@^7.0.0", "@babel/plugin-transform-member-expression-literals@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.1.tgz#496038602daf1514a64d43d8e17cbb2755e0c3ad"
   integrity sha512-1sxePl6z9ad0gFMB9KqmYofk34flq62aqMt9NqliS/7hPEpURUCMbyHXrMPlo282iY7nAvUB1aQd5mg79UD9Jg==
@@ -933,7 +1045,16 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.0.0":
+"@babel/plugin-transform-modules-amd@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.12.1.tgz#3154300b026185666eebb0c0ed7f8415fefcf6f9"
+  integrity sha512-tDW8hMkzad5oDtzsB70HIQQRBiTKrhfgwC/KkJeGsaNFTdWhKNt/BiE8c5yj19XiGyrxpbkOfH87qkNg1YGlOQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.1.tgz#fa403124542636c786cf9b460a0ffbb48a86e648"
   integrity sha512-dY789wq6l0uLY8py9c1B48V8mVL5gZh/+PQ5ZPrylPYsnAvnEMjqsUXkuoDVPeVK+0VyGar+D08107LzDQ6pag==
@@ -963,6 +1084,17 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-systemjs@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.1.tgz#663fea620d593c93f214a464cd399bf6dc683086"
+  integrity sha512-Hn7cVvOavVh8yvW6fLwveFqSnd7rbQN3zJvoPNyNaQSvgfKmDBO9U1YL9+PCXGRlZD9tNdWTy5ACKqMuzyn32Q==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-validator-identifier" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-umd@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz#9a8481fe81b824654b3a0b65da3df89f3d21839e"
@@ -971,6 +1103,14 @@
     "@babel/helper-module-transforms" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-modules-umd@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.12.1.tgz#eb5a218d6b1c68f3d6217b8fa2cc82fec6547902"
+  integrity sha512-aEIubCS0KHKM0zUos5fIoQm+AZUMt1ZvMpqz0/H5qAQ7vWylr9+PLYurT+Ic7ID/bKLd4q8hDovaG3Zch2uz5Q==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz#78b4d978810b6f3bcf03f9e318f2fc0ed41aecb6"
@@ -978,6 +1118,13 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.10.4"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.1.tgz#b407f5c96be0d9f5f88467497fa82b30ac3e8753"
+  integrity sha512-tB43uQ62RHcoDp9v2Nsf+dSM8sbNodbEicbQNA53zHz8pWUhsgHSJCGpt7daXxRydjb0KnfmB+ChXOv3oADp1Q==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+
 "@babel/plugin-transform-new-target@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz#9097d753cb7b024cb7381a3b2e52e9513a9c6888"
@@ -985,6 +1132,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-new-target@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.1.tgz#80073f02ee1bb2d365c3416490e085c95759dec0"
+  integrity sha512-+eW/VLcUL5L9IvJH7rT1sT0CzkdUTvPrXC2PXTn/7z7tXLBuKvezYbGdxD5WMRoyvyaujOq2fWoKl869heKjhw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-object-assign@^7.0.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.12.1.tgz#9102b06625f60a5443cc292d32b565373665e1e4"
@@ -992,7 +1146,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-object-super@^7.0.0":
+"@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.1.tgz#4ea08696b8d2e65841d0c7706482b048bed1066e"
   integrity sha512-AvypiGJH9hsquNUn+RXVcBdeE3KHPZexWRdimhuV59cSoOt5kFBmqlByorAeUlGG2CJWd0U+4ZtNKga/TB0cAw==
@@ -1015,7 +1169,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-property-literals@^7.0.0":
+"@babel/plugin-transform-property-literals@^7.0.0", "@babel/plugin-transform-property-literals@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.1.tgz#41bc81200d730abb4456ab8b3fbd5537b59adecd"
   integrity sha512-6MTCR/mZ1MQS+AwZLplX4cEySjCpnIF26ToWo942nqn8hXSm7McaHQNeGx/pt7suI1TWOWMfa/NgBhiqSnX0cQ==
@@ -1053,7 +1207,7 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-jsx" "^7.12.1"
 
-"@babel/plugin-transform-regenerator@^7.0.0":
+"@babel/plugin-transform-regenerator@^7.0.0", "@babel/plugin-transform-regenerator@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.1.tgz#5f0a28d842f6462281f06a964e88ba8d7ab49753"
   integrity sha512-gYrHqs5itw6i4PflFX3OdBPMQdPbF4bj2REIUxlMRUFk0/ZOAIpDFuViuxPjUL7YC8UPnf+XG7/utJvqXdPKng==
@@ -1074,6 +1228,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-reserved-words@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.1.tgz#6fdfc8cc7edcc42b36a7c12188c6787c873adcd8"
+  integrity sha512-pOnUfhyPKvZpVyBHhSBoX8vfA09b7r00Pmm1sH+29ae2hMTKVmSp4Ztsr8KBKjLjx17H0eJqaRC3bR2iThM54A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-runtime@^7.0.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz#04b792057eb460389ff6a4198e377614ea1e7ba5"
@@ -1084,7 +1245,7 @@
     resolve "^1.8.1"
     semver "^5.5.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.0.0":
+"@babel/plugin-transform-shorthand-properties@^7.0.0", "@babel/plugin-transform-shorthand-properties@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz#0bf9cac5550fce0cfdf043420f661d645fdc75e3"
   integrity sha512-GFZS3c/MhX1OusqB1MZ1ct2xRzX5ppQh2JU1h2Pnfk88HtFTM+TWQqJNfwkmxtPQtb/s1tk87oENfXJlx7rSDw==
@@ -1098,7 +1259,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-spread@^7.0.0":
+"@babel/plugin-transform-spread@^7.0.0", "@babel/plugin-transform-spread@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.1.tgz#527f9f311be4ec7fdc2b79bb89f7bf884b3e1e1e"
   integrity sha512-vuLp8CP0BE18zVYjsEBZ5xoCecMK6LBMMxYzJnh01rxQRvhNhH1csMMmBfNo5tGpGO+NhdSNW2mzIvBu3K1fng==
@@ -1114,7 +1275,7 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
 
-"@babel/plugin-transform-sticky-regex@^7.0.0":
+"@babel/plugin-transform-sticky-regex@^7.0.0", "@babel/plugin-transform-sticky-regex@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.1.tgz#5c24cf50de396d30e99afc8d1c700e8bce0f5caf"
   integrity sha512-CiUgKQ3AGVk7kveIaPEET1jNDhZZEl1RPMWdTBE1799bdz++SwqDHStmxfCtDfBhQgCl38YRiSnrMuUMZIWSUQ==
@@ -1130,7 +1291,7 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/helper-regex" "^7.10.4"
 
-"@babel/plugin-transform-template-literals@^7.0.0":
+"@babel/plugin-transform-template-literals@^7.0.0", "@babel/plugin-transform-template-literals@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz#b43ece6ed9a79c0c71119f576d299ef09d942843"
   integrity sha512-b4Zx3KHi+taXB1dVRBhVJtEPi9h1THCeKmae2qP0YdUHIFhVjtpqqNfxeVAa1xeHVhAy4SbHxEwx5cltAu5apw==
@@ -1152,7 +1313,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-typescript@^7.0.0":
+"@babel/plugin-transform-typeof-symbol@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.1.tgz#9ca6be343d42512fbc2e68236a82ae64bc7af78a"
+  integrity sha512-EPGgpGy+O5Kg5pJFNDKuxt9RdmTgj5sgrus2XVeMp/ZIbOESadgILUbm50SNpghOh3/6yrbsH+NB5+WJTmsA7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-typescript@^7.0.0", "@babel/plugin-transform-typescript@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.12.1.tgz#d92cc0af504d510e26a754a7dbc2e5c8cd9c7ab4"
   integrity sha512-VrsBByqAIntM+EYMqSm59SiMEf7qkmI9dqMt6RbD/wlwueWmYcI0FFK5Fj47pP6DRZm+3teXjosKlwcZJ5lIMw==
@@ -1168,7 +1336,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-unicode-regex@^7.0.0":
+"@babel/plugin-transform-unicode-escapes@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.1.tgz#5232b9f81ccb07070b7c3c36c67a1b78f1845709"
+  integrity sha512-I8gNHJLIc7GdApm7wkVnStWssPNbSRMPtgHdmH3sRM1zopz09UWPS4x5V4n1yz/MIWTVnJ9sp6IkuXdWM4w+2Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-unicode-regex@^7.0.0", "@babel/plugin-transform-unicode-regex@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.1.tgz#cc9661f61390db5c65e3febaccefd5c6ac3faecb"
   integrity sha512-SqH4ClNngh/zGwHZOOQMTD+e8FGWexILV+ePMyiDJttAWRh5dhDL8rcl5lSgU3Huiq6Zn6pWTMvdPAb21Dwdyg==
@@ -1184,6 +1359,78 @@
     "@babel/helper-create-regexp-features-plugin" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/preset-env@^7.1.6":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.1.tgz#9c7e5ca82a19efc865384bb4989148d2ee5d7ac2"
+  integrity sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==
+  dependencies:
+    "@babel/compat-data" "^7.12.1"
+    "@babel/helper-compilation-targets" "^7.12.1"
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-validator-option" "^7.12.1"
+    "@babel/plugin-proposal-async-generator-functions" "^7.12.1"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/plugin-proposal-dynamic-import" "^7.12.1"
+    "@babel/plugin-proposal-export-namespace-from" "^7.12.1"
+    "@babel/plugin-proposal-json-strings" "^7.12.1"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+    "@babel/plugin-proposal-numeric-separator" "^7.12.1"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.12.1"
+    "@babel/plugin-proposal-private-methods" "^7.12.1"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.12.1"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-class-properties" "^7.12.1"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.12.1"
+    "@babel/plugin-transform-arrow-functions" "^7.12.1"
+    "@babel/plugin-transform-async-to-generator" "^7.12.1"
+    "@babel/plugin-transform-block-scoped-functions" "^7.12.1"
+    "@babel/plugin-transform-block-scoping" "^7.12.1"
+    "@babel/plugin-transform-classes" "^7.12.1"
+    "@babel/plugin-transform-computed-properties" "^7.12.1"
+    "@babel/plugin-transform-destructuring" "^7.12.1"
+    "@babel/plugin-transform-dotall-regex" "^7.12.1"
+    "@babel/plugin-transform-duplicate-keys" "^7.12.1"
+    "@babel/plugin-transform-exponentiation-operator" "^7.12.1"
+    "@babel/plugin-transform-for-of" "^7.12.1"
+    "@babel/plugin-transform-function-name" "^7.12.1"
+    "@babel/plugin-transform-literals" "^7.12.1"
+    "@babel/plugin-transform-member-expression-literals" "^7.12.1"
+    "@babel/plugin-transform-modules-amd" "^7.12.1"
+    "@babel/plugin-transform-modules-commonjs" "^7.12.1"
+    "@babel/plugin-transform-modules-systemjs" "^7.12.1"
+    "@babel/plugin-transform-modules-umd" "^7.12.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.1"
+    "@babel/plugin-transform-new-target" "^7.12.1"
+    "@babel/plugin-transform-object-super" "^7.12.1"
+    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/plugin-transform-property-literals" "^7.12.1"
+    "@babel/plugin-transform-regenerator" "^7.12.1"
+    "@babel/plugin-transform-reserved-words" "^7.12.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+    "@babel/plugin-transform-spread" "^7.12.1"
+    "@babel/plugin-transform-sticky-regex" "^7.12.1"
+    "@babel/plugin-transform-template-literals" "^7.12.1"
+    "@babel/plugin-transform-typeof-symbol" "^7.12.1"
+    "@babel/plugin-transform-unicode-escapes" "^7.12.1"
+    "@babel/plugin-transform-unicode-regex" "^7.12.1"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.12.1"
+    core-js-compat "^3.6.2"
+    semver "^5.5.0"
+
 "@babel/preset-env@^7.11.0":
   version "7.11.5"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.11.5.tgz#18cb4b9379e3e92ffea92c07471a99a2914e4272"
@@ -1258,6 +1505,14 @@
     levenary "^1.1.1"
     semver "^5.5.0"
 
+"@babel/preset-flow@^7.0.0":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.12.1.tgz#1a81d376c5a9549e75352a3888f8c273455ae940"
+  integrity sha512-UAoyMdioAhM6H99qPoKvpHMzxmNVXno8GYU/7vZmGaHk6/KqfDYL1W0NxszVbJ2EP271b7e6Ox+Vk2A9QsB3Sw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-flow-strip-types" "^7.12.1"
+
 "@babel/preset-modules@^0.1.3":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
@@ -1269,6 +1524,14 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/preset-typescript@^7.1.0":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz#86480b483bb97f75036e8864fe404cc782cc311b"
+  integrity sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-typescript" "^7.12.1"
+
 "@babel/register@^7.0.0":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.12.1.tgz#cdb087bdfc4f7241c03231f22e15d211acf21438"
@@ -3042,6 +3305,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
+"@types/minimist@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
+  integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
+
 "@types/node@*", "@types/node@>= 8":
   version "12.12.16"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.16.tgz#3ebcbd7bf978fa4c5120fee8be57083271a8b3ac"
@@ -3079,11 +3347,12 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@^0.63.32":
-  version "0.63.32"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.32.tgz#2f6785947c9e1bb634bffd509007c7e73af823b6"
-  integrity sha512-q9JyN8eoCwLcPPyF7ldzWXAo1SOFIsh97b2WOZJVraozkvpTDcA9SZMdHxNhjP9M9KdKY0GWKB2B0pjew8VT3w==
+"@types/react-native@^0.57.65":
+  version "0.57.65"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.65.tgz#9da4773aaa95924bce42a54a5c19cfd8ffd5022b"
+  integrity sha512-7P5ulTb+/cnwbABWaAjzKmSYkRWeK7UCTfUwHhDpnwxdiL2X/KbdN1sPgo0B2E4zxfYE3MEoHv7FhB8Acfvf8A==
   dependencies:
+    "@types/prop-types" "*"
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^16.9.55":
@@ -3094,6 +3363,14 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^16.8.23":
+  version "16.9.56"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.56.tgz#ea25847b53c5bec064933095fc366b1462e2adf0"
+  integrity sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -3589,6 +3866,11 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
+array-differ@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
+  integrity sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=
+
 array-differ@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-2.1.0.tgz#4b9c1c3f14b906757082925769e8ab904f4801b1"
@@ -3646,7 +3928,7 @@ array-slice@^0.2.3:
   resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
   integrity sha1-3Tz7gO15c6dRF82sabC5nshhhvU=
 
-array-union@^1.0.2:
+array-union@^1.0.1, array-union@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
   integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
@@ -3682,11 +3964,16 @@ array.prototype.flat@^1.2.1:
     es-abstract "^1.15.0"
     function-bind "^1.1.1"
 
-arrify@^1.0.1:
+arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
+arrify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
+
 art@^0.10.0:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
@@ -3719,6 +4006,11 @@ ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
   integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
 
+ast-types@0.11.7:
+  version "0.11.7"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.7.tgz#f318bf44e339db6a320be0009ded64ec1471f46c"
+  integrity sha512-2mP3TwtkY/aTv5X3ZsMpNAbOnyoC/aMJwJSoaELPkHId0nSQgFcnU4dRW3isxiz7+zBexk0ym3WNVjMiQBnJSw==
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -3796,6 +4088,11 @@ axobject-query@^2.0.2:
     "@babel/runtime" "^7.7.4"
     "@babel/runtime-corejs3" "^7.7.4"
 
+babel-core@^7.0.0-bridge.0:
+  version "7.0.0-bridge.0"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
+  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
+
 babel-eslint@10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.1.tgz#919681dc099614cd7d31d45c8908695092a1faed"
@@ -4141,6 +4438,16 @@ browserslist@^4.12.0, browserslist@^4.8.5:
     escalade "^3.1.0"
     node-releases "^1.1.61"
 
+browserslist@^4.14.5:
+  version "4.14.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.6.tgz#97702a9c212e0c6b6afefad913d3a1538e348457"
+  integrity sha512-zeFYcUo85ENhc/zxHbiIp0LGzzTrE2Pv2JhxvS7kpUb9Q9D38kUX6Bie7pGutJ/5iF5rOxE7CepAuWD56xJ33A==
+  dependencies:
+    caniuse-lite "^1.0.30001154"
+    electron-to-chromium "^1.3.585"
+    escalade "^3.1.1"
+    node-releases "^1.1.65"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -4310,6 +4617,15 @@ camelcase-keys@^4.0.0:
     map-obj "^2.0.0"
     quick-lru "^1.0.0"
 
+camelcase-keys@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
+  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
+  dependencies:
+    camelcase "^5.3.1"
+    map-obj "^4.0.0"
+    quick-lru "^4.0.1"
+
 camelcase@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
@@ -4340,6 +4656,11 @@ caniuse-lite@^1.0.30001135:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001135.tgz#995b1eb94404a3c9a0d7600c113c9bb27f2cd8aa"
   integrity sha512-ziNcheTGTHlu9g34EVoHQdIu5g4foc8EsxMGC7Xkokmvw0dqNtX8BS8RgCgFBaAiSp2IdjvBxNdh0ssib28eVQ==
 
+caniuse-lite@^1.0.30001154:
+  version "1.0.30001157"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz#2d11aaeb239b340bc1aa730eca18a37fdb07a9ab"
+  integrity sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==
+
 capitalize@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capitalize/-/capitalize-1.0.0.tgz#dc802c580aee101929020d2ca14b4ca8a0ae44be"
@@ -4382,6 +4703,14 @@ chalk@2.4.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@4.1.0, chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -4410,14 +4739,6 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
-  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
@@ -4534,6 +4855,11 @@ cli-width@^2.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
   integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
 
+cli-width@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
+  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -4962,6 +5288,14 @@ create-react-class@^15.6.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+cross-spawn-async@^2.1.1:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
+  integrity sha1-hF/wwINKPe2dFg2sptOQkGuyiMw=
+  dependencies:
+    lru-cache "^4.0.0"
+    which "^1.2.8"
+
 cross-spawn@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -5209,7 +5543,7 @@ debuglog@^1.0.1:
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
 
-decamelize-keys@^1.0.0:
+decamelize-keys@^1.0.0, decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
   integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
@@ -5475,6 +5809,11 @@ electron-to-chromium@^1.3.570:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.571.tgz#e57977f1569f8326ae2a7905e26f3943536ba28f"
   integrity sha512-UYEQ2Gtc50kqmyOmOVtj6Oqi38lm5yRJY3pLuWt6UIot0No1L09uu6Ja6/1XKwmz/p0eJFZTUZi+khd1PV1hHA==
 
+electron-to-chromium@^1.3.585:
+  version "1.3.591"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.591.tgz#a18892bf1acb93f7b6e4da402705d564bc235017"
+  integrity sha512-ol/0WzjL4NS4Kqy9VD6xXQON91xIihDT36sYCew/G/bnd1v0/4D+kahp26JauQhgFUjrdva3kRSo7URcUmQ+qw==
+
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
@@ -5605,6 +5944,11 @@ escalade@^3.1.0:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e"
   integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==
 
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
 escape-goat@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-1.3.0.tgz#bf3ee8ad1e488fbba404b084b2e4a55e09231c64"
@@ -5881,7 +6225,7 @@ espree@^6.1.2:
     acorn-jsx "^5.1.0"
     eslint-visitor-keys "^1.1.0"
 
-esprima@^4.0.0, esprima@^4.0.1:
+esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -5952,6 +6296,33 @@ exec-sh@^0.3.2:
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
   integrity sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==
 
+execa@4.0.3, execa@^4.0.2, execa@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
+  integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
+execa@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.4.0.tgz#4eb6467a36a095fabb2970ff9d5e3fb7bce6ebc3"
+  integrity sha1-TrZGejaglfq7KXD/nV4/t7zm68M=
+  dependencies:
+    cross-spawn-async "^2.1.1"
+    is-stream "^1.1.0"
+    npm-run-path "^1.0.0"
+    object-assign "^4.0.1"
+    path-key "^1.0.0"
+    strip-eof "^1.0.0"
+
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
@@ -5994,21 +6365,6 @@ execa@^3.2.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-execa@^4.0.2, execa@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
-  integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A==
-  dependencies:
-    cross-spawn "^7.0.0"
-    get-stream "^5.0.0"
-    human-signals "^1.1.1"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.0"
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-    strip-final-newline "^2.0.0"
-
 executable@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
@@ -6480,6 +6836,11 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
   integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
 
+flow-parser@0.*:
+  version "0.137.0"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.137.0.tgz#8c05612ff9344648d8bcdeaa4c58d131e875d842"
+  integrity sha512-i3KXJZ8lhlQI0n+BoZzIeH/rv+fNvAiu1i9/s64MklBV+HuhFbycUML7367J2eng0gapLnwvYPFNaPZys8POsA==
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -6973,7 +7334,7 @@ globalyzer@^0.1.0:
   resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.4.tgz#bc8e273afe1ac7c24eea8def5b802340c5cc534f"
   integrity sha512-LeguVWaxgHN0MNbWC6YljNMzHkrCny9fzjmEUdnF1kQ7wATFD1RHFRqA1qxaX2tgxGENlcxjOflopBwj3YZiXA==
 
-globby@^11.0.0:
+globby@11.0.1, globby@^11.0.0:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357"
   integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==
@@ -7104,6 +7465,11 @@ har-validator@~5.1.3:
     ajv "^6.12.3"
     har-schema "^2.0.0"
 
+hard-rejection@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
+  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -7467,6 +7833,25 @@ inquirer@5.2.0:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
+inquirer@7.3.3:
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
+  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.19"
+    mute-stream "0.0.8"
+    run-async "^2.4.0"
+    rxjs "^6.6.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+
 inquirer@^3.0.6:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
@@ -7710,6 +8095,15 @@ is-generator-fn@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
   integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
 
+is-git-clean@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-git-clean/-/is-git-clean-1.1.0.tgz#13abd6dda711bb08aafd42604da487845ddcf88d"
+  integrity sha1-E6vW3acRuwiq/UJgTaSHhF3c+I0=
+  dependencies:
+    execa "^0.4.0"
+    is-obj "^1.0.1"
+    multimatch "^2.1.0"
+
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -8472,6 +8866,30 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
+jscodeshift@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.6.4.tgz#e19ab86214edac86a75c4557fc88b3937d558a8e"
+  integrity sha512-+NF/tlNbc2WEhXUuc4WEJLsJumF84tnaMUZW2hyJw3jThKKRvsPX4sPJVgO1lPE28z0gNL+gwniLG9d8mYvQCQ==
+  dependencies:
+    "@babel/core" "^7.1.6"
+    "@babel/parser" "^7.1.6"
+    "@babel/plugin-proposal-class-properties" "^7.1.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
+    "@babel/preset-env" "^7.1.6"
+    "@babel/preset-flow" "^7.0.0"
+    "@babel/preset-typescript" "^7.1.0"
+    "@babel/register" "^7.0.0"
+    babel-core "^7.0.0-bridge.0"
+    colors "^1.1.2"
+    flow-parser "0.*"
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
+    neo-async "^2.5.0"
+    node-dir "^0.1.17"
+    recast "^0.16.1"
+    temp "^0.8.1"
+    write-file-atomic "^2.3.0"
+
 jsdom@^15.2.1:
   version "15.2.1"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.2.1.tgz#d2feb1aef7183f86be521b8c6833ff5296d07ec5"
@@ -8665,7 +9083,7 @@ kind-of@^5.0.0:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-kind-of@^6.0.0, kind-of@^6.0.2:
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -9119,7 +9537,7 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
-lru-cache@^4.0.1:
+lru-cache@^4.0.0, lru-cache@^4.0.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -9231,6 +9649,11 @@ map-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
   integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
 
+map-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.1.0.tgz#b91221b542734b9f14256c0132c897c5d7256fd5"
+  integrity sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==
+
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -9250,6 +9673,25 @@ mem@^1.1.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+meow@7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-7.0.1.tgz#1ed4a0a50b3844b451369c48362eb0515f04c1dc"
+  integrity sha512-tBKIQqVrAHqwit0vfuFPY3LlzJYkEOFyKa3bPgxzNl6q/RtN8KQ+ALYEASYuFayzSAsjlhXj/JZ10rH85Q6TUw==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    arrify "^2.0.1"
+    camelcase "^6.0.0"
+    camelcase-keys "^6.2.2"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "^4.0.2"
+    normalize-package-data "^2.5.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.13.1"
+    yargs-parser "^18.1.3"
+
 meow@^3.3.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -9704,7 +10146,12 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
-minimatch@^3.0.4:
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
+minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -9719,6 +10166,15 @@ minimist-options@^3.0.1:
     arrify "^1.0.1"
     is-plain-obj "^1.1.0"
 
+minimist-options@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
+  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+    kind-of "^6.0.3"
+
 minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -9862,6 +10318,16 @@ ms@2.1.2, ms@^2.0.0, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+multimatch@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b"
+  integrity sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=
+  dependencies:
+    array-differ "^1.0.0"
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    minimatch "^3.0.0"
+
 multimatch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-3.0.0.tgz#0e2534cc6bc238d9ab67e1b9cd5fcd85a6dbf70b"
@@ -9928,6 +10394,11 @@ negotiator@0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
+neo-async@^2.5.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
 neo-async@^2.6.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
@@ -9946,6 +10417,13 @@ no-case@^3.0.3:
     lower-case "^2.0.1"
     tslib "^1.10.0"
 
+node-dir@^0.1.17:
+  version "0.1.17"
+  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
+  integrity sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=
+  dependencies:
+    minimatch "^3.0.2"
+
 node-fetch-npm@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/node-fetch-npm/-/node-fetch-npm-2.0.2.tgz#7258c9046182dca345b4208eda918daf33697ff7"
@@ -10027,6 +10505,11 @@ node-releases@^1.1.61:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e"
   integrity sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==
 
+node-releases@^1.1.65:
+  version "1.1.66"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.66.tgz#609bd0dc069381015cd982300bae51ab4f1b1814"
+  integrity sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg==
+
 node-version@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.1.3.tgz#1081c87cce6d2dbbd61d0e51e28c287782678496"
@@ -10129,6 +10612,13 @@ npm-pick-manifest@^3.0.0:
     npm-package-arg "^6.0.0"
     semver "^5.4.1"
 
+npm-run-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-1.0.0.tgz#f5c32bf595fe81ae927daec52e82f8b000ac3c8f"
+  integrity sha1-9cMr9ZX+ga6Sfa7FLoL4sACsPI8=
+  dependencies:
+    path-key "^1.0.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -10751,6 +11241,11 @@ path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
+path-key@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-1.0.0.tgz#5d53d578019646c0d68800db4e146e6bdc2ac7af"
+  integrity sha1-XVPVeAGWRsDWiADbThRua9wqx68=
+
 path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
@@ -10981,6 +11476,11 @@ pretty-format@^26.4.2:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
+private@~0.1.5:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -11147,6 +11647,11 @@ quick-lru@^1.0.0:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
   integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
 
+quick-lru@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
+  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
+
 ramda@~0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
@@ -11294,6 +11799,15 @@ react-transform-hmr@^1.0.4:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
+react@^16.8.6:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@@ -11477,6 +11991,16 @@ realpath-native@^2.0.0:
   resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-2.0.0.tgz#7377ac429b6e1fd599dc38d08ed942d0d7beb866"
   integrity sha512-v1SEYUOXXdbBZK8ZuNgO4TBjamPsiSgcFr0aP+tEKpQZK8vooEUqV6nm6Cv502mX4NF2EfsnVqtNAHG+/6Ur1Q==
 
+recast@^0.16.1:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.16.2.tgz#3796ebad5fe49ed85473b479cd6df554ad725dc2"
+  integrity sha512-O/7qXi51DPjRVdbrpNzoBQH5dnAPQNbfoOFyRiUwreTMJfIHYOEBzwuH+c0+/BTSJ3CQyKs6ILSWXhESH6Op3A==
+  dependencies:
+    ast-types "0.11.7"
+    esprima "~4.0.0"
+    private "~0.1.5"
+    source-map "~0.6.1"
+
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -11500,6 +12024,14 @@ redent@^2.0.0:
     indent-string "^3.0.0"
     strip-indent "^2.0.0"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -11922,7 +12454,7 @@ rimraf@2, rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@2.6.3:
+rimraf@2.6.3, rimraf@~2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
   integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
@@ -11997,7 +12529,7 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-run-async@^2.2.0:
+run-async@^2.2.0, run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
@@ -12033,7 +12565,7 @@ rxjs@^5.5.2:
   dependencies:
     symbol-observable "1.0.1"
 
-rxjs@^6.3.3, rxjs@^6.6.2:
+rxjs@^6.3.3, rxjs@^6.6.0, rxjs@^6.6.2:
   version "6.6.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
   integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==
@@ -12817,6 +13349,13 @@ strip-indent@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
 strip-json-comments@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
@@ -12946,6 +13485,13 @@ temp@0.8.3:
     os-tmpdir "^1.0.0"
     rimraf "~2.2.6"
 
+temp@^0.8.1:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.4.tgz#8c97a33a4770072e0a05f919396c7665a7dd59f2"
+  integrity sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==
+  dependencies:
+    rimraf "~2.6.2"
+
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -13201,6 +13747,11 @@ trim-newlines@^2.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
   integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=
 
+trim-newlines@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.0.tgz#79726304a6a898aa8373427298d54c2ee8b1cb30"
+  integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==
+
 trim-off-newlines@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
@@ -13337,6 +13888,11 @@ type-fest@^0.11.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
   integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
 
+type-fest@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
+  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
+
 type-fest@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
@@ -13549,10 +14105,10 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-context-selector@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/use-context-selector/-/use-context-selector-1.1.2.tgz#63bf6e3502fd383f1257c49df2495e05564d262e"
-  integrity sha512-uwtrMKEHjZQ8JXMZLUljVDY4CqpAC3MgMcmtpZACG+pJeJ7GNDzBW0thC2RbJX2wKYMvLtYRXgQEqaOnmlF/KQ==
+use-context-selector@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/use-context-selector/-/use-context-selector-1.2.10.tgz#47230099cd381119ae1c0f4a44737f336932aec0"
+  integrity sha512-gSKcvwl2I683GY5JG/ixsVDeVsIdEdLJz3ccl7y1KaKJqXitX2PjC0Z1F0LEtni1pc7u1J3cy5dHT8+MI69naA==
 
 use@^3.1.0:
   version "3.1.1"
@@ -13716,7 +14272,7 @@ which-pm@2.0.0:
     load-yaml-file "^0.2.0"
     path-exists "^4.0.0"
 
-which@1, which@^1.2.12, which@^1.2.9, which@^1.3.0, which@^1.3.1:
+which@1, which@^1.2.12, which@^1.2.8, which@^1.2.9, which@^1.3.0, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -13983,7 +14539,7 @@ yaml@^1.7.2:
   dependencies:
     "@babel/runtime" "^7.6.3"
 
-yargs-parser@18.x, yargs-parser@^18.1.2:
+yargs-parser@18.x, yargs-parser@^18.1.2, yargs-parser@^18.1.3:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
   integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==

From 08babf13553b7fb09ae96688f1d6f0290377d250 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Mon, 9 Nov 2020 13:14:34 -0500
Subject: [PATCH 20/51] Implement field optimizations with StrictField

---
 app/package.json                              |   5 +
 app/pages/v3.tsx                              |  87 +++++
 cypress/integration/v3.spec.ts                |  25 ++
 .../name-import.output.js                     |   2 +-
 .../transforms/field-to-legacy-field.ts       |   1 -
 packages/formik/package.json                  |   6 +-
 packages/formik/src/Formik.tsx                |  73 +---
 packages/formik/src/FormikContext.tsx         |  10 +-
 packages/formik/src/StrictField.tsx           | 323 ++++++++++++++++++
 packages/formik/src/index.tsx                 |   1 +
 packages/formik/src/utils.ts                  |  97 ++++++
 11 files changed, 556 insertions(+), 74 deletions(-)
 create mode 100644 app/pages/v3.tsx
 create mode 100644 cypress/integration/v3.spec.ts
 create mode 100644 packages/formik/src/StrictField.tsx

diff --git a/app/package.json b/app/package.json
index c7a78a18e..0178a41c2 100644
--- a/app/package.json
+++ b/app/package.json
@@ -14,5 +14,10 @@
     "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"
   }
 }
diff --git a/app/pages/v3.tsx b/app/pages/v3.tsx
new file mode 100644
index 000000000..ab80e91f1
--- /dev/null
+++ b/app/pages/v3.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  Formik,
+  Form,
+  unstable_useField as useFieldNew,
+  useField as useFieldOld,
+  UseFieldProps,
+} from 'formik';
+import formatString from 'format-string-by-pattern';
+
+const masks = [
+  { name: 'phone-1', type: 'old', parse: '999-999-9999' },
+  { name: 'phone-2', type: 'new', parse: '(999) 999-9999' },
+  { name: 'phone-3', type: 'new', parse: '+49 (AAAA) BBBBBB' },
+];
+
+const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
+let renderCounterOld = 0;
+
+function CustomFieldOld(
+  props: UseFieldProps<string> & { placeholder: string }
+) {
+  const [field] = useFieldOld(props as any);
+  return (
+    <>
+      <input {...(props as any)} {...field} />
+      <span id={`render-${props.name}`}>{renderCounterOld++}</span>
+    </>
+  );
+}
+
+let renderCounterNew = 0;
+function CustomFieldNew(
+  props: UseFieldProps<string> & { placeholder: string }
+) {
+  const [field] = useFieldNew(props as any);
+  return (
+    <>
+      <input {...(props as any)} {...field} />
+      <span id={`render-${props.name}`}>{renderCounterNew++}</span>
+    </>
+  );
+}
+
+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} : <small>{mask.type}</small>
+                {mask.type === 'old' ? (
+                  <CustomFieldOld
+                    name={mask.name}
+                    type="text"
+                    parse={formatString(mask.parse)}
+                    placeholder={mask.parse}
+                  />
+                ) : (
+                  <CustomFieldNew
+                    name={mask.name}
+                    type="text"
+                    parse={formatString(mask.parse)}
+                    placeholder={mask.parse}
+                  />
+                )}
+              </label>
+            </div>
+          ))}
+
+          <button type="submit">Submit</button>
+        </Form>
+      </Formik>
+    </div>
+  );
+}
diff --git a/cypress/integration/v3.spec.ts b/cypress/integration/v3.spec.ts
new file mode 100644
index 000000000..a9e951c8d
--- /dev/null
+++ b/cypress/integration/v3.spec.ts
@@ -0,0 +1,25 @@
+/// <reference types="cypress" />
+
+describe('basic validation', () => {
+  it('should validate before submit', () => {
+    cy.visit('http://localhost:3000/v3');
+
+    const masks = [
+      { name: 'phone-1', type: 'old', parse: '999-999-9999' },
+      { name: 'phone-2', type: 'new', parse: '(999) 999-9999' },
+      { name: 'phone-3', type: 'new', parse: '+49 (AAAA) BBBBBB' },
+    ];
+    // Check that Formik can parse with Field
+    cy.get('input[name="phone-1"]').type('9999999999');
+    cy.get('input[name="phone-1"]').should('have.value', '999-999-9999');
+    cy.get('input[name="phone-2"]').type('9999999999');
+    cy.get('input[name="phone-2"]').should('have.value', '(999) 999-9999');
+    cy.get('input[name="phone-3"]').type('+49AAAABBBBBB');
+    cy.get('input[name="phone-3"]').should('have.value', '+49 (AAAA) BBBBBB');
+    console.log(masks.map(m => m.parse).join('').length);
+    cy.get('span#render-phone-1').should(
+      'have.text',
+      masks.map(m => m.parse).join('').length
+    );
+  });
+});
diff --git a/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js b/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js
index a1ec48bc8..12a535a04 100644
--- a/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js
+++ b/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js
@@ -1 +1 @@
-import { Formik, LegacyField as Field, Form } from 'formik';
+import { Formik, Field, Form } from 'formik';
diff --git a/packages/formik-codemod/transforms/field-to-legacy-field.ts b/packages/formik-codemod/transforms/field-to-legacy-field.ts
index bec83cf6f..ad675a382 100644
--- a/packages/formik-codemod/transforms/field-to-legacy-field.ts
+++ b/packages/formik-codemod/transforms/field-to-legacy-field.ts
@@ -10,6 +10,5 @@ export default function transformer(file, api) {
   if (imports.length < 1) {
     return;
   }
-  console.log(imports);
   return done();
 }
diff --git a/packages/formik/package.json b/packages/formik/package.json
index b43ff9ef2..4c8036f86 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -20,7 +20,9 @@
   "umd:main": "dist/formik.umd.production.js",
   "module": "dist/formik.esm.js",
   "typings": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -41,7 +43,7 @@
     "scheduler": "^0.20.1",
     "tiny-warning": "^1.0.2",
     "tslib": "^1.10.0",
-    "use-context-selector": "^1.1.2"
+    "use-context-selector": "^1.2.10"
   },
   "devDependencies": {
     "@testing-library/react": "^11.1.0",
diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
index 70b2b5242..dd3730c10 100755
--- a/packages/formik/src/Formik.tsx
+++ b/packages/formik/src/Formik.tsx
@@ -27,6 +27,11 @@ import {
   isObject,
   isInputEvent,
   isReactNative,
+  getSelectedValues,
+  getValueForCheckbox,
+  defaultParseFn,
+  numberParseFn,
+  defaultFormatFn,
 } from './utils';
 import { FormikProvider } from './FormikContext';
 import invariant from 'tiny-warning';
@@ -62,16 +67,6 @@ type FormikMessage<Values> =
       payload: FormikState<Values>;
     };
 
-const defaultParseFn = (value: unknown, _name: string) => value;
-const numberParseFn = (value: any, _name: string) => {
-  const parsed = parseFloat(value);
-
-  return isNaN(parsed) ? '' : parsed;
-};
-
-const defaultFormatFn = (value: unknown, _name: string) =>
-  value === undefined ? '' : value;
-
 // State reducer
 function formikReducer<Values>(
   state: FormikState<Values>,
@@ -1276,64 +1271,6 @@ function runWithLowPriority(fn: () => any) {
   );
 }
 
-/** Return multi select values based on an array of options */
-function getSelectedValues(options: any[]) {
-  const result = [];
-  if (options) {
-    for (let index = 0; index < options.length; index++) {
-      const option = options[index];
-      if (option.selected) {
-        result.push(option.value);
-      }
-    }
-  }
-  return result;
-}
-
-/** Return the next value for a checkbox */
-function getValueForCheckbox(
-  currentValue: string | any[],
-  checked: boolean,
-  valueProp: any
-) {
-  // If the current value was a boolean, return a boolean
-  if (typeof currentValue === 'boolean') {
-    return Boolean(checked);
-  }
-
-  // If the currentValue was not a boolean we want to return an array
-  let currentArrayOfValues = [];
-  let isValueInArray = false;
-  let index = -1;
-
-  if (!Array.isArray(currentValue)) {
-    // eslint-disable-next-line eqeqeq
-    if (!valueProp || valueProp == 'true' || valueProp == 'false') {
-      return Boolean(checked);
-    }
-  } else {
-    // If the current value is already an array, use it
-    currentArrayOfValues = currentValue;
-    index = currentValue.indexOf(valueProp);
-    isValueInArray = index >= 0;
-  }
-
-  // If the checkbox was checked and the value is not already present in the aray we want to add the new value to the array of values
-  if (checked && valueProp && !isValueInArray) {
-    return currentArrayOfValues.concat(valueProp);
-  }
-
-  // If the checkbox was unchecked and the value is not in the array, simply return the already existing array of values
-  if (!isValueInArray) {
-    return currentArrayOfValues;
-  }
-
-  // If the checkbox was unchecked and the value is in the array, remove the value and return the array
-  return currentArrayOfValues
-    .slice(0, index)
-    .concat(currentArrayOfValues.slice(index + 1));
-}
-
 // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect in the browser.
diff --git a/packages/formik/src/FormikContext.tsx b/packages/formik/src/FormikContext.tsx
index 7daab0da3..3feae3689 100644
--- a/packages/formik/src/FormikContext.tsx
+++ b/packages/formik/src/FormikContext.tsx
@@ -15,7 +15,7 @@ export function FormikConsumer<Values = any>({
 }) {
   const formik = useContextSelector(
     FormikContext,
-    React.useCallback(c => c, [])
+    React.useCallback((c: FormikContextType<Values>) => c, [])
   ) as FormikContextType<Values>;
   return <>{children(formik)}</>;
 }
@@ -23,7 +23,7 @@ export function FormikConsumer<Values = any>({
 export function useFormikContext<Values>() {
   const formik = useContextSelector(
     FormikContext,
-    React.useCallback(c => c, [])
+    React.useCallback((c: FormikContextType<Values>) => c, [])
   ) as FormikContextType<Values>;
 
   invariant(
@@ -33,3 +33,9 @@ export function useFormikContext<Values>() {
 
   return formik;
 }
+
+export function unstable_useFormikContextSelector<Values = any, Slice = any>(
+  selector: (value: FormikContextType<Values>) => Slice
+): Slice {
+  return useContextSelector(FormikContext, selector);
+}
diff --git a/packages/formik/src/StrictField.tsx b/packages/formik/src/StrictField.tsx
new file mode 100644
index 000000000..715265e78
--- /dev/null
+++ b/packages/formik/src/StrictField.tsx
@@ -0,0 +1,323 @@
+import * as React from 'react';
+import { useContextSelector } from 'use-context-selector';
+import { FormikContext } from './FormikContext';
+import invariant from 'tiny-warning';
+import {
+  FieldInputProps,
+  FieldMetaProps,
+  FieldValidator,
+  FormikContextType,
+  GenericFieldHTMLAttributes,
+} from './types';
+import {
+  defaultFormatFn,
+  defaultParseFn,
+  getIn,
+  getValueFromEvent,
+  isInputEvent,
+  isObject,
+  numberParseFn,
+  isFunction,
+  isEmptyChildren,
+} from './utils';
+
+function useFieldValue(name: string) {
+  return useContextSelector(FormikContext, ctx => getIn(ctx.values, name));
+}
+
+function useFieldError(name: string) {
+  return useContextSelector(FormikContext, ctx => getIn(ctx.errors, name));
+}
+
+function useFieldTouched(name: string) {
+  return useContextSelector(FormikContext, ctx => getIn(ctx.touched, name));
+}
+
+function useFieldState(name: string) {
+  return {
+    value: useFieldValue(name),
+    touched: useFieldTouched(name),
+    error: useFieldError(name),
+    initialValue: useContextSelector(FormikContext, ctx =>
+      getIn(ctx.initialValues.current, name)
+    ),
+    initialTouched: useContextSelector(
+      FormikContext,
+      ctx => !!getIn(ctx.initialTouched.current, name)
+    ),
+    initialError: useContextSelector(FormikContext, ctx =>
+      getIn(ctx.initialErrors.current, name)
+    ),
+  };
+}
+
+export interface StrictFieldProps<V = any> {
+  field: FieldInputProps<V>;
+  meta: FieldMetaProps<V>;
+}
+
+export interface UseStrictFieldProps<V = any> {
+  /**
+   * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.
+   */
+  as?:
+    | React.ComponentType<StrictFieldProps<V>['field']>
+    | string
+    | React.ComponentType
+    | React.ForwardRefExoticComponent<any>;
+  /**
+   * Validate a single field value independently
+   */
+  validate?: FieldValidator;
+
+  /**
+   * Function to parse raw input value before setting it to state
+   */
+  parse?: (value: unknown, name: string) => V;
+
+  /**
+   * Function to transform value passed to input
+   */
+  format?: (value: V, name: string) => any;
+
+  /**
+   * Wait until blur event before formatting input value?
+   * @default false
+   */
+  formatOnBlur?: boolean;
+
+  /**
+   * Field name
+   */
+  name: string;
+
+  /** HTML input type */
+  type?: string;
+
+  /** Field value */
+  value?: any;
+
+  /** Inner ref */
+  innerRef?: (instance: any) => void;
+}
+
+export type StrictFieldAttributes<T> = GenericFieldHTMLAttributes &
+  UseStrictFieldProps<T> &
+  T & { name: string };
+export type StrictFieldHookConfig<T> = GenericFieldHTMLAttributes &
+  UseStrictFieldProps<T>;
+export type StrictFieldConfig<V = any> = UseStrictFieldProps<V> & {
+  /**
+   * Field component to render. Can either be a string like 'select' or a component.
+   */
+  component?:
+    | string
+    | React.ComponentType<StrictFieldProps<V>>
+    | React.ComponentType
+    | React.ForwardRefExoticComponent<any>;
+
+  /**
+   * Render prop (works like React router's <Route render={props =>} />)
+   * @deprecated
+   */
+  render?: (props: StrictFieldProps<V>) => React.ReactNode;
+
+  /**
+   * Children render function <Field name>{props => ...}</Field>)
+   */
+  children?:
+    | ((props: StrictFieldProps<V>) => React.ReactNode)
+    | React.ReactNode;
+};
+
+export function unstable_useField<Value = any>(
+  nameOrOptions: string | StrictFieldHookConfig<Value>
+): [FieldInputProps<Value>, FieldMetaProps<Value>] {
+  const isAnObject = isObject(nameOrOptions);
+  // Normalize propsOrFieldName to FieldConfig<Value>
+  const props: StrictFieldConfig<Value> = isAnObject
+    ? (nameOrOptions as StrictFieldConfig<Value>)
+    : ({ name: nameOrOptions as string } as StrictFieldConfig<Value>);
+
+  const { name: fieldName, validate: validateFn } = props;
+
+  const registerField = useContextSelector(
+    FormikContext,
+    (c: FormikContextType<unknown>) => c.registerField
+  );
+
+  const unregisterField = useContextSelector(
+    FormikContext,
+    (c: FormikContextType<unknown>) => c.unregisterField
+  );
+
+  React.useEffect(() => {
+    if (fieldName) {
+      registerField(fieldName, {
+        validate: validateFn,
+      });
+    }
+    return () => {
+      if (fieldName) {
+        unregisterField(fieldName);
+      }
+    };
+  }, [registerField, unregisterField, fieldName, validateFn]);
+
+  // const valueState = useFieldValue(fieldName);
+  // const touchedState = useFieldTouched(fieldName);
+  const meta = useFieldState(fieldName);
+  const { value: valueState, touched: touchedState } = meta;
+  const setFieldValue = useContextSelector(
+    FormikContext,
+    ctx => ctx.setFieldValue
+  );
+  const handleChange = useContextSelector(
+    FormikContext,
+    ctx => ctx.handleChange
+  );
+  const handleBlur = useContextSelector(FormikContext, ctx => ctx.handleBlur);
+
+  const field: FieldInputProps<any> = {
+    name: fieldName,
+    value: valueState,
+    // @todo extract into factory methods to use between formik and field
+    onChange: handleChange,
+    onBlur: handleBlur,
+  };
+
+  const {
+    type,
+    value: valueProp, // value is special for checkboxes
+    as: is,
+    multiple,
+    parse = /number|range/.test(type ?? '') ? numberParseFn : defaultParseFn,
+    format = defaultFormatFn,
+    formatOnBlur = false,
+  } = nameOrOptions as StrictFieldHookConfig<Value> & { multiple?: boolean }; // @todo why is this type failing?
+
+  if (type === 'checkbox') {
+    if (valueProp === undefined) {
+      field.checked = !!valueState;
+    } else {
+      field.checked = !!(
+        Array.isArray(valueState) && ~valueState.indexOf(valueProp)
+      );
+      field.value = valueProp;
+    }
+  } else if (type === 'radio') {
+    field.checked = valueState === valueProp;
+    field.value = valueProp;
+  } else if (is === 'select' && multiple) {
+    field.value = field.value || [];
+    field.multiple = true;
+  }
+
+  if (type !== 'radio' && type !== 'checkbox' && !!format) {
+    if (formatOnBlur === true) {
+      if (touchedState === true) {
+        field.value = format(field.value, fieldName);
+      }
+    } else {
+      field.value = format(field.value, fieldName);
+    }
+  }
+
+  // We incorporate the fact that we know the `name` prop by scoping `onChange`.
+  // In addition, to support `parse` fn, we can't just re-use the OG `handleChange`, but
+  // instead re-implement it's guts.
+  if (type !== 'radio' && type !== 'checkbox') {
+    field.onChange = (eventOrValue: React.ChangeEvent<any> | any) => {
+      if (isInputEvent(eventOrValue)) {
+        if (eventOrValue.persist) {
+          eventOrValue.persist();
+        }
+        setFieldValue(
+          fieldName,
+          parse(getValueFromEvent(eventOrValue, valueState), fieldName)
+        );
+      } else {
+        setFieldValue(fieldName, parse(eventOrValue, fieldName));
+      }
+    };
+  }
+
+  return [field, meta];
+}
+
+const useField = unstable_useField;
+
+export function unstable_StrictField({
+  validate,
+  name,
+  render,
+  children,
+  as: is, // `as` is reserved in typescript lol
+  component,
+  ...props
+}: StrictFieldAttributes<any>) {
+  if (__DEV__) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      invariant(
+        !render,
+        `<Field render> has been deprecated and will be removed in future versions of Formik. Please use a child callback function instead. To get rid of this warning, replace <Field name="${name}" render={({field, form}) => ...} /> with <Field name="${name}">{({field, form, meta}) => ...}</Field>`
+      );
+
+      invariant(
+        !(is && children && isFunction(children)),
+        'You should not use <Field as> and <Field children> as a function in the same <Field> component; <Field as> will be ignored.'
+      );
+
+      invariant(
+        !(component && children && isFunction(children)),
+        'You should not use <Field component> and <Field children> as a function in the same <Field> component; <Field component> will be ignored.'
+      );
+
+      invariant(
+        !(render && children && !isEmptyChildren(children)),
+        'You should not use <Field render> and <Field children> in the same <Field> component; <Field children> will be ignored'
+      );
+      // eslint-disable-next-line
+    }, []);
+  }
+
+  const [field, meta] = useField(props);
+  const legacyBag = { field };
+
+  if (render) {
+    return render({ ...legacyBag, meta });
+  }
+
+  if (isFunction(children)) {
+    return children({ ...legacyBag, meta });
+  }
+
+  if (component) {
+    // This behavior is backwards compat with earlier Formik 0.9 to 1.x
+    if (typeof component === 'string') {
+      const { innerRef, parse, format, formatOnBlur, ...rest } = props;
+      return React.createElement(
+        component,
+        { ref: innerRef, ...field, ...rest },
+        children
+      );
+    }
+    const { parse, format, formatOnBlur, ...rest } = props;
+    return React.createElement(component, { field, meta, ...rest }, children);
+  }
+
+  // default to input here so we can check for both `as` and `children` above
+  const asElement = is || 'input';
+
+  if (typeof asElement === 'string') {
+    const { innerRef, parse, format, formatOnBlur, ...rest } = props;
+    return React.createElement(
+      asElement,
+      { ref: innerRef, ...field, ...rest },
+      children
+    );
+  }
+  const { parse, format, formatOnBlur, ...rest } = props;
+  return React.createElement(asElement, { ...field, ...rest }, children);
+}
diff --git a/packages/formik/src/index.tsx b/packages/formik/src/index.tsx
index 7732b9c9d..31ddeeced 100644
--- a/packages/formik/src/index.tsx
+++ b/packages/formik/src/index.tsx
@@ -9,3 +9,4 @@ export * from './connect';
 export * from './ErrorMessage';
 export * from './FormikContext';
 export * from './FastField';
+export * from './StrictField';
diff --git a/packages/formik/src/utils.ts b/packages/formik/src/utils.ts
index 17d4374f0..fc329c875 100755
--- a/packages/formik/src/utils.ts
+++ b/packages/formik/src/utils.ts
@@ -180,3 +180,100 @@ export function setNestedObjectValues<T>(
 
   return response;
 }
+
+/** Return multi select values based on an array of options */
+export function getSelectedValues(options: any[]) {
+  const result = [];
+  if (options) {
+    for (let index = 0; index < options.length; index++) {
+      const option = options[index];
+      if (option.selected) {
+        result.push(option.value);
+      }
+    }
+  }
+  return result;
+}
+
+/** Return the next value for a checkbox */
+export function getValueForCheckbox(
+  currentValue: string | any[],
+  checked: boolean,
+  valueProp: any
+) {
+  // If the current value was a boolean, return a boolean
+  if (typeof currentValue === 'boolean') {
+    return Boolean(checked);
+  }
+
+  // If the currentValue was not a boolean we want to return an array
+  let currentArrayOfValues = [];
+  let isValueInArray = false;
+  let index = -1;
+
+  if (!Array.isArray(currentValue)) {
+    // eslint-disable-next-line eqeqeq
+    if (!valueProp || valueProp == 'true' || valueProp == 'false') {
+      return Boolean(checked);
+    }
+  } else {
+    // If the current value is already an array, use it
+    currentArrayOfValues = currentValue;
+    index = currentValue.indexOf(valueProp);
+    isValueInArray = index >= 0;
+  }
+
+  // If the checkbox was checked and the value is not already present in the aray we want to add the new value to the array of values
+  if (checked && valueProp && !isValueInArray) {
+    return currentArrayOfValues.concat(valueProp);
+  }
+
+  // If the checkbox was unchecked and the value is not in the array, simply return the already existing array of values
+  if (!isValueInArray) {
+    return currentArrayOfValues;
+  }
+
+  // If the checkbox was unchecked and the value is in the array, remove the value and return the array
+  return currentArrayOfValues
+    .slice(0, index)
+    .concat(currentArrayOfValues.slice(index + 1));
+}
+
+export const defaultParseFn = (value: unknown, _name: string) => value;
+
+export const numberParseFn = (value: any, _name: string) => {
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? '' : parsed;
+};
+
+export const defaultFormatFn = (value: unknown, _name: string) =>
+  value === undefined ? '' : value;
+
+/** Get the value out of a React Synthetic event given some form state. Works cross-platform. */
+export const getValueFromEvent = (
+  event: React.SyntheticEvent<any>,
+  valueState: any
+) => {
+  // React Native/Expo Web/maybe other render envs
+  if (
+    !isReactNative &&
+    event.nativeEvent &&
+    (event.nativeEvent as any).text !== undefined
+  ) {
+    return (event.nativeEvent as any).text;
+  }
+
+  // React Native
+  if (isReactNative && event.nativeEvent) {
+    return (event.nativeEvent as any).text;
+  }
+
+  const target = event.target ? event.target : event.currentTarget;
+  const { type, value, checked, options, multiple } = target;
+
+  return /checkbox/.test(type) // checkboxes
+    ? getValueForCheckbox(valueState, checked, value)
+    : !!multiple // <select multiple>
+    ? getSelectedValues(options)
+    : value;
+};

From ee14b4ca7daa5e5b4ed516d604434a3367592ffd Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Mon, 9 Nov 2020 13:31:22 -0500
Subject: [PATCH 21/51] Fix ts in codemod

---
 packages/formik-codemod/bin/cli.ts                   | 12 ++++++------
 packages/formik-codemod/package.json                 |  5 +++--
 .../transforms/field-to-legacy-field.ts              |  2 +-
 packages/formik-codemod/tsconfig.json                |  3 ++-
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/formik-codemod/bin/cli.ts b/packages/formik-codemod/bin/cli.ts
index 528f56192..40e851fd4 100644
--- a/packages/formik-codemod/bin/cli.ts
+++ b/packages/formik-codemod/bin/cli.ts
@@ -19,7 +19,7 @@ const isGitClean = require('is-git-clean');
 const transformerDirectory = path.join(__dirname, '../', 'transforms');
 const jscodeshiftExecutable = require.resolve('.bin/jscodeshift');
 
-function checkGitStatus(force) {
+function checkGitStatus(force: boolean) {
   let clean = false;
   let errorMessage = 'Unable to determine if git directory is clean';
   try {
@@ -49,7 +49,7 @@ function checkGitStatus(force) {
   }
 }
 
-function runTransform({ files, flags, transformer }) {
+function runTransform({ files, flags, transformer }: any) {
   const transformerPath = path.join(transformerDirectory, `${transformer}.js`);
 
   let args = [];
@@ -108,8 +108,8 @@ const TRANSFORMER_INQUIRER_CHOICES = [
   },
 ];
 
-function expandFilePathsIfNeeded(filesBeforeExpansion) {
-  const shouldExpandFiles = filesBeforeExpansion.some(file =>
+function expandFilePathsIfNeeded(filesBeforeExpansion: any) {
+  const shouldExpandFiles = filesBeforeExpansion.some((file: any) =>
     file.includes('*')
   );
   return shouldExpandFiles
@@ -166,7 +166,7 @@ function run() {
         when: !cli.input[1],
         default: '.',
         // validate: () =>
-        filter: files => files.trim(),
+        filter: (files: any) => files.trim(),
       },
       {
         type: 'list',
@@ -177,7 +177,7 @@ function run() {
         choices: TRANSFORMER_INQUIRER_CHOICES,
       },
     ])
-    .then(answers => {
+    .then((answers: any) => {
       const { files, transformer } = answers;
 
       const filesBeforeExpansion = cli.input[1] || files;
diff --git a/packages/formik-codemod/package.json b/packages/formik-codemod/package.json
index e819eb683..acc827e7f 100644
--- a/packages/formik-codemod/package.json
+++ b/packages/formik-codemod/package.json
@@ -16,8 +16,9 @@
     "bin/*.js"
   ],
   "scripts": {
-    "prepublish": "yarn tsc -d -p tsconfig.json",
-    "build": "yarn tsc -d -w -p tsconfig.json",
+    "prepublish": "npm run build",
+    "start": "yarn tsc -d -w -p tsconfig.json",
+    "build": "yarn tsc -d -p tsconfig.json",
     "test": "jest"
   },
   "bin": "./bin/formik-codemod.js"
diff --git a/packages/formik-codemod/transforms/field-to-legacy-field.ts b/packages/formik-codemod/transforms/field-to-legacy-field.ts
index ad675a382..f3226f83e 100644
--- a/packages/formik-codemod/transforms/field-to-legacy-field.ts
+++ b/packages/formik-codemod/transforms/field-to-legacy-field.ts
@@ -1,4 +1,4 @@
-export default function transformer(file, api) {
+export default function transformer(file: any, api: any) {
   // j is just a shorthand for the jscodeshift api
   const j = api.jscodeshift;
   const root = j(file.source);
diff --git a/packages/formik-codemod/tsconfig.json b/packages/formik-codemod/tsconfig.json
index bad575540..e4d709c4e 100644
--- a/packages/formik-codemod/tsconfig.json
+++ b/packages/formik-codemod/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "module": "commonjs",
     "sourceMap": true,
@@ -7,6 +8,6 @@
     "downlevelIteration": true,
     "preserveWatchOutput": true
   },
-  "include": ["**/*.ts"],
+  "include": ["transforms", "bin"],
   "exclude": ["node_modules"]
 }

From 7abae43c7d1c4bcf9d55d6afc4779373d03f93fe Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Mon, 9 Nov 2020 13:51:16 -0500
Subject: [PATCH 22/51] Use tsdx to test codemod

---
 packages/formik-codemod/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/formik-codemod/package.json b/packages/formik-codemod/package.json
index acc827e7f..76642cf74 100644
--- a/packages/formik-codemod/package.json
+++ b/packages/formik-codemod/package.json
@@ -19,7 +19,7 @@
     "prepublish": "npm run build",
     "start": "yarn tsc -d -w -p tsconfig.json",
     "build": "yarn tsc -d -p tsconfig.json",
-    "test": "jest"
+    "test": "tsdx test"
   },
   "bin": "./bin/formik-codemod.js"
 }

From 961f0098ff92d4fda8e63e542c556aad84de9635 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Mon, 9 Nov 2020 13:56:05 -0500
Subject: [PATCH 23/51] Fix e2e test

---
 cypress/integration/v3.spec.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/cypress/integration/v3.spec.ts b/cypress/integration/v3.spec.ts
index a9e951c8d..cf46f0ced 100644
--- a/cypress/integration/v3.spec.ts
+++ b/cypress/integration/v3.spec.ts
@@ -17,9 +17,6 @@ describe('basic validation', () => {
     cy.get('input[name="phone-3"]').type('+49AAAABBBBBB');
     cy.get('input[name="phone-3"]').should('have.value', '+49 (AAAA) BBBBBB');
     console.log(masks.map(m => m.parse).join('').length);
-    cy.get('span#render-phone-1').should(
-      'have.text',
-      masks.map(m => m.parse).join('').length
-    );
+    cy.get('span#render-phone-1').should('have.text', 35);
   });
 });

From dce5e8db1d8fc5d31ff17b82214d2b00d8acccea Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Mon, 9 Nov 2020 14:03:11 -0500
Subject: [PATCH 24/51] Remove console.lgo

---
 cypress/integration/v3.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress/integration/v3.spec.ts b/cypress/integration/v3.spec.ts
index cf46f0ced..b1a7349cd 100644
--- a/cypress/integration/v3.spec.ts
+++ b/cypress/integration/v3.spec.ts
@@ -16,7 +16,6 @@ describe('basic validation', () => {
     cy.get('input[name="phone-2"]').should('have.value', '(999) 999-9999');
     cy.get('input[name="phone-3"]').type('+49AAAABBBBBB');
     cy.get('input[name="phone-3"]').should('have.value', '+49 (AAAA) BBBBBB');
-    console.log(masks.map(m => m.parse).join('').length);
     cy.get('span#render-phone-1').should('have.text', 35);
   });
 });

From e56e830d7ce0306cfd1b271f5809d58dcbd95e41 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Wed, 11 Nov 2020 14:48:03 -0500
Subject: [PATCH 25/51] Implement new error message

---
 packages/formik/src/ErrorMessage.tsx | 76 ++++++++++------------------
 1 file changed, 27 insertions(+), 49 deletions(-)

diff --git a/packages/formik/src/ErrorMessage.tsx b/packages/formik/src/ErrorMessage.tsx
index 028573f29..3a5b44bb6 100644
--- a/packages/formik/src/ErrorMessage.tsx
+++ b/packages/formik/src/ErrorMessage.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { FormikContextType } from './types';
-import { getIn, isFunction } from './utils';
-import { connect } from './connect';
-
+import {
+  unstable_useFieldError as useFieldError,
+  unstable_useFieldTouched as useFieldTouched,
+} from './StrictField';
+import { isFunction } from './utils';
 export interface ErrorMessageProps {
   name: string;
   className?: string;
@@ -10,49 +11,26 @@ export interface ErrorMessageProps {
   children?: (errorMessage: string) => React.ReactNode;
   render?: (errorMessage: string) => React.ReactNode;
 }
-
-class ErrorMessageImpl extends React.Component<
-  ErrorMessageProps & { formik: FormikContextType<any> }
-> {
-  shouldComponentUpdate(
-    props: ErrorMessageProps & { formik: FormikContextType<any> }
-  ) {
-    if (
-      getIn(this.props.formik.errors, this.props.name) !==
-        getIn(props.formik.errors, this.props.name) ||
-      getIn(this.props.formik.touched, this.props.name) !==
-        getIn(props.formik.touched, this.props.name) ||
-      Object.keys(this.props).length !== Object.keys(props).length
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  render() {
-    let { component, formik, render, children, name, ...rest } = this.props;
-
-    const touch = getIn(formik.touched, name);
-    const error = getIn(formik.errors, name);
-
-    return !!touch && !!error
-      ? render
-        ? isFunction(render)
-          ? render(error)
-          : null
-        : children
-        ? isFunction(children)
-          ? children(error)
-          : null
-        : component
-        ? React.createElement(component, rest as any, error)
-        : error
-      : null;
-  }
+export function ErrorMessage({
+  component,
+  render,
+  children,
+  name,
+  ...rest
+}: ErrorMessageProps) {
+  const touch = useFieldTouched(name);
+  const error = useFieldError(name);
+  return !!touch && !!error
+    ? render
+      ? isFunction(render)
+        ? render(error)
+        : null
+      : children
+      ? isFunction(children)
+        ? children(error)
+        : null
+      : component
+      ? React.createElement(component, rest as any, error)
+      : error
+    : null;
 }
-
-export const ErrorMessage = connect<
-  ErrorMessageProps,
-  ErrorMessageProps & { formik: FormikContextType<any> }
->(ErrorMessageImpl);

From b059d836647d17c11bbba53460135ff8806bac59 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Wed, 11 Nov 2020 14:52:04 -0500
Subject: [PATCH 26/51] Fix StrictField

---
 packages/formik/src/StrictField.tsx | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/formik/src/StrictField.tsx b/packages/formik/src/StrictField.tsx
index 715265e78..ef3502ee6 100644
--- a/packages/formik/src/StrictField.tsx
+++ b/packages/formik/src/StrictField.tsx
@@ -21,23 +21,23 @@ import {
   isEmptyChildren,
 } from './utils';
 
-function useFieldValue(name: string) {
+export function unstable_useFieldValue(name: string) {
   return useContextSelector(FormikContext, ctx => getIn(ctx.values, name));
 }
 
-function useFieldError(name: string) {
+export function unstable_useFieldError(name: string) {
   return useContextSelector(FormikContext, ctx => getIn(ctx.errors, name));
 }
 
-function useFieldTouched(name: string) {
+export function unstable_useFieldTouched(name: string) {
   return useContextSelector(FormikContext, ctx => getIn(ctx.touched, name));
 }
 
 function useFieldState(name: string) {
   return {
-    value: useFieldValue(name),
-    touched: useFieldTouched(name),
-    error: useFieldError(name),
+    value: unstable_useFieldValue(name),
+    touched: unstable_useFieldTouched(name),
+    error: unstable_useFieldError(name),
     initialValue: useContextSelector(FormikContext, ctx =>
       getIn(ctx.initialValues.current, name)
     ),
@@ -248,8 +248,6 @@ export function unstable_useField<Value = any>(
 const useField = unstable_useField;
 
 export function unstable_StrictField({
-  validate,
-  name,
   render,
   children,
   as: is, // `as` is reserved in typescript lol
@@ -283,27 +281,26 @@ export function unstable_StrictField({
   }
 
   const [field, meta] = useField(props);
-  const legacyBag = { field };
 
   if (render) {
-    return render({ ...legacyBag, meta });
+    return render({ field, meta });
   }
 
   if (isFunction(children)) {
-    return children({ ...legacyBag, meta });
+    return children({ field, meta });
   }
 
+  const { innerRef, parse, format, formatOnBlur, validate, ...rest } = props;
+
   if (component) {
     // This behavior is backwards compat with earlier Formik 0.9 to 1.x
     if (typeof component === 'string') {
-      const { innerRef, parse, format, formatOnBlur, ...rest } = props;
       return React.createElement(
         component,
         { ref: innerRef, ...field, ...rest },
         children
       );
     }
-    const { parse, format, formatOnBlur, ...rest } = props;
     return React.createElement(component, { field, meta, ...rest }, children);
   }
 
@@ -311,13 +308,11 @@ export function unstable_StrictField({
   const asElement = is || 'input';
 
   if (typeof asElement === 'string') {
-    const { innerRef, parse, format, formatOnBlur, ...rest } = props;
     return React.createElement(
       asElement,
       { ref: innerRef, ...field, ...rest },
       children
     );
   }
-  const { parse, format, formatOnBlur, ...rest } = props;
   return React.createElement(asElement, { ...field, ...rest }, children);
 }

From f4aa35c82bb5227453f223633a9e7435daeb5049 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Wed, 11 Nov 2020 14:52:22 -0500
Subject: [PATCH 27/51] Implement Form

---
 packages/formik/src/Form.tsx | 45 +++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/formik/src/Form.tsx b/packages/formik/src/Form.tsx
index 93ffe65e3..c775d60c1 100644
--- a/packages/formik/src/Form.tsx
+++ b/packages/formik/src/Form.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { useFormikContext } from './FormikContext';
+import { useContextSelector } from 'use-context-selector';
+import { FormikContext } from './FormikContext';
 
 export type FormikFormProps = Pick<
   React.FormHTMLAttributes<HTMLFormElement>,
@@ -12,23 +13,29 @@ export type FormikFormProps = Pick<
 type FormProps = React.ComponentPropsWithoutRef<'form'>;
 
 // @todo tests
-export const Form = React.forwardRef<HTMLFormElement, FormProps>(
-  (props: FormikFormProps, ref) => {
-    // iOS needs an "action" attribute for nice input: https://stackoverflow.com/a/39485162/406725
-    // We default the action to "#" in case the preventDefault fails (just updates the URL hash)
-    const { action, ...rest } = props;
-    const _action = action || '#';
-    const { handleReset, handleSubmit } = useFormikContext();
-    return (
-      <form
-        onSubmit={handleSubmit}
-        ref={ref}
-        onReset={handleReset}
-        action={_action}
-        {...rest}
-      />
-    );
-  }
-);
+export const Form = React.forwardRef<HTMLFormElement, FormProps>(function Form(
+  props: FormikFormProps,
+  ref
+) {
+  // iOS needs an "action" attribute for nice input: https://stackoverflow.com/a/39485162/406725
+  // We default the action to "#" in case the preventDefault fails (just updates the URL hash)
+  const { action, ...rest } = props;
+  const _action = action || '#';
+  const handleReset = useContextSelector(FormikContext, ctx => ctx.handleReset);
+  const handleSubmit = useContextSelector(
+    FormikContext,
+    ctx => ctx.handleSubmit
+  );
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      ref={ref}
+      onReset={handleReset}
+      action={_action}
+      {...rest}
+    />
+  );
+});
 
 Form.displayName = 'Form';

From 2219193ed0eedf23aac4296adfd3d2187a8fd881 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Wed, 11 Nov 2020 17:07:38 -0500
Subject: [PATCH 28/51] Add perf to app

---
 app/pages/perf.tsx | 128 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 app/pages/perf.tsx

diff --git a/app/pages/perf.tsx b/app/pages/perf.tsx
new file mode 100644
index 000000000..6ac7cd18a
--- /dev/null
+++ b/app/pages/perf.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  Formik,
+  unstable_StrictField 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;

From 6383b86d3123a3348e4fa6abba4fe0c3652cb5a4 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Wed, 11 Nov 2020 17:29:40 -0500
Subject: [PATCH 29/51] Add changeset

---
 .changeset/gentle-boxes-turn.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .changeset/gentle-boxes-turn.md

diff --git a/.changeset/gentle-boxes-turn.md b/.changeset/gentle-boxes-turn.md
new file mode 100644
index 000000000..f1ed355b7
--- /dev/null
+++ b/.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.

From f37e5802eba375a2fbff0b1d4b8e079e6c4b514c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 11 Nov 2020 22:43:01 +0000
Subject: [PATCH 30/51] Version Packages (next)

---
 .changeset/pre.json                 |  8 ++++----
 packages/formik-native/CHANGELOG.md |  7 +++++++
 packages/formik-native/package.json |  4 ++--
 packages/formik/CHANGELOG.md        | 16 ++++++++++++++++
 packages/formik/package.json        |  6 ++----
 5 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 21329e77b..fb93bdf5b 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -3,12 +3,12 @@
   "tag": "next",
   "initialVersions": {
     "formik": "2.2.1",
-    "formik-native": "2.1.9"
+    "formik-native": "2.1.9",
+    "@formik/codemod": "3.0.0-next.2"
   },
   "changesets": [
+    "gentle-boxes-turn",
     "little-olives-enjoy",
-    "moody-apples-return",
-    "quiet-beans-attack",
-    "tough-dragons-dream"
+    "quiet-beans-attack"
   ]
 }
diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
index 67d88b853..4d26e646b 100644
--- a/packages/formik-native/CHANGELOG.md
+++ b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # formik-native
 
+## 2.1.10-next.3
+
+### Patch Changes
+
+- Updated dependencies [[`6383b86`](https://github.com/formium/formik/commit/6383b86d3123a3348e4fa6abba4fe0c3652cb5a4)]:
+  - formik@3.0.0-next.3
+
 ## 2.1.10-next.2
 
 ## 2.1.11
diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
index 16fca5d27..ec28a3fe4 100644
--- a/packages/formik-native/package.json
+++ b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.10-next.2",
+  "version": "2.1.10-next.3",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -31,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "3.0.0-next.2"
+    "formik": "3.0.0-next.3"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
index 39f6fd036..1c6cbcc16 100644
--- a/packages/formik/CHANGELOG.md
+++ b/packages/formik/CHANGELOG.md
@@ -1,5 +1,21 @@
 # formik
 
+## 3.0.0-next.3
+
+### Patch Changes
+
+- [`6383b86`](https://github.com/formium/formik/commit/6383b86d3123a3348e4fa6abba4fe0c3652cb5a4) [#2893](https://github.com/formium/formik/pull/2893) Thanks [@jaredpalmer](https://github.com/jaredpalmer)! - 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.
+
 ## 3.0.0-next.2
 
 ## 2.2.3
diff --git a/packages/formik/package.json b/packages/formik/package.json
index 4c8036f86..1797b3802 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "3.0.0-next.2",
+  "version": "3.0.0-next.3",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -20,9 +20,7 @@
   "umd:main": "dist/formik.umd.production.js",
   "module": "dist/formik.esm.js",
   "typings": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "peerDependencies": {
     "react": ">=16.8.0"
   },

From 3a3f52bc41a41ee8517bebb7af4bed62e0fb4e93 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Thu, 12 Nov 2020 14:57:42 -0500
Subject: [PATCH 31/51] Refactor Field and useField

---
 packages/formik/src/Field.tsx         | 228 ++++++--------------------
 packages/formik/src/FormikContext.tsx |  28 ++--
 packages/formik/src/types.tsx         |  21 +++
 packages/formik/src/useField.tsx      | 217 ++++++++++++++++++++++++
 4 files changed, 298 insertions(+), 196 deletions(-)
 create mode 100644 packages/formik/src/useField.tsx

diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx
index 2f06f0e87..d7d8d82ce 100644
--- a/packages/formik/src/Field.tsx
+++ b/packages/formik/src/Field.tsx
@@ -1,204 +1,65 @@
 import * as React from 'react';
+import invariant from 'tiny-warning';
+import { useFormikContext } from './FormikContext';
 import {
+  FieldInputProps,
+  FieldMetaProps,
   FormikProps,
   GenericFieldHTMLAttributes,
-  FieldMetaProps,
-  FieldHelperProps,
-  FieldInputProps,
-  FieldValidator,
+  SharedFieldProps,
 } from './types';
-import { useFormikContext } from './FormikContext';
-import { isFunction, isEmptyChildren, isObject } from './utils';
-import invariant from 'tiny-warning';
+import { useField, UseFieldProps } from './useField';
+import { isEmptyChildren, isFunction } from './utils';
 
-export interface FieldProps<V = any, FormValues = any> {
+export interface FieldProps<V, FormValues> {
   field: FieldInputProps<V>;
   form: FormikProps<FormValues>; // if ppl want to restrict this for a given form, let them.
   meta: FieldMetaProps<V>;
 }
 
-export interface FieldConfig<V = any> {
-  /**
-   * Field component to render. Can either be a string like 'select' or a component.
-   */
-  component?:
-    | string
-    | React.ComponentType<FieldProps<V>>
-    | React.ComponentType
-    | React.ForwardRefExoticComponent<any>;
-
-  /**
-   * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.
-   */
-  as?:
-    | React.ComponentType<FieldProps<V>['field']>
-    | string
-    | React.ComponentType
-    | React.ForwardRefExoticComponent<any>;
-
-  /**
-   * Render prop (works like React router's <Route render={props =>} />)
-   * @deprecated
-   */
-  render?: (props: FieldProps<V>) => React.ReactNode;
-
-  /**
-   * Children render function <Field name>{props => ...}</Field>)
-   */
-  children?: ((props: FieldProps<V>) => React.ReactNode) | React.ReactNode;
-
-  /**
-   * Validate a single field value independently
-   */
-  validate?: FieldValidator;
-
-  /**
-   * Function to parse raw input value before setting it to state
-   */
-  parse?: (value: unknown, name: string) => any;
-
-  /**
-   * Function to transform value passed to input
-   */
-  format?: (value: unknown, name: string) => any;
-
-  /**
-   * Wait until blur event before formatting input value?
-   * @default false
-   */
-  formatOnBlur?: boolean;
-
-  /**
-   * Field name
-   */
-  name: string;
-
-  /** HTML input type */
-  type?: string;
-
-  /** Field value */
-  value?: any;
-
-  /** Inner ref */
-  innerRef?: (instance: any) => void;
-}
-
-export type FieldAttributes<T> = GenericFieldHTMLAttributes &
-  FieldConfig<T> &
-  T & { name: string };
-
-export type FieldHookConfig<T> = GenericFieldHTMLAttributes & FieldConfig<T>;
-
-export function useField<Val = any>(
-  propsOrFieldName: string | FieldHookConfig<Val>
-): [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>] {
-  const formik = useFormikContext();
-  const {
-    getFieldProps,
-    getFieldMeta,
-    getFieldHelpers,
-    registerField,
-    unregisterField,
-  } = formik;
-
-  const isAnObject = isObject(propsOrFieldName);
-
-  // Normalize propsOrFieldName to FieldHookConfig<Val>
-  const props: FieldHookConfig<Val> = isAnObject
-    ? (propsOrFieldName as FieldHookConfig<Val>)
-    : { name: propsOrFieldName as string };
-
-  const { name: fieldName, validate: validateFn } = props;
+export type FieldConfig<FieldValue, FormValues> = UseFieldProps<FieldValue> &
+  SharedFieldProps<FieldProps<FieldValue, FormValues>>;
 
+export function Field<FieldValue = any, FormValues = any>({
+  render,
+  children,
+  as: is, // `as` is reserved in typescript lol
+  component,
+  ...props
+}: GenericFieldHTMLAttributes & FieldConfig<FieldValue, FormValues>) {
   React.useEffect(() => {
-    if (fieldName) {
-      registerField(fieldName, {
-        validate: validateFn,
-      });
-    }
-    return () => {
-      if (fieldName) {
-        unregisterField(fieldName);
-      }
-    };
-  }, [registerField, unregisterField, fieldName, validateFn]);
+    invariant(
+      !render,
+      `<Field render> has been deprecated. Please use a child callback function instead: <Field name={${name}}>{props => ...}</Field> instead.`
+    );
+    invariant(
+      !(component && render),
+      'You should not use <Field component> and <Field render> in the same <Field> component; <Field component> will be ignored'
+    );
 
-  if (__DEV__) {
     invariant(
-      formik,
-      'useField() / <Field /> must be used underneath a <Formik> component or withFormik() higher order component'
+      !(is && children && isFunction(children)),
+      'You should not use <Field as> and <Field children> as a function in the same <Field> component; <Field as> will be ignored.'
     );
-  }
 
-  invariant(
-    fieldName,
-    'Invalid field name. Either pass `useField` a string or an object containing a `name` key.'
-  );
+    invariant(
+      !(component && children && isFunction(children)),
+      'You should not use <Field component> and <Field children> as a function in the same <Field> component; <Field component> will be ignored.'
+    );
 
-  return [
-    getFieldProps(props),
-    getFieldMeta(fieldName),
-    getFieldHelpers(fieldName),
-  ];
-}
+    invariant(
+      !(render && children && !isEmptyChildren(children)),
+      'You should not use <Field render> and <Field children> in the same <Field> component; <FastField children> will be ignored'
+    );
+    // eslint-disable-next-line
+  }, []);
 
-export function Field({
-  validate,
-  name,
-  render,
-  children,
-  as: is, // `as` is reserved in typescript lol
-  component,
-  ...props
-}: FieldAttributes<any>) {
+  const [field, meta] = useField<FieldValue>(props);
   const {
     validate: _validate,
     validationSchema: _validationSchema,
-
     ...formik
-  } = useFormikContext();
-
-  if (__DEV__) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      invariant(
-        !render,
-        `<Field render> has been deprecated and will be removed in future versions of Formik. Please use a child callback function instead. To get rid of this warning, replace <Field name="${name}" render={({field, form}) => ...} /> with <Field name="${name}">{({field, form, meta}) => ...}</Field>`
-      );
-
-      invariant(
-        !(is && children && isFunction(children)),
-        'You should not use <Field as> and <Field children> as a function in the same <Field> component; <Field as> will be ignored.'
-      );
-
-      invariant(
-        !(component && children && isFunction(children)),
-        'You should not use <Field component> and <Field children> as a function in the same <Field> component; <Field component> will be ignored.'
-      );
-
-      invariant(
-        !(render && children && !isEmptyChildren(children)),
-        'You should not use <Field render> and <Field children> in the same <Field> component; <Field children> will be ignored'
-      );
-      // eslint-disable-next-line
-    }, []);
-  }
-
-  // Register field and field-level validation with parent <Formik>
-  const { registerField, unregisterField } = formik;
-  React.useEffect(() => {
-    registerField(name, {
-      validate: validate,
-    });
-    return () => {
-      unregisterField(name);
-    };
-  }, [registerField, unregisterField, name, validate]);
-  const field = formik.getFieldProps({
-    name,
-    ...props,
-  });
-  const meta = formik.getFieldMeta(name);
+  } = useFormikContext<FormValues>();
   const legacyBag = { field, form: formik };
 
   if (render) {
@@ -219,11 +80,12 @@ export function Field({
         children
       );
     }
-    // We don't pass `meta` for backwards compat
+
     const { parse, format, formatOnBlur, ...rest } = props;
     return React.createElement(
       component,
-      { field, form: formik, ...rest },
+      // @todo this is wrong type signature
+      { ...legacyBag, meta, ...rest } as FieldProps<FieldValue, FormValues>,
       children
     );
   }
@@ -240,5 +102,9 @@ export function Field({
     );
   }
   const { parse, format, formatOnBlur, ...rest } = props;
-  return React.createElement(asElement, { ...field, ...rest }, children);
+  return React.createElement(
+    asElement as React.ComponentType<FieldInputProps<FieldValue>>,
+    { ...field, ...rest },
+    children
+  );
 }
diff --git a/packages/formik/src/FormikContext.tsx b/packages/formik/src/FormikContext.tsx
index 3feae3689..bffe2f0d3 100644
--- a/packages/formik/src/FormikContext.tsx
+++ b/packages/formik/src/FormikContext.tsx
@@ -1,40 +1,38 @@
 import * as React from 'react';
 import { FormikContextType } from './types';
+import {
+  createContext,
+  useContext,
+  useContextSelector,
+} from 'use-context-selector';
 import invariant from 'tiny-warning';
-import { createContext, useContextSelector } from 'use-context-selector';
 
 export const FormikContext = createContext<FormikContextType<any>>(
   undefined as any
 );
+
 export const FormikProvider = FormikContext.Provider;
 
+export function useFormikContext<Values>() {
+  return useContext<FormikContextType<Values>>(FormikContext);
+}
+
 export function FormikConsumer<Values = any>({
   children,
 }: {
   children: (formik: FormikContextType<Values>) => React.ReactNode;
 }) {
-  const formik = useContextSelector(
-    FormikContext,
-    React.useCallback((c: FormikContextType<Values>) => c, [])
-  ) as FormikContextType<Values>;
-  return <>{children(formik)}</>;
-}
-
-export function useFormikContext<Values>() {
-  const formik = useContextSelector(
-    FormikContext,
-    React.useCallback((c: FormikContextType<Values>) => c, [])
-  ) as FormikContextType<Values>;
+  const formik = useFormikContext<Values>();
 
   invariant(
     !!formik,
     `Formik context is undefined, please verify you are calling useFormikContext() as child of a <Formik> component.`
   );
 
-  return formik;
+  return <>{children(formik)}</>;
 }
 
-export function unstable_useFormikContextSelector<Values = any, Slice = any>(
+export function useFormikContextSelector<Values = any, Slice = any>(
   selector: (value: FormikContextType<Values>) => Slice
 ): Slice {
   return useContextSelector(FormikContext, selector);
diff --git a/packages/formik/src/types.tsx b/packages/formik/src/types.tsx
index 53172ba9d..446056ea7 100644
--- a/packages/formik/src/types.tsx
+++ b/packages/formik/src/types.tsx
@@ -321,3 +321,24 @@ export interface FieldInputProps<Value> {
 export type FieldValidator = (
   value: any
 ) => string | void | Promise<string | void>;
+
+export type SharedFieldProps<T = any> = {
+  /**
+   * Field component to render. Can either be a string like 'select' or a component.
+   */
+  component?: string | React.ComponentType<T>;
+
+  /**
+   * Render prop (works like React router's <Route render={props =>} />)
+   * @deprecated
+   */
+  render?: (props: T) => React.ReactNode;
+
+  /**
+   * Children render function <Field name>{props => ...}</Field>)
+   */
+  children?: ((props: T) => React.ReactNode) | React.ReactNode;
+
+  /** Inner ref */
+  innerRef?: (instance: any) => void;
+};
diff --git a/packages/formik/src/useField.tsx b/packages/formik/src/useField.tsx
new file mode 100644
index 000000000..15da38e01
--- /dev/null
+++ b/packages/formik/src/useField.tsx
@@ -0,0 +1,217 @@
+import * as React from 'react';
+import invariant from 'tiny-warning';
+import { FieldInputProps, FieldMetaProps, FieldValidator } from './types';
+import { useFormikContextSelector } from './FormikContext';
+import {
+  defaultFormatFn,
+  defaultParseFn,
+  getIn,
+  getValueFromEvent,
+  isInputEvent,
+  isObject,
+  numberParseFn,
+} from './utils';
+import { FieldHelperProps } from '../dist';
+
+export type UseFieldProps<V = any> = {
+  /**
+   * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.
+   */
+  as?:
+    | string
+    | React.ComponentType<FieldInputProps<V>>
+    | React.ComponentType
+    | React.ForwardRefExoticComponent<any>;
+  /**
+   * Validate a single field value independently
+   */
+  validate?: FieldValidator;
+
+  /**
+   * Function to parse raw input value before setting it to state
+   */
+  parse?: (value: unknown, name: string) => V;
+
+  /**
+   * Function to transform value passed to input
+   */
+  format?: (value: V, name: string) => any;
+
+  /**
+   * Wait until blur event before formatting input value?
+   * @default false
+   */
+  formatOnBlur?: boolean;
+
+  /**
+   * HTML multiple attribute
+   */
+  multiple?: boolean;
+  /**
+   * Field name
+   */
+  name: string;
+
+  /** HTML input type */
+  type?: string;
+
+  /** Field value */
+  value?: any;
+};
+
+export function useField<FieldValues = any>(
+  nameOrOptions: string | UseFieldProps<FieldValues>
+): [
+  FieldInputProps<FieldValues>,
+  FieldMetaProps<FieldValues>,
+  FieldHelperProps<FieldValues>
+] {
+  const isAnObject = isObject(nameOrOptions);
+  // Normalize propsOrFieldName to FieldConfig<Value>
+  const props: UseFieldProps<FieldValues> = isAnObject
+    ? (nameOrOptions as UseFieldProps<FieldValues>)
+    : ({ name: nameOrOptions as string } as UseFieldProps<FieldValues>);
+
+  const { name: fieldName, validate: validateFn } = props;
+
+  const registerField = useFormikContextSelector(c => c.registerField);
+
+  const unregisterField = useFormikContextSelector(c => c.unregisterField);
+
+  React.useEffect(() => {
+    invariant(
+      fieldName,
+      'Invalid field name. Either pass `useField` a string or an object containing a `name` key.'
+    );
+
+    invariant(
+      registerField,
+      'useField() / <Field /> must be used underneath a <Formik> component or withFormik() higher order component'
+    );
+
+    if (fieldName) {
+      registerField(fieldName, {
+        validate: validateFn,
+      });
+    }
+    return () => {
+      if (fieldName) {
+        unregisterField(fieldName);
+      }
+    };
+  }, [registerField, unregisterField, fieldName, validateFn]);
+
+  const meta = useFieldMeta(fieldName);
+  const { value: valueState, touched: touchedState } = meta;
+  const setFieldValue = useFormikContextSelector(ctx => ctx.setFieldValue);
+  const handleChange = useFormikContextSelector(ctx => ctx.handleChange);
+  const handleBlur = useFormikContextSelector(ctx => ctx.handleBlur);
+  const getFieldHelpers = useFormikContextSelector(ctx => ctx.getFieldHelpers);
+
+  const field: FieldInputProps<any> = {
+    name: fieldName,
+    value: valueState,
+    // @todo extract into factory methods to use between formik and field
+    onChange: handleChange,
+    onBlur: handleBlur,
+  };
+
+  const {
+    type,
+    value: valueProp, // value is special for checkboxes
+    as: is,
+    multiple,
+    parse = /number|range/.test(type ?? '') ? numberParseFn : defaultParseFn,
+    format = defaultFormatFn,
+    formatOnBlur = false,
+  } = nameOrOptions as UseFieldProps<FieldValues>; // @todo why is this type failing?
+
+  if (type === 'checkbox') {
+    if (valueProp === undefined) {
+      field.checked = !!valueState;
+    } else {
+      field.checked = !!(
+        Array.isArray(valueState) && ~valueState.indexOf(valueProp)
+      );
+      field.value = valueProp;
+    }
+  } else if (type === 'radio') {
+    field.checked = valueState === valueProp;
+    field.value = valueProp;
+  } else if (is === 'select' && multiple) {
+    field.value = field.value || [];
+    field.multiple = true;
+  }
+
+  if (type !== 'radio' && type !== 'checkbox' && !!format) {
+    if (formatOnBlur === true) {
+      if (touchedState === true) {
+        field.value = format(field.value, fieldName);
+      }
+    } else {
+      field.value = format(field.value, fieldName);
+    }
+  }
+
+  // We incorporate the fact that we know the `name` prop by scoping `onChange`.
+  // In addition, to support `parse` fn, we can't just re-use the OG `handleChange`, but
+  // instead re-implement it's guts.
+  if (type !== 'radio' && type !== 'checkbox') {
+    field.onChange = (eventOrValue: React.ChangeEvent<any> | any) => {
+      if (isInputEvent(eventOrValue)) {
+        if (eventOrValue.persist) {
+          eventOrValue.persist();
+        }
+        setFieldValue(
+          fieldName,
+          parse(getValueFromEvent(eventOrValue, valueState), fieldName)
+        );
+      } else {
+        setFieldValue(fieldName, parse(eventOrValue, fieldName));
+      }
+    };
+  }
+
+  return [field, meta, getFieldHelpers(fieldName)];
+}
+
+export function useFieldValue(name: string) {
+  return useFormikContextSelector(ctx => getIn(ctx.values, name));
+}
+
+export function useFieldError(name: string) {
+  return useFormikContextSelector(ctx => getIn(ctx.errors, name));
+}
+
+export function useFieldTouched(name: string) {
+  return useFormikContextSelector(ctx => Boolean(getIn(ctx.touched, name)));
+}
+
+export function useFieldInitialValue(name: string) {
+  return useFormikContextSelector(ctx =>
+    getIn(ctx.initialValues.current, name)
+  );
+}
+
+export function useFieldInitialTouched(name: string) {
+  return useFormikContextSelector(
+    ctx => !!getIn(ctx.initialTouched.current, name)
+  );
+}
+
+export function useFieldInitialError(name: string) {
+  return useFormikContextSelector(ctx =>
+    getIn(ctx.initialErrors.current, name)
+  );
+}
+
+function useFieldMeta(name: string) {
+  return {
+    value: useFieldValue(name),
+    touched: useFieldTouched(name),
+    error: useFieldError(name),
+    initialValue: useFieldInitialValue(name),
+    initialTouched: useFieldInitialTouched(name),
+    initialError: useFieldInitialError(name),
+  };
+}

From 8fe165a5fff16185e3675a96a8d148ce14adb638 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Fri, 13 Nov 2020 16:39:11 -0500
Subject: [PATCH 32/51] Add error message and reimplement fast field

---
 packages/formik/src/ErrorMessage.tsx |   5 +-
 packages/formik/src/FastField.tsx    | 206 +++++------------
 packages/formik/src/StrictField.tsx  | 318 ---------------------------
 3 files changed, 57 insertions(+), 472 deletions(-)
 delete mode 100644 packages/formik/src/StrictField.tsx

diff --git a/packages/formik/src/ErrorMessage.tsx b/packages/formik/src/ErrorMessage.tsx
index 3a5b44bb6..eff4ebf5b 100644
--- a/packages/formik/src/ErrorMessage.tsx
+++ b/packages/formik/src/ErrorMessage.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  unstable_useFieldError as useFieldError,
-  unstable_useFieldTouched as useFieldTouched,
-} from './StrictField';
+import { useFieldError, useFieldTouched } from './StrictField';
 import { isFunction } from './utils';
 export interface ErrorMessageProps {
   name: string;
diff --git a/packages/formik/src/FastField.tsx b/packages/formik/src/FastField.tsx
index 98a863a1b..f9e08dd97 100644
--- a/packages/formik/src/FastField.tsx
+++ b/packages/formik/src/FastField.tsx
@@ -1,52 +1,37 @@
 import * as React from 'react';
-
+import invariant from 'tiny-warning';
 import {
-  FormikProps,
-  GenericFieldHTMLAttributes,
-  FormikContextType,
-  FieldMetaProps,
   FieldInputProps,
+  FieldMetaProps,
+  GenericFieldHTMLAttributes,
+  SharedFieldProps,
 } from './types';
-import invariant from 'tiny-warning';
-import { getIn, isEmptyChildren, isFunction } from './utils';
-import { FieldConfig } from './Field';
-import { connect } from './connect';
-
-type $FixMe = any;
-
-export interface FastFieldProps<V = any> {
-  field: FieldInputProps<V>;
-  meta: FieldMetaProps<V>;
-  form: FormikProps<V>; // if ppl want to restrict this for a given form, let them.
-}
+import { useField, UseFieldProps } from './useField';
+import { isEmptyChildren, isFunction } from './utils';
 
-export type FastFieldConfig<T> = FieldConfig & {
-  /** Override FastField's default shouldComponentUpdate */
-  shouldUpdate?: (
-    nextProps: T & GenericFieldHTMLAttributes,
-    props: {}
-  ) => boolean;
+export type FastFieldProps<FieldValue = any> = {
+  field: FieldInputProps<FieldValue>;
+  meta: FieldMetaProps<FieldValue>;
 };
 
-export type FastFieldAttributes<T> = GenericFieldHTMLAttributes &
-  FastFieldConfig<T> &
-  T;
-
-type FastFieldInnerProps<Values = {}, Props = {}> = FastFieldAttributes<
-  Props
-> & { formik: FormikContextType<Values> };
-
-/**
- * Custom Field component for quickly hooking into Formik
- * context and wiring up forms.
- */
-class FastFieldInner<Values = {}, Props = {}> extends React.Component<
-  FastFieldInnerProps<Values, Props>,
-  {}
-> {
-  constructor(props: FastFieldInnerProps<Values, Props>) {
-    super(props);
-    const { render, children, component, as: is, name } = props;
+export type FastFieldConfig<V = any> = UseFieldProps<V> &
+  SharedFieldProps<FastFieldProps<V>> & {
+    /**
+     * Override FastField's default shouldComponentUpdate
+     * @deprecated
+     */
+    shouldUpdate?: (nextProps: any, props: {}) => boolean;
+  };
+
+export function FastField<V = any>({
+  render,
+  children,
+  as: is, // `as` is reserved in typescript lol
+  component,
+  shouldUpdate,
+  ...props
+}: GenericFieldHTMLAttributes & FastFieldConfig<V>) {
+  React.useEffect(() => {
     invariant(
       !render,
       `<FastField render> has been deprecated. Please use a child callback function instead: <FastField name={${name}}>{props => ...}</FastField> instead.`
@@ -70,129 +55,50 @@ class FastFieldInner<Values = {}, Props = {}> extends React.Component<
       !(render && children && !isEmptyChildren(children)),
       'You should not use <FastField render> and <FastField children> in the same <FastField> component; <FastField children> will be ignored'
     );
-  }
-
-  shouldComponentUpdate(props: FastFieldInnerProps<Values, Props>) {
-    if (this.props.shouldUpdate) {
-      return this.props.shouldUpdate(props, this.props);
-    } else if (
-      props.name !== this.props.name ||
-      getIn(props.formik.values, this.props.name) !==
-        getIn(this.props.formik.values, this.props.name) ||
-      getIn(props.formik.errors, this.props.name) !==
-        getIn(this.props.formik.errors, this.props.name) ||
-      getIn(props.formik.touched, this.props.name) !==
-        getIn(this.props.formik.touched, this.props.name) ||
-      Object.keys(this.props).length !== Object.keys(props).length ||
-      props.formik.isSubmitting !== this.props.formik.isSubmitting
-    ) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  componentDidMount() {
-    // Register the Field with the parent Formik. Parent will cycle through
-    // registered Field's validate fns right prior to submit
-    this.props.formik.registerField(this.props.name, {
-      validate: this.props.validate,
-    });
-  }
+    invariant(
+      !shouldUpdate,
+      `<FastField shouldUpdate> has been deprecated. Please create a custom component with useField and React.memo() instead.`
+    );
+    // eslint-disable-next-line
+  }, []);
 
-  componentDidUpdate(prevProps: FastFieldAttributes<Props>) {
-    if (this.props.name !== prevProps.name) {
-      this.props.formik.unregisterField(prevProps.name);
-      this.props.formik.registerField(this.props.name, {
-        validate: this.props.validate,
-      });
-    }
+  const [field, meta] = useField<V>(props);
 
-    if (this.props.validate !== prevProps.validate) {
-      this.props.formik.registerField(this.props.name, {
-        validate: this.props.validate,
-      });
-    }
+  if (render) {
+    return render({ field, meta });
   }
 
-  componentWillUnmount() {
-    this.props.formik.unregisterField(this.props.name);
+  if (isFunction(children)) {
+    return children({ field, meta });
   }
 
-  render() {
-    const {
-      validate,
-      name,
-      render,
-      as: is,
-      children,
-      component,
-      shouldUpdate,
-      formik,
-      ...props
-    } = this.props as FastFieldInnerProps<Values, Props>;
-
-    const {
-      validate: _validate,
-      validationSchema: _validationSchema,
-      ...restOfFormik
-    } = formik;
-    const field = formik.getFieldProps({ name, ...props });
-    const meta = {
-      value: getIn(formik.values, name),
-      error: getIn(formik.errors, name),
-      touched: !!getIn(formik.touched, name),
-      initialValue: getIn(formik.initialValues, name),
-      initialTouched: !!getIn(formik.initialTouched, name),
-      initialError: getIn(formik.initialErrors, name),
-    };
+  const { innerRef, parse, format, formatOnBlur, validate, ...rest } = props;
 
-    const bag = { field, meta, form: restOfFormik };
-
-    if (render) {
-      return (render as any)(bag);
-    }
-
-    if (isFunction(children)) {
-      return (children as (props: FastFieldProps<any>) => React.ReactNode)(bag);
-    }
-
-    if (component) {
-      // This behavior is backwards compat with earlier Formik 0.9 to 1.x
-      if (typeof component === 'string') {
-        const { innerRef, ...rest } = props;
-        return React.createElement(
-          component,
-          { ref: innerRef, ...field, ...(rest as $FixMe) },
-          children
-        );
-      }
-      // We don't pass `meta` for backwards compat
+  if (component) {
+    // This behavior is backwards compat with earlier Formik 0.9 to 1.x
+    if (typeof component === 'string') {
       return React.createElement(
-        component as React.ComponentClass<$FixMe>,
-        { field, form: formik, ...props },
+        component,
+        { ref: innerRef, ...field, ...rest },
         children
       );
     }
+    return React.createElement(component, { field, meta, ...rest }, children);
+  }
 
-    // default to input here so we can check for both `as` and `children` above
-    const asElement = is || 'input';
-
-    if (typeof asElement === 'string') {
-      const { innerRef, ...rest } = props;
-      return React.createElement(
-        asElement,
-        { ref: innerRef, ...field, ...(rest as $FixMe) },
-        children
-      );
-    }
+  // default to input here so we can check for both `as` and `children` above
+  const asElement = is || 'input';
 
+  if (typeof asElement === 'string') {
     return React.createElement(
-      asElement as React.ComponentClass,
-      { ...field, ...props },
+      asElement,
+      { ref: innerRef, ...field, ...rest },
       children
     );
   }
+  return React.createElement(
+    asElement as React.FunctionComponent<FieldInputProps<V>>,
+    { ...field, ...rest },
+    children
+  );
 }
-
-export const FastField = connect<FastFieldAttributes<any>, any>(FastFieldInner);
diff --git a/packages/formik/src/StrictField.tsx b/packages/formik/src/StrictField.tsx
deleted file mode 100644
index ef3502ee6..000000000
--- a/packages/formik/src/StrictField.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import * as React from 'react';
-import { useContextSelector } from 'use-context-selector';
-import { FormikContext } from './FormikContext';
-import invariant from 'tiny-warning';
-import {
-  FieldInputProps,
-  FieldMetaProps,
-  FieldValidator,
-  FormikContextType,
-  GenericFieldHTMLAttributes,
-} from './types';
-import {
-  defaultFormatFn,
-  defaultParseFn,
-  getIn,
-  getValueFromEvent,
-  isInputEvent,
-  isObject,
-  numberParseFn,
-  isFunction,
-  isEmptyChildren,
-} from './utils';
-
-export function unstable_useFieldValue(name: string) {
-  return useContextSelector(FormikContext, ctx => getIn(ctx.values, name));
-}
-
-export function unstable_useFieldError(name: string) {
-  return useContextSelector(FormikContext, ctx => getIn(ctx.errors, name));
-}
-
-export function unstable_useFieldTouched(name: string) {
-  return useContextSelector(FormikContext, ctx => getIn(ctx.touched, name));
-}
-
-function useFieldState(name: string) {
-  return {
-    value: unstable_useFieldValue(name),
-    touched: unstable_useFieldTouched(name),
-    error: unstable_useFieldError(name),
-    initialValue: useContextSelector(FormikContext, ctx =>
-      getIn(ctx.initialValues.current, name)
-    ),
-    initialTouched: useContextSelector(
-      FormikContext,
-      ctx => !!getIn(ctx.initialTouched.current, name)
-    ),
-    initialError: useContextSelector(FormikContext, ctx =>
-      getIn(ctx.initialErrors.current, name)
-    ),
-  };
-}
-
-export interface StrictFieldProps<V = any> {
-  field: FieldInputProps<V>;
-  meta: FieldMetaProps<V>;
-}
-
-export interface UseStrictFieldProps<V = any> {
-  /**
-   * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.
-   */
-  as?:
-    | React.ComponentType<StrictFieldProps<V>['field']>
-    | string
-    | React.ComponentType
-    | React.ForwardRefExoticComponent<any>;
-  /**
-   * Validate a single field value independently
-   */
-  validate?: FieldValidator;
-
-  /**
-   * Function to parse raw input value before setting it to state
-   */
-  parse?: (value: unknown, name: string) => V;
-
-  /**
-   * Function to transform value passed to input
-   */
-  format?: (value: V, name: string) => any;
-
-  /**
-   * Wait until blur event before formatting input value?
-   * @default false
-   */
-  formatOnBlur?: boolean;
-
-  /**
-   * Field name
-   */
-  name: string;
-
-  /** HTML input type */
-  type?: string;
-
-  /** Field value */
-  value?: any;
-
-  /** Inner ref */
-  innerRef?: (instance: any) => void;
-}
-
-export type StrictFieldAttributes<T> = GenericFieldHTMLAttributes &
-  UseStrictFieldProps<T> &
-  T & { name: string };
-export type StrictFieldHookConfig<T> = GenericFieldHTMLAttributes &
-  UseStrictFieldProps<T>;
-export type StrictFieldConfig<V = any> = UseStrictFieldProps<V> & {
-  /**
-   * Field component to render. Can either be a string like 'select' or a component.
-   */
-  component?:
-    | string
-    | React.ComponentType<StrictFieldProps<V>>
-    | React.ComponentType
-    | React.ForwardRefExoticComponent<any>;
-
-  /**
-   * Render prop (works like React router's <Route render={props =>} />)
-   * @deprecated
-   */
-  render?: (props: StrictFieldProps<V>) => React.ReactNode;
-
-  /**
-   * Children render function <Field name>{props => ...}</Field>)
-   */
-  children?:
-    | ((props: StrictFieldProps<V>) => React.ReactNode)
-    | React.ReactNode;
-};
-
-export function unstable_useField<Value = any>(
-  nameOrOptions: string | StrictFieldHookConfig<Value>
-): [FieldInputProps<Value>, FieldMetaProps<Value>] {
-  const isAnObject = isObject(nameOrOptions);
-  // Normalize propsOrFieldName to FieldConfig<Value>
-  const props: StrictFieldConfig<Value> = isAnObject
-    ? (nameOrOptions as StrictFieldConfig<Value>)
-    : ({ name: nameOrOptions as string } as StrictFieldConfig<Value>);
-
-  const { name: fieldName, validate: validateFn } = props;
-
-  const registerField = useContextSelector(
-    FormikContext,
-    (c: FormikContextType<unknown>) => c.registerField
-  );
-
-  const unregisterField = useContextSelector(
-    FormikContext,
-    (c: FormikContextType<unknown>) => c.unregisterField
-  );
-
-  React.useEffect(() => {
-    if (fieldName) {
-      registerField(fieldName, {
-        validate: validateFn,
-      });
-    }
-    return () => {
-      if (fieldName) {
-        unregisterField(fieldName);
-      }
-    };
-  }, [registerField, unregisterField, fieldName, validateFn]);
-
-  // const valueState = useFieldValue(fieldName);
-  // const touchedState = useFieldTouched(fieldName);
-  const meta = useFieldState(fieldName);
-  const { value: valueState, touched: touchedState } = meta;
-  const setFieldValue = useContextSelector(
-    FormikContext,
-    ctx => ctx.setFieldValue
-  );
-  const handleChange = useContextSelector(
-    FormikContext,
-    ctx => ctx.handleChange
-  );
-  const handleBlur = useContextSelector(FormikContext, ctx => ctx.handleBlur);
-
-  const field: FieldInputProps<any> = {
-    name: fieldName,
-    value: valueState,
-    // @todo extract into factory methods to use between formik and field
-    onChange: handleChange,
-    onBlur: handleBlur,
-  };
-
-  const {
-    type,
-    value: valueProp, // value is special for checkboxes
-    as: is,
-    multiple,
-    parse = /number|range/.test(type ?? '') ? numberParseFn : defaultParseFn,
-    format = defaultFormatFn,
-    formatOnBlur = false,
-  } = nameOrOptions as StrictFieldHookConfig<Value> & { multiple?: boolean }; // @todo why is this type failing?
-
-  if (type === 'checkbox') {
-    if (valueProp === undefined) {
-      field.checked = !!valueState;
-    } else {
-      field.checked = !!(
-        Array.isArray(valueState) && ~valueState.indexOf(valueProp)
-      );
-      field.value = valueProp;
-    }
-  } else if (type === 'radio') {
-    field.checked = valueState === valueProp;
-    field.value = valueProp;
-  } else if (is === 'select' && multiple) {
-    field.value = field.value || [];
-    field.multiple = true;
-  }
-
-  if (type !== 'radio' && type !== 'checkbox' && !!format) {
-    if (formatOnBlur === true) {
-      if (touchedState === true) {
-        field.value = format(field.value, fieldName);
-      }
-    } else {
-      field.value = format(field.value, fieldName);
-    }
-  }
-
-  // We incorporate the fact that we know the `name` prop by scoping `onChange`.
-  // In addition, to support `parse` fn, we can't just re-use the OG `handleChange`, but
-  // instead re-implement it's guts.
-  if (type !== 'radio' && type !== 'checkbox') {
-    field.onChange = (eventOrValue: React.ChangeEvent<any> | any) => {
-      if (isInputEvent(eventOrValue)) {
-        if (eventOrValue.persist) {
-          eventOrValue.persist();
-        }
-        setFieldValue(
-          fieldName,
-          parse(getValueFromEvent(eventOrValue, valueState), fieldName)
-        );
-      } else {
-        setFieldValue(fieldName, parse(eventOrValue, fieldName));
-      }
-    };
-  }
-
-  return [field, meta];
-}
-
-const useField = unstable_useField;
-
-export function unstable_StrictField({
-  render,
-  children,
-  as: is, // `as` is reserved in typescript lol
-  component,
-  ...props
-}: StrictFieldAttributes<any>) {
-  if (__DEV__) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      invariant(
-        !render,
-        `<Field render> has been deprecated and will be removed in future versions of Formik. Please use a child callback function instead. To get rid of this warning, replace <Field name="${name}" render={({field, form}) => ...} /> with <Field name="${name}">{({field, form, meta}) => ...}</Field>`
-      );
-
-      invariant(
-        !(is && children && isFunction(children)),
-        'You should not use <Field as> and <Field children> as a function in the same <Field> component; <Field as> will be ignored.'
-      );
-
-      invariant(
-        !(component && children && isFunction(children)),
-        'You should not use <Field component> and <Field children> as a function in the same <Field> component; <Field component> will be ignored.'
-      );
-
-      invariant(
-        !(render && children && !isEmptyChildren(children)),
-        'You should not use <Field render> and <Field children> in the same <Field> component; <Field children> will be ignored'
-      );
-      // eslint-disable-next-line
-    }, []);
-  }
-
-  const [field, meta] = useField(props);
-
-  if (render) {
-    return render({ field, meta });
-  }
-
-  if (isFunction(children)) {
-    return children({ field, meta });
-  }
-
-  const { innerRef, parse, format, formatOnBlur, validate, ...rest } = props;
-
-  if (component) {
-    // This behavior is backwards compat with earlier Formik 0.9 to 1.x
-    if (typeof component === 'string') {
-      return React.createElement(
-        component,
-        { ref: innerRef, ...field, ...rest },
-        children
-      );
-    }
-    return React.createElement(component, { field, meta, ...rest }, children);
-  }
-
-  // default to input here so we can check for both `as` and `children` above
-  const asElement = is || 'input';
-
-  if (typeof asElement === 'string') {
-    return React.createElement(
-      asElement,
-      { ref: innerRef, ...field, ...rest },
-      children
-    );
-  }
-  return React.createElement(asElement, { ...field, ...rest }, children);
-}

From 4216947d54016a51162410f309ab5259828229c6 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Fri, 13 Nov 2020 16:40:18 -0500
Subject: [PATCH 33/51] Fix broken import

---
 packages/formik/src/ErrorMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/formik/src/ErrorMessage.tsx b/packages/formik/src/ErrorMessage.tsx
index eff4ebf5b..9de308112 100644
--- a/packages/formik/src/ErrorMessage.tsx
+++ b/packages/formik/src/ErrorMessage.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFieldError, useFieldTouched } from './StrictField';
+import { useFieldError, useFieldTouched } from './useField';
 import { isFunction } from './utils';
 export interface ErrorMessageProps {
   name: string;

From 1650120323520a6d25d641e1a61539cffbebdae7 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Fri, 13 Nov 2020 16:47:41 -0500
Subject: [PATCH 34/51] Fix imports

---
 packages/formik/src/index.tsx    | 2 +-
 packages/formik/src/useField.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/formik/src/index.tsx b/packages/formik/src/index.tsx
index 31ddeeced..5d9924baa 100644
--- a/packages/formik/src/index.tsx
+++ b/packages/formik/src/index.tsx
@@ -9,4 +9,4 @@ export * from './connect';
 export * from './ErrorMessage';
 export * from './FormikContext';
 export * from './FastField';
-export * from './StrictField';
+export * from './useField';
diff --git a/packages/formik/src/useField.tsx b/packages/formik/src/useField.tsx
index 15da38e01..b27018cdd 100644
--- a/packages/formik/src/useField.tsx
+++ b/packages/formik/src/useField.tsx
@@ -11,7 +11,7 @@ import {
   isObject,
   numberParseFn,
 } from './utils';
-import { FieldHelperProps } from '../dist';
+import { FieldHelperProps } from './types';
 
 export type UseFieldProps<V = any> = {
   /**

From 0ad41ebc8ddd8d7fa40dc7364b7cdcfcc4b8c298 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Fri, 13 Nov 2020 16:59:42 -0500
Subject: [PATCH 35/51] Add changeset

---
 .changeset/two-fans-film.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 .changeset/two-fans-film.md

diff --git a/.changeset/two-fans-film.md b/.changeset/two-fans-film.md
new file mode 100644
index 000000000..e7b514893
--- /dev/null
+++ b/.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>
+```

From 129000e339b86d0cfadc041a6bef592f90c92e45 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Fri, 13 Nov 2020 18:12:24 -0500
Subject: [PATCH 36/51] Make new hooks more useful

---
 packages/formik/src/ErrorMessage.tsx |   4 +-
 packages/formik/src/useField.tsx     | 249 ++++++++++++++++++++++++---
 2 files changed, 228 insertions(+), 25 deletions(-)

diff --git a/packages/formik/src/ErrorMessage.tsx b/packages/formik/src/ErrorMessage.tsx
index 9de308112..fe595eced 100644
--- a/packages/formik/src/ErrorMessage.tsx
+++ b/packages/formik/src/ErrorMessage.tsx
@@ -15,8 +15,8 @@ export function ErrorMessage({
   name,
   ...rest
 }: ErrorMessageProps) {
-  const touch = useFieldTouched(name);
-  const error = useFieldError(name);
+  const [touch] = useFieldTouched(name);
+  const [error] = useFieldError(name);
   return !!touch && !!error
     ? render
       ? isFunction(render)
diff --git a/packages/formik/src/useField.tsx b/packages/formik/src/useField.tsx
index b27018cdd..c87a8b0d1 100644
--- a/packages/formik/src/useField.tsx
+++ b/packages/formik/src/useField.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import invariant from 'tiny-warning';
-import { FieldInputProps, FieldMetaProps, FieldValidator } from './types';
+import {
+  FieldInputProps,
+  FieldMetaProps,
+  FieldValidator,
+  FormikContextType,
+} from './types';
 import { useFormikContextSelector } from './FormikContext';
 import {
   defaultFormatFn,
@@ -175,43 +180,241 @@ export function useField<FieldValues = any>(
   return [field, meta, getFieldHelpers(fieldName)];
 }
 
-export function useFieldValue(name: string) {
-  return useFormikContextSelector(ctx => getIn(ctx.values, name));
+/**
+ * Returns the value and an updater function of a given field
+ * @param name The name of the field
+ * @public
+ */
+export function useFieldValue<Values>(
+  name: string
+): [any | undefined, (error: any) => void] {
+  const state = useFormikContextSelector<Values>(ctx =>
+    getIn(ctx.values, name)
+  );
+
+  const set = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setFieldValue']
+  >(ctx => ctx.setFieldValue);
+
+  const setState = React.useCallback(
+    (value: any, shouldValidate?: boolean) => {
+      set(name, value, shouldValidate);
+    },
+    [name]
+  );
+
+  return [state, setState];
 }
 
-export function useFieldError(name: string) {
-  return useFormikContextSelector(ctx => getIn(ctx.errors, name));
+/**
+ * Returns error message state and an updater function of a given field
+ * @param name The name of the field
+ * @public
+ */
+export function useFieldError<Values>(
+  name: string
+): [any | undefined, (error: any) => void] {
+  const state = useFormikContextSelector<Values, any | undefined>(ctx =>
+    getIn(ctx.errors, name)
+  );
+
+  const set = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setFieldError']
+  >(ctx => ctx.setFieldError);
+
+  const setState = React.useCallback(
+    (error: any) => {
+      set(name, error);
+    },
+    [name]
+  );
+
+  return [state, setState];
 }
 
-export function useFieldTouched(name: string) {
-  return useFormikContextSelector(ctx => Boolean(getIn(ctx.touched, name)));
+/**
+ * Returns touched state and updater function of a given field
+ * @param name The name of the field
+ * @public
+ */
+export function useFieldTouched<Values>(
+  name: string
+): [boolean, (error: any) => void] {
+  const state = useFormikContextSelector<Values, boolean>(ctx =>
+    Boolean(getIn(ctx.errors, name))
+  );
+
+  const set = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setFieldTouched']
+  >(ctx => ctx.setFieldTouched);
+
+  const setState = React.useCallback(
+    (isTouched?: boolean, shouldValidate?: boolean) => {
+      set(name, isTouched, shouldValidate);
+    },
+    [name]
+  );
+
+  return [state, setState];
 }
 
-export function useFieldInitialValue(name: string) {
-  return useFormikContextSelector(ctx =>
-    getIn(ctx.initialValues.current, name)
+/**
+ * Returns initial value of a given field
+ * @param name The name of the field
+ * @public
+ */
+export function useFieldInitialValue<Values>(name: string) {
+  return useFormikContextSelector<Values, any | undefined>(ctx =>
+    getIn(ctx.initialValues, name)
   );
 }
 
-export function useFieldInitialTouched(name: string) {
-  return useFormikContextSelector(
-    ctx => !!getIn(ctx.initialTouched.current, name)
+/**
+ * Returns initial touched state of a given field
+ * @param name The name of the field
+ * @public
+ */
+export function useFieldInitialTouched<Values>(name: string) {
+  return useFormikContextSelector<Values>(ctx =>
+    Boolean(getIn(ctx.initialTouched, name))
   );
 }
 
-export function useFieldInitialError(name: string) {
-  return useFormikContextSelector(ctx =>
-    getIn(ctx.initialErrors.current, name)
+/**
+ * Returns initial error message of a given field
+ * @param name The name of the field
+ * @public
+ */
+export function useFieldInitialError<Values>(name: string) {
+  return useFormikContextSelector<Values>(ctx =>
+    getIn(ctx.initialErrors, name)
   );
 }
 
-function useFieldMeta(name: string) {
+/**
+ * Returns initial Formik values
+ * @public
+ */
+export function useInitialValues<Values>() {
+  return useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['initialValues']
+  >(ctx => ctx.initialValues);
+}
+
+/**
+ * Returns initial Formik touched
+ * @public
+ */
+export function useInitialTouched<Values>() {
+  return useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['initialTouched']
+  >(ctx => ctx.initialTouched);
+}
+
+/**
+ * Returns initial Formik errors
+ * @public
+ */
+export function useInitialErrors<Values>() {
+  return useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['initialErrors']
+  >(ctx => ctx.initialErrors);
+}
+
+/**
+ * Returns initial Formik status
+ * @public
+ */
+export function useInitialStatus<Values>() {
+  return useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['initialStatus']
+  >(ctx => ctx.initialStatus);
+}
+
+/**
+ * Returns Formik errors and updater function
+ * @public
+ */
+export function useErrors<Values>() {
+  const state = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['errors']
+  >(ctx => ctx.errors);
+  const update = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setErrors']
+  >(ctx => ctx.setErrors);
+  return [state, update];
+}
+
+/**
+ * Returns Formik values and updater function
+ * @public
+ */
+export function useValues<Values>() {
+  const state = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['values']
+  >(ctx => ctx.values);
+  const update = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setValues']
+  >(ctx => ctx.setValues);
+  return [state, update];
+}
+
+/**
+ * Returns Formik touched state and updater function
+ * @public
+ */
+export function useTouched<Values>() {
+  const state = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['touched']
+  >(ctx => ctx.touched);
+  const update = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setTouched']
+  >(ctx => ctx.setTouched);
+  return [state, update];
+}
+
+/**
+ * Returns Formik status and updater function
+ * @public
+ */
+export function useStatus<T>() {
+  const state: T = useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['status']
+  >(ctx => ctx.status);
+  const update = useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['setStatus']
+  >(ctx => ctx.setStatus);
+  return [state, update];
+}
+
+function useFieldMeta<Values>(name: string) {
+  const [value] = useFieldValue<Values>(name);
+  const [touched] = useFieldTouched<Values>(name);
+  const [error] = useFieldError<Values>(name);
+  const initialValue = useFieldInitialValue<Values>(name);
+  const initialTouched = useFieldInitialTouched<Values>(name);
+  const initialError = useFieldInitialError<Values>(name);
   return {
-    value: useFieldValue(name),
-    touched: useFieldTouched(name),
-    error: useFieldError(name),
-    initialValue: useFieldInitialValue(name),
-    initialTouched: useFieldInitialTouched(name),
-    initialError: useFieldInitialError(name),
+    value,
+    touched,
+    error,
+    initialValue,
+    initialTouched,
+    initialError,
   };
 }

From d33493df0c237c8f5539456f64a86db6a7a8e497 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Fri, 13 Nov 2020 18:28:29 -0500
Subject: [PATCH 37/51] Start migration guide

---
 MIGRATING-v3.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 MIGRATING-v3.md

diff --git a/MIGRATING-v3.md b/MIGRATING-v3.md
new file mode 100644
index 000000000..c588810ad
--- /dev/null
+++ b/MIGRATING-v3.md
@@ -0,0 +1,36 @@
+# 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`
+  - `useErrors`
+  - `useTouched`
+  - `useStatus`
+
+## 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.

From 24529bde2c0ce88c152708dc7791fbb3f1a576bd Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Fri, 13 Nov 2020 18:34:22 -0500
Subject: [PATCH 38/51] Fix cypress tests

---
 app/pages/perf.tsx | 7 +------
 app/pages/v3.tsx   | 9 +++++----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/pages/perf.tsx b/app/pages/perf.tsx
index 6ac7cd18a..d06c6ba8d 100644
--- a/app/pages/perf.tsx
+++ b/app/pages/perf.tsx
@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  Formik,
-  unstable_StrictField as Field,
-  Form,
-  ErrorMessage,
-} from 'formik';
+import { Formik, FastField as Field, Form, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 
 let renderCount = 0;
diff --git a/app/pages/v3.tsx b/app/pages/v3.tsx
index ab80e91f1..15816aa81 100644
--- a/app/pages/v3.tsx
+++ b/app/pages/v3.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {
   Formik,
   Form,
-  unstable_useField as useFieldNew,
-  useField as useFieldOld,
+  useFormikContext,
+  useField,
   UseFieldProps,
 } from 'formik';
 import formatString from 'format-string-by-pattern';
@@ -20,7 +20,8 @@ let renderCounterOld = 0;
 function CustomFieldOld(
   props: UseFieldProps<string> & { placeholder: string }
 ) {
-  const [field] = useFieldOld(props as any);
+  const [field] = useField(props as any);
+  useFormikContext();
   return (
     <>
       <input {...(props as any)} {...field} />
@@ -33,7 +34,7 @@ let renderCounterNew = 0;
 function CustomFieldNew(
   props: UseFieldProps<string> & { placeholder: string }
 ) {
-  const [field] = useFieldNew(props as any);
+  const [field] = useField(props as any);
   return (
     <>
       <input {...(props as any)} {...field} />

From fdca92057e9db9a0e0f87c320f2171b9b0fdf464 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Fri, 13 Nov 2020 19:29:06 -0500
Subject: [PATCH 39/51] Fix / hack types

---
 packages/formik/src/ErrorMessage.tsx |  2 +-
 packages/formik/src/FastField.tsx    |  6 ++++--
 packages/formik/src/Field.tsx        | 32 +++++++---------------------
 packages/formik/test/Field.test.tsx  | 12 +++++------
 4 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/packages/formik/src/ErrorMessage.tsx b/packages/formik/src/ErrorMessage.tsx
index fe595eced..853eb7bfc 100644
--- a/packages/formik/src/ErrorMessage.tsx
+++ b/packages/formik/src/ErrorMessage.tsx
@@ -14,7 +14,7 @@ export function ErrorMessage({
   children,
   name,
   ...rest
-}: ErrorMessageProps) {
+}: ErrorMessageProps): JSX.Element | null {
   const [touch] = useFieldTouched(name);
   const [error] = useFieldError(name);
   return !!touch && !!error
diff --git a/packages/formik/src/FastField.tsx b/packages/formik/src/FastField.tsx
index f9e08dd97..58f311e60 100644
--- a/packages/formik/src/FastField.tsx
+++ b/packages/formik/src/FastField.tsx
@@ -30,7 +30,7 @@ export function FastField<V = any>({
   component,
   shouldUpdate,
   ...props
-}: GenericFieldHTMLAttributes & FastFieldConfig<V>) {
+}: GenericFieldHTMLAttributes & FastFieldConfig<V>): any {
   React.useEffect(() => {
     invariant(
       !render,
@@ -65,10 +65,12 @@ export function FastField<V = any>({
   const [field, meta] = useField<V>(props);
 
   if (render) {
-    return render({ field, meta });
+    // @ts-ignore @todo types
+    return isFunction(render) ? render({ field, meta }) : null;
   }
 
   if (isFunction(children)) {
+    // @ts-ignore @todo types
     return children({ field, meta });
   }
 
diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx
index d7d8d82ce..3c9e4a5fb 100644
--- a/packages/formik/src/Field.tsx
+++ b/packages/formik/src/Field.tsx
@@ -11,13 +11,15 @@ import {
 import { useField, UseFieldProps } from './useField';
 import { isEmptyChildren, isFunction } from './utils';
 
-export interface FieldProps<V, FormValues> {
+export interface FieldProps<V = any, FormValues = any> {
   field: FieldInputProps<V>;
   form: FormikProps<FormValues>; // if ppl want to restrict this for a given form, let them.
   meta: FieldMetaProps<V>;
 }
 
-export type FieldConfig<FieldValue, FormValues> = UseFieldProps<FieldValue> &
+export type FieldConfig<FieldValue = any, FormValues = any> = UseFieldProps<
+  FieldValue
+> &
   SharedFieldProps<FieldProps<FieldValue, FormValues>>;
 
 export function Field<FieldValue = any, FormValues = any>({
@@ -26,7 +28,7 @@ export function Field<FieldValue = any, FormValues = any>({
   as: is, // `as` is reserved in typescript lol
   component,
   ...props
-}: GenericFieldHTMLAttributes & FieldConfig<FieldValue, FormValues>) {
+}: GenericFieldHTMLAttributes & FieldConfig<FieldValue, FormValues>): any {
   React.useEffect(() => {
     invariant(
       !render,
@@ -63,33 +65,15 @@ export function Field<FieldValue = any, FormValues = any>({
   const legacyBag = { field, form: formik };
 
   if (render) {
-    return render({ ...legacyBag, meta });
+    // @ts-ignore @todo types
+    return isFunction(render) ? render({ ...legacyBag, meta }) : null;
   }
 
   if (isFunction(children)) {
+    // @ts-ignore @todo types
     return children({ ...legacyBag, meta });
   }
 
-  if (component) {
-    // This behavior is backwards compat with earlier Formik 0.9 to 1.x
-    if (typeof component === 'string') {
-      const { innerRef, parse, format, formatOnBlur, ...rest } = props;
-      return React.createElement(
-        component,
-        { ref: innerRef, ...field, ...rest },
-        children
-      );
-    }
-
-    const { parse, format, formatOnBlur, ...rest } = props;
-    return React.createElement(
-      component,
-      // @todo this is wrong type signature
-      { ...legacyBag, meta, ...rest } as FieldProps<FieldValue, FormValues>,
-      children
-    );
-  }
-
   // default to input here so we can check for both `as` and `children` above
   const asElement = is || 'input';
 
diff --git a/packages/formik/test/Field.test.tsx b/packages/formik/test/Field.test.tsx
index 033eac1d3..66e583820 100644
--- a/packages/formik/test/Field.test.tsx
+++ b/packages/formik/test/Field.test.tsx
@@ -12,6 +12,7 @@ import {
   Field,
   FastField,
   FieldProps,
+  FastFieldProps,
   FieldConfig,
   FormikProps,
   FormikConfig,
@@ -81,7 +82,7 @@ const createRenderField = (
 };
 
 const renderField = createRenderField(Field);
-const renderFastField = createRenderField(FastField);
+const renderFastField = createRenderField(FastField as $FixMe);
 
 function cases(
   title: string,
@@ -125,7 +126,7 @@ describe('Field / FastField', () => {
         <>
           <Field name="name" children={Component} />
           <Field name="name" render={Component} />
-          <Field name="name" component={Component} />
+          <Field name="name" component={Component as $FixMe} />
           <Field name="name" as={AsComponent} />
         </>
       );
@@ -158,8 +159,8 @@ describe('Field / FastField', () => {
     });
 
     it('<FastField />', () => {
-      let injected: FieldProps[] = [];
-      let asInjectedProps: FieldProps['field'] = {} as any;
+      let injected: FastFieldProps[] = [];
+      let asInjectedProps: FastFieldProps['field'] = {} as any;
 
       const Component = (props: FieldProps) =>
         injected.push(props) && <div>{TEXT}</div>;
@@ -169,8 +170,8 @@ describe('Field / FastField', () => {
       const { getFormProps, queryAllByText } = renderForm(
         <>
           <FastField name="name" children={Component} />
-          <FastField name="name" render={Component} />
           {/* @todo fix the types here?? #shipit */}
+          <FastField name="name" render={Component as $FixMe} />
           <FastField name="name" component={Component as $FixMe} />
           <FastField name="name" as={AsComponent} />
         </>
@@ -182,7 +183,6 @@ describe('Field / FastField', () => {
         expect(props.field.value).toBe('jared');
         expect(props.field.onChange).toEqual(expect.any(Function));
         expect(props.field.onBlur).toBe(handleBlur);
-        expect(props.form).toEqual(getFormProps());
         if (idx !== 2) {
           expect(props.meta.value).toBe('jared');
           expect(props.meta.error).toBeUndefined();

From fc8be9a501c3ba3746f01619c680ca4affeac3e0 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Fri, 13 Nov 2020 19:29:47 -0500
Subject: [PATCH 40/51] Add spacing to error message

---
 packages/formik/src/ErrorMessage.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/formik/src/ErrorMessage.tsx b/packages/formik/src/ErrorMessage.tsx
index 853eb7bfc..dba6eb9a1 100644
--- a/packages/formik/src/ErrorMessage.tsx
+++ b/packages/formik/src/ErrorMessage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useFieldError, useFieldTouched } from './useField';
 import { isFunction } from './utils';
+
 export interface ErrorMessageProps {
   name: string;
   className?: string;
@@ -8,6 +9,7 @@ export interface ErrorMessageProps {
   children?: (errorMessage: string) => React.ReactNode;
   render?: (errorMessage: string) => React.ReactNode;
 }
+
 export function ErrorMessage({
   component,
   render,

From 1fc2fab62c1ff86beb9536efadb675042d2dd698 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sat, 14 Nov 2020 19:31:49 +0000
Subject: [PATCH 41/51] Version Packages (next)

---
 .changeset/pre.json                 |  3 ++-
 packages/formik-native/CHANGELOG.md |  7 +++++++
 packages/formik-native/package.json |  4 ++--
 packages/formik/CHANGELOG.md        | 20 ++++++++++++++++++++
 packages/formik/package.json        |  2 +-
 5 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index fb93bdf5b..00579d933 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -9,6 +9,7 @@
   "changesets": [
     "gentle-boxes-turn",
     "little-olives-enjoy",
-    "quiet-beans-attack"
+    "quiet-beans-attack",
+    "two-fans-film"
   ]
 }
diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
index 4d26e646b..74bbc13e5 100644
--- a/packages/formik-native/CHANGELOG.md
+++ b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # formik-native
 
+## 2.1.10-next.4
+
+### Patch Changes
+
+- Updated dependencies [[`0ad41eb`](https://github.com/formium/formik/commit/0ad41ebc8ddd8d7fa40dc7364b7cdcfcc4b8c298)]:
+  - formik@3.0.0-next.4
+
 ## 2.1.10-next.3
 
 ### Patch Changes
diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
index ec28a3fe4..447e22ba7 100644
--- a/packages/formik-native/package.json
+++ b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.10-next.3",
+  "version": "2.1.10-next.4",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -31,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "3.0.0-next.3"
+    "formik": "3.0.0-next.4"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
index 1c6cbcc16..7a257be38 100644
--- a/packages/formik/CHANGELOG.md
+++ b/packages/formik/CHANGELOG.md
@@ -1,5 +1,25 @@
 # formik
 
+## 3.0.0-next.4
+
+### Patch Changes
+
+- [`0ad41eb`](https://github.com/formium/formik/commit/0ad41ebc8ddd8d7fa40dc7364b7cdcfcc4b8c298) [#2903](https://github.com/formium/formik/pull/2903) Thanks [@jaredpalmer](https://github.com/jaredpalmer)! - 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>
+  ```
+
 ## 3.0.0-next.3
 
 ### Patch Changes
diff --git a/packages/formik/package.json b/packages/formik/package.json
index 1797b3802..46cf87233 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.4",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",

From 50433fa3cec2cb1ae11176dc713d5f011fcc758d Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Mon, 16 Nov 2020 09:40:53 -0500
Subject: [PATCH 42/51] Implement field.onBlur in useField

---
 .changeset/wicked-goats-burn.md  |  5 ++++
 packages/formik/src/useField.tsx | 51 +++++++++++++++++---------------
 2 files changed, 32 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/wicked-goats-burn.md

diff --git a/.changeset/wicked-goats-burn.md b/.changeset/wicked-goats-burn.md
new file mode 100644
index 000000000..7a330cb38
--- /dev/null
+++ b/.changeset/wicked-goats-burn.md
@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Implement useField field.onBlur to avoid rerendering entire form on blur events
diff --git a/packages/formik/src/useField.tsx b/packages/formik/src/useField.tsx
index c87a8b0d1..b233c467c 100644
--- a/packages/formik/src/useField.tsx
+++ b/packages/formik/src/useField.tsx
@@ -109,16 +109,38 @@ export function useField<FieldValues = any>(
   const meta = useFieldMeta(fieldName);
   const { value: valueState, touched: touchedState } = meta;
   const setFieldValue = useFormikContextSelector(ctx => ctx.setFieldValue);
-  const handleChange = useFormikContextSelector(ctx => ctx.handleChange);
-  const handleBlur = useFormikContextSelector(ctx => ctx.handleBlur);
+  const setFieldTouched = useFormikContextSelector(ctx => ctx.setFieldTouched);
   const getFieldHelpers = useFormikContextSelector(ctx => ctx.getFieldHelpers);
 
   const field: FieldInputProps<any> = {
     name: fieldName,
     value: valueState,
-    // @todo extract into factory methods to use between formik and field
-    onChange: handleChange,
-    onBlur: handleBlur,
+    // We incorporate the fact that we know the `name` prop by scoping `onChange` and `onBlur`.
+    // In addition, to support `parse` fn, we can't just re-use the OG `handleChange` and `handleBlur`, but
+    // instead re-implement it's guts.
+    onChange: (eventOrValue: React.ChangeEvent<any> | any) => {
+      if (isInputEvent(eventOrValue)) {
+        if (eventOrValue.persist) {
+          eventOrValue.persist();
+        }
+        setFieldValue(
+          fieldName,
+          parse(getValueFromEvent(eventOrValue, valueState), fieldName)
+        );
+      } else {
+        setFieldValue(fieldName, parse(eventOrValue, fieldName));
+      }
+    },
+    onBlur: (eventOrValue: React.SyntheticEvent<any> | boolean) => {
+      if (isInputEvent(eventOrValue)) {
+        if (eventOrValue.persist) {
+          eventOrValue.persist();
+        }
+        setFieldTouched(fieldName, true);
+      } else {
+        setFieldValue(fieldName, eventOrValue);
+      }
+    },
   };
 
   const {
@@ -158,25 +180,6 @@ export function useField<FieldValues = any>(
     }
   }
 
-  // We incorporate the fact that we know the `name` prop by scoping `onChange`.
-  // In addition, to support `parse` fn, we can't just re-use the OG `handleChange`, but
-  // instead re-implement it's guts.
-  if (type !== 'radio' && type !== 'checkbox') {
-    field.onChange = (eventOrValue: React.ChangeEvent<any> | any) => {
-      if (isInputEvent(eventOrValue)) {
-        if (eventOrValue.persist) {
-          eventOrValue.persist();
-        }
-        setFieldValue(
-          fieldName,
-          parse(getValueFromEvent(eventOrValue, valueState), fieldName)
-        );
-      } else {
-        setFieldValue(fieldName, parse(eventOrValue, fieldName));
-      }
-    };
-  }
-
   return [field, meta, getFieldHelpers(fieldName)];
 }
 

From 9719fe719387746724cacae2c3d0655576385e48 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 16 Nov 2020 14:47:06 +0000
Subject: [PATCH 43/51] Version Packages (next)

---
 .changeset/pre.json                 | 3 ++-
 packages/formik-native/CHANGELOG.md | 7 +++++++
 packages/formik-native/package.json | 4 ++--
 packages/formik/CHANGELOG.md        | 6 ++++++
 packages/formik/package.json        | 2 +-
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 00579d933..64ddf687a 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -10,6 +10,7 @@
     "gentle-boxes-turn",
     "little-olives-enjoy",
     "quiet-beans-attack",
-    "two-fans-film"
+    "two-fans-film",
+    "wicked-goats-burn"
   ]
 }
diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
index 74bbc13e5..6368e0d6b 100644
--- a/packages/formik-native/CHANGELOG.md
+++ b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # formik-native
 
+## 2.1.10-next.5
+
+### Patch Changes
+
+- Updated dependencies [[`50433fa`](https://github.com/formium/formik/commit/50433fa3cec2cb1ae11176dc713d5f011fcc758d)]:
+  - formik@3.0.0-next.5
+
 ## 2.1.10-next.4
 
 ### Patch Changes
diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
index 447e22ba7..fb447b7de 100644
--- a/packages/formik-native/package.json
+++ b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.10-next.4",
+  "version": "2.1.10-next.5",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -31,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "3.0.0-next.4"
+    "formik": "3.0.0-next.5"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
index 7a257be38..c901253e2 100644
--- a/packages/formik/CHANGELOG.md
+++ b/packages/formik/CHANGELOG.md
@@ -1,5 +1,11 @@
 # formik
 
+## 3.0.0-next.5
+
+### Patch Changes
+
+- [`50433fa`](https://github.com/formium/formik/commit/50433fa3cec2cb1ae11176dc713d5f011fcc758d) [#2846](https://github.com/formium/formik/pull/2846) Thanks [@jaredpalmer](https://github.com/jaredpalmer)! - Implement useField field.onBlur to avoid rerendering entire form on blur events
+
 ## 3.0.0-next.4
 
 ### Patch Changes
diff --git a/packages/formik/package.json b/packages/formik/package.json
index 46cf87233..f1503076f 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "3.0.0-next.4",
+  "version": "3.0.0-next.5",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",

From 4e515a4ab336863db69d81611275231e9301b7df Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Mon, 16 Nov 2020 10:40:49 -0500
Subject: [PATCH 44/51] Fix useFieldTouched selector

---
 .changeset/honest-radios-poke.md | 5 +++++
 packages/formik/src/useField.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/honest-radios-poke.md

diff --git a/.changeset/honest-radios-poke.md b/.changeset/honest-radios-poke.md
new file mode 100644
index 000000000..2c6e262db
--- /dev/null
+++ b/.changeset/honest-radios-poke.md
@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Fix useFieldTouched selector
diff --git a/packages/formik/src/useField.tsx b/packages/formik/src/useField.tsx
index b233c467c..847f577cc 100644
--- a/packages/formik/src/useField.tsx
+++ b/packages/formik/src/useField.tsx
@@ -246,7 +246,7 @@ export function useFieldTouched<Values>(
   name: string
 ): [boolean, (error: any) => void] {
   const state = useFormikContextSelector<Values, boolean>(ctx =>
-    Boolean(getIn(ctx.errors, name))
+    Boolean(getIn(ctx.touched, name))
   );
 
   const set = useFormikContextSelector<

From c001d6e76ef9cfd30fce280e98a4bf8ac7863d3d Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 16 Nov 2020 15:43:35 +0000
Subject: [PATCH 45/51] Version Packages (next)

---
 .changeset/pre.json                 | 1 +
 packages/formik-native/CHANGELOG.md | 7 +++++++
 packages/formik-native/package.json | 4 ++--
 packages/formik/CHANGELOG.md        | 6 ++++++
 packages/formik/package.json        | 2 +-
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 64ddf687a..0bf40aa2a 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -8,6 +8,7 @@
   },
   "changesets": [
     "gentle-boxes-turn",
+    "honest-radios-poke",
     "little-olives-enjoy",
     "quiet-beans-attack",
     "two-fans-film",
diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
index 6368e0d6b..1bc0ff7de 100644
--- a/packages/formik-native/CHANGELOG.md
+++ b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # formik-native
 
+## 2.1.10-next.6
+
+### Patch Changes
+
+- Updated dependencies [[`4e515a4`](https://github.com/formium/formik/commit/4e515a4ab336863db69d81611275231e9301b7df)]:
+  - formik@3.0.0-next.6
+
 ## 2.1.10-next.5
 
 ### Patch Changes
diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
index fb447b7de..8430291c5 100644
--- a/packages/formik-native/package.json
+++ b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.10-next.5",
+  "version": "2.1.10-next.6",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -31,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "3.0.0-next.5"
+    "formik": "3.0.0-next.6"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
index c901253e2..34a2d7301 100644
--- a/packages/formik/CHANGELOG.md
+++ b/packages/formik/CHANGELOG.md
@@ -1,5 +1,11 @@
 # formik
 
+## 3.0.0-next.6
+
+### Patch Changes
+
+- [`4e515a4`](https://github.com/formium/formik/commit/4e515a4ab336863db69d81611275231e9301b7df) [#2846](https://github.com/formium/formik/pull/2846) Thanks [@jaredpalmer](https://github.com/jaredpalmer)! - Fix useFieldTouched selector
+
 ## 3.0.0-next.5
 
 ### Patch Changes
diff --git a/packages/formik/package.json b/packages/formik/package.json
index f1503076f..0133b6803 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "3.0.0-next.5",
+  "version": "3.0.0-next.6",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",

From 90fd693b0900e1b82ff56b39bd1a020327c0bcb6 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Thu, 19 Nov 2020 11:28:03 -0500
Subject: [PATCH 46/51] Add missing hooks

---
 .changeset/lazy-olives-agree.md               |   5 +
 packages/formik/src/ErrorMessage.tsx          |   2 +-
 packages/formik/src/FastField.tsx             |   2 +-
 packages/formik/src/Field.tsx                 |   2 +-
 .../formik/src/{useField.tsx => hooks.tsx}    | 129 +++++++++++++++++-
 packages/formik/src/index.tsx                 |   2 +-
 6 files changed, 137 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/lazy-olives-agree.md
 rename packages/formik/src/{useField.tsx => hooks.tsx} (79%)

diff --git a/.changeset/lazy-olives-agree.md b/.changeset/lazy-olives-agree.md
new file mode 100644
index 000000000..a0601cd8b
--- /dev/null
+++ b/.changeset/lazy-olives-agree.md
@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Add hooks `useSetValue`, `useSetErrors`, `useSetTouched`, `useSetStatus`, `useSubmitForm`, `useResetForm`, `useIsSubmitting`, `useIsValid`, `useIsDirty`, `useValidateForm`, `useValidateField`
diff --git a/packages/formik/src/ErrorMessage.tsx b/packages/formik/src/ErrorMessage.tsx
index dba6eb9a1..d23dc6770 100644
--- a/packages/formik/src/ErrorMessage.tsx
+++ b/packages/formik/src/ErrorMessage.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFieldError, useFieldTouched } from './useField';
+import { useFieldError, useFieldTouched } from './hooks';
 import { isFunction } from './utils';
 
 export interface ErrorMessageProps {
diff --git a/packages/formik/src/FastField.tsx b/packages/formik/src/FastField.tsx
index 58f311e60..1e60315ba 100644
--- a/packages/formik/src/FastField.tsx
+++ b/packages/formik/src/FastField.tsx
@@ -6,7 +6,7 @@ import {
   GenericFieldHTMLAttributes,
   SharedFieldProps,
 } from './types';
-import { useField, UseFieldProps } from './useField';
+import { useField, UseFieldProps } from './hooks';
 import { isEmptyChildren, isFunction } from './utils';
 
 export type FastFieldProps<FieldValue = any> = {
diff --git a/packages/formik/src/Field.tsx b/packages/formik/src/Field.tsx
index 3c9e4a5fb..586f55a4b 100644
--- a/packages/formik/src/Field.tsx
+++ b/packages/formik/src/Field.tsx
@@ -8,7 +8,7 @@ import {
   GenericFieldHTMLAttributes,
   SharedFieldProps,
 } from './types';
-import { useField, UseFieldProps } from './useField';
+import { useField, UseFieldProps } from './hooks';
 import { isEmptyChildren, isFunction } from './utils';
 
 export interface FieldProps<V = any, FormValues = any> {
diff --git a/packages/formik/src/useField.tsx b/packages/formik/src/hooks.tsx
similarity index 79%
rename from packages/formik/src/useField.tsx
rename to packages/formik/src/hooks.tsx
index 847f577cc..f201d1801 100644
--- a/packages/formik/src/useField.tsx
+++ b/packages/formik/src/hooks.tsx
@@ -390,7 +390,43 @@ export function useTouched<Values>() {
 }
 
 /**
- * Returns Formik status and updater function
+ * Returns Formik touched updater function
+ * @public
+ */
+export function useSetTouched<Values>() {
+  const update = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setTouched']
+  >(ctx => ctx.setTouched);
+  return update;
+}
+
+/**
+ * Returns Formik values updater function
+ * @public
+ */
+export function useSetValues<Values>() {
+  const update = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setValues']
+  >(ctx => ctx.setValues);
+  return update;
+}
+
+/**
+ * Returns Formik errors updater function
+ * @public
+ */
+export function useSetErrors<Values>() {
+  const update = useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setErrors']
+  >(ctx => ctx.setErrors);
+  return update;
+}
+
+/**
+ * Returns Formik status state and updater function
  * @public
  */
 export function useStatus<T>() {
@@ -405,6 +441,97 @@ export function useStatus<T>() {
   return [state, update];
 }
 
+/**
+ * Returns Formik status updater function
+ * @public
+ */
+export function useSetStatus() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['setStatus']
+  >(ctx => ctx.setStatus);
+}
+
+/**
+ * Returns a function to imperatively submit the form
+ * @public
+ */
+export function useSubmitForm() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['submitForm']
+  >(ctx => ctx.submitForm);
+}
+
+/**
+ * Returns whether the form submission is currently being attempted
+ * @public
+ */
+export function useIsSubmitting() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['isSubmitting']
+  >(ctx => ctx.isSubmitting);
+}
+
+/**
+ * Returns function to reset the form
+ * @public
+ */
+export function useResetForm() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['resetForm']
+  >(ctx => ctx.resetForm);
+}
+
+/**
+ *
+ * Returns whether the form submission is currently being attempted
+ * @public
+ */
+export function useIsValid() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['isValid']
+  >(ctx => ctx.isValid);
+}
+
+/**
+ * Returns whether the form is dirty
+ * @public
+ */
+export function useIsDirty() {
+  return useFormikContextSelector<unknown, FormikContextType<unknown>['dirty']>(
+    ctx => ctx.dirty
+  );
+}
+
+/**
+ * Returns a function to imperatively validate the entire form
+ * @public
+ */
+export function useValidateForm() {
+  return useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['validateForm']
+  >(ctx => ctx.validateForm);
+}
+
+/**
+ * Returns a function to imperatively validate a field
+ * @public
+ */
+export function useValidateField(fieldName?: string) {
+  const validateField = useFormikContextSelector<
+    unknown,
+    FormikContextType<unknown>['validateField']
+  >(ctx => ctx.validateField);
+  return React.useCallback(() => {
+    return fieldName ? validateField(fieldName) : validateField;
+  }, [fieldName]);
+}
+
 function useFieldMeta<Values>(name: string) {
   const [value] = useFieldValue<Values>(name);
   const [touched] = useFieldTouched<Values>(name);
diff --git a/packages/formik/src/index.tsx b/packages/formik/src/index.tsx
index 5d9924baa..701f13cc8 100644
--- a/packages/formik/src/index.tsx
+++ b/packages/formik/src/index.tsx
@@ -9,4 +9,4 @@ export * from './connect';
 export * from './ErrorMessage';
 export * from './FormikContext';
 export * from './FastField';
-export * from './useField';
+export * from './hooks';

From 679800bbc7af05dfcc1b925ccdc64e8ffe07d796 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 19 Nov 2020 16:35:20 +0000
Subject: [PATCH 47/51] Version Packages (next)

---
 .changeset/pre.json                 | 1 +
 packages/formik-native/CHANGELOG.md | 7 +++++++
 packages/formik-native/package.json | 4 ++--
 packages/formik/CHANGELOG.md        | 6 ++++++
 packages/formik/package.json        | 6 ++----
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 0bf40aa2a..e302dab1a 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -9,6 +9,7 @@
   "changesets": [
     "gentle-boxes-turn",
     "honest-radios-poke",
+    "lazy-olives-agree",
     "little-olives-enjoy",
     "quiet-beans-attack",
     "two-fans-film",
diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
index 7c3810cde..bd0ee4b32 100644
--- a/packages/formik-native/CHANGELOG.md
+++ b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # formik-native
 
+## 2.1.10-next.7
+
+### Patch Changes
+
+- Updated dependencies [[`90fd693`](https://github.com/formium/formik/commit/90fd693b0900e1b82ff56b39bd1a020327c0bcb6)]:
+  - formik@3.0.0-next.7
+
 ## 2.1.10-next.6
 
 ### Patch Changes
diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
index 8430291c5..f0fd88443 100644
--- a/packages/formik-native/package.json
+++ b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.10-next.6",
+  "version": "2.1.10-next.7",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -31,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "3.0.0-next.6"
+    "formik": "3.0.0-next.7"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
index 16d340122..65194c21b 100644
--- a/packages/formik/CHANGELOG.md
+++ b/packages/formik/CHANGELOG.md
@@ -1,5 +1,11 @@
 # formik
 
+## 3.0.0-next.7
+
+### Patch Changes
+
+- [`90fd693`](https://github.com/formium/formik/commit/90fd693b0900e1b82ff56b39bd1a020327c0bcb6) [#2921](https://github.com/formium/formik/pull/2921) Thanks [@jaredpalmer](https://github.com/jaredpalmer)! - Add hooks `useSetValue`, `useSetErrors`, `useSetTouched`, `useSetStatus`, `useSubmitForm`, `useResetForm`, `useIsSubmitting`, `useIsValid`, `useIsDirty`, `useValidateForm`, `useValidateField`
+
 ## 3.0.0-next.6
 
 ### Patch Changes
diff --git a/packages/formik/package.json b/packages/formik/package.json
index cb68bb5c0..211a78ff8 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "3.0.0-next.6",
+  "version": "3.0.0-next.7",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -20,9 +20,7 @@
   "umd:main": "dist/formik.umd.production.js",
   "module": "dist/formik.esm.js",
   "typings": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "peerDependencies": {
     "react": ">=16.8.0"
   },

From ce10b830ba6d6c034f821d32a2208587a6a3cc76 Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Thu, 19 Nov 2020 12:05:10 -0500
Subject: [PATCH 48/51] Update migration guide

---
 MIGRATING-v3.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/MIGRATING-v3.md b/MIGRATING-v3.md
index c588810ad..a2fec10a9 100644
--- a/MIGRATING-v3.md
+++ b/MIGRATING-v3.md
@@ -24,9 +24,20 @@
   - `useFieldValue`
   - `useFieldError`
   - `useValues`
+  - `useSetValue`
+  - `useSetErrors`
   - `useErrors`
   - `useTouched`
+  - `useSetTouched`
   - `useStatus`
+  - `useSetStatus`
+  - `useSubmitForm`
+  - `useResetForm`
+  - `useIsSubmitting`
+  - `useIsValid`
+  - `useIsDirty`
+  - `useValidateForm`
+  - `useValidateField`
 
 ## Performance Suggestions
 

From 577688e86d61c0e4e84f7539bc5c0d6cf2a780d7 Mon Sep 17 00:00:00 2001
From: Sergey Vysotskiy <sa.vysotskiy@gmail.com>
Date: Tue, 1 Dec 2020 19:39:37 +0300
Subject: [PATCH 49/51] add useSetFieldValue and useSetFieldTouched hooks

---
 packages/formik/src/hooks.tsx | 40 ++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/formik/src/hooks.tsx b/packages/formik/src/hooks.tsx
index f201d1801..0046fbb3a 100644
--- a/packages/formik/src/hooks.tsx
+++ b/packages/formik/src/hooks.tsx
@@ -64,6 +64,32 @@ export type UseFieldProps<V = any> = {
   value?: any;
 };
 
+/**
+ * Returns Formik field value updater function
+ * @public
+ */
+export function useSetFieldValue<
+  Values
+>(): FormikContextType<Values>['setFieldValue'] {
+  return useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setFieldValue']
+  >(ctx => ctx.setFieldValue);
+}
+
+/**
+ * Returns Formik field touched updater function
+ * @public
+ */
+export function useSetFieldTouched<
+  Values
+>(): FormikContextType<Values>['setFieldTouched'] {
+  return useFormikContextSelector<
+    Values,
+    FormikContextType<Values>['setFieldTouched']
+  >(ctx => ctx.setFieldTouched);
+}
+
 export function useField<FieldValues = any>(
   nameOrOptions: string | UseFieldProps<FieldValues>
 ): [
@@ -108,8 +134,8 @@ export function useField<FieldValues = any>(
 
   const meta = useFieldMeta(fieldName);
   const { value: valueState, touched: touchedState } = meta;
-  const setFieldValue = useFormikContextSelector(ctx => ctx.setFieldValue);
-  const setFieldTouched = useFormikContextSelector(ctx => ctx.setFieldTouched);
+  const setFieldValue = useSetFieldValue();
+  const setFieldTouched = useSetFieldTouched();
   const getFieldHelpers = useFormikContextSelector(ctx => ctx.getFieldHelpers);
 
   const field: FieldInputProps<any> = {
@@ -195,10 +221,7 @@ export function useFieldValue<Values>(
     getIn(ctx.values, name)
   );
 
-  const set = useFormikContextSelector<
-    Values,
-    FormikContextType<Values>['setFieldValue']
-  >(ctx => ctx.setFieldValue);
+  const set = useSetFieldValue<Values>();
 
   const setState = React.useCallback(
     (value: any, shouldValidate?: boolean) => {
@@ -249,10 +272,7 @@ export function useFieldTouched<Values>(
     Boolean(getIn(ctx.touched, name))
   );
 
-  const set = useFormikContextSelector<
-    Values,
-    FormikContextType<Values>['setFieldTouched']
-  >(ctx => ctx.setFieldTouched);
+  const set = useSetFieldTouched<Values>();
 
   const setState = React.useCallback(
     (isTouched?: boolean, shouldValidate?: boolean) => {

From 0e57c8d12d5610caf07e4ab8963568d530c2c816 Mon Sep 17 00:00:00 2001
From: Sergey Vysotskiy <sa.vysotskiy@gmail.com>
Date: Wed, 2 Dec 2020 17:01:13 +0300
Subject: [PATCH 50/51] add changeset

---
 .changeset/afraid-buses-kiss.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/afraid-buses-kiss.md

diff --git a/.changeset/afraid-buses-kiss.md b/.changeset/afraid-buses-kiss.md
new file mode 100644
index 000000000..3e07d93d9
--- /dev/null
+++ b/.changeset/afraid-buses-kiss.md
@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Add `useSetFieldValue` and `useSetFieldTouched` hooks

From aa0b9fe6f5e8c201a45ec07da601ed675be4e19a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 2 Dec 2020 16:23:47 +0000
Subject: [PATCH 51/51] Version Packages (next)

---
 .changeset/pre.json                 | 1 +
 packages/formik-native/CHANGELOG.md | 7 +++++++
 packages/formik-native/package.json | 4 ++--
 packages/formik/CHANGELOG.md        | 6 ++++++
 packages/formik/package.json        | 2 +-
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index e302dab1a..68a49c063 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -7,6 +7,7 @@
     "@formik/codemod": "3.0.0-next.2"
   },
   "changesets": [
+    "afraid-buses-kiss",
     "gentle-boxes-turn",
     "honest-radios-poke",
     "lazy-olives-agree",
diff --git a/packages/formik-native/CHANGELOG.md b/packages/formik-native/CHANGELOG.md
index bd0ee4b32..f319e84fc 100644
--- a/packages/formik-native/CHANGELOG.md
+++ b/packages/formik-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # formik-native
 
+## 2.1.10-next.8
+
+### Patch Changes
+
+- Updated dependencies [[`0e57c8d`](https://github.com/formium/formik/commit/0e57c8d12d5610caf07e4ab8963568d530c2c816)]:
+  - formik@3.0.0-next.8
+
 ## 2.1.10-next.7
 
 ### Patch Changes
diff --git a/packages/formik-native/package.json b/packages/formik-native/package.json
index f0fd88443..7a0da58a3 100644
--- a/packages/formik-native/package.json
+++ b/packages/formik-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.10-next.7",
+  "version": "2.1.10-next.8",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",
@@ -31,7 +31,7 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "3.0.0-next.7"
+    "formik": "3.0.0-next.8"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
diff --git a/packages/formik/CHANGELOG.md b/packages/formik/CHANGELOG.md
index 65194c21b..4284daba2 100644
--- a/packages/formik/CHANGELOG.md
+++ b/packages/formik/CHANGELOG.md
@@ -1,5 +1,11 @@
 # formik
 
+## 3.0.0-next.8
+
+### Patch Changes
+
+- [`0e57c8d`](https://github.com/formium/formik/commit/0e57c8d12d5610caf07e4ab8963568d530c2c816) [#2939](https://github.com/formium/formik/pull/2939) Thanks [@seropaski](https://github.com/seropaski)! - Add `useSetFieldValue` and `useSetFieldTouched` hooks
+
 ## 3.0.0-next.7
 
 ### Patch Changes
diff --git a/packages/formik/package.json b/packages/formik/package.json
index 211a78ff8..8f5c3a8e7 100644
--- a/packages/formik/package.json
+++ b/packages/formik/package.json
@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "3.0.0-next.7",
+  "version": "3.0.0-next.8",
   "license": "Apache-2.0",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "formium/formik",