Render optimization

packages/formik/package.json

@@ -42,7 +42,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",

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,

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 ||

yarn.lock

@@ -12770,6 +12770,11 @@ 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@^3.1.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"