jaredpalmer / formik

Build forms in React, without the tears 😭
https://formik.org
Apache License 2.0
33.98k stars 2.79k forks source link

Field and FastField cause the entire form to re-render on blur #2504

Open rexthefex opened 4 years ago

rexthefex commented 4 years ago

🐛 Bug report

Current Behavior

When blurring a Field or FastField the entire form re-renders, even if there are no changes. Custom fields with useField and value/setValue don't exhibit this problem.

why-did-you-render says that it is caused by: "Re-rendered because of hook changes:" [hook useContext result] different objects that are equal by value. (Formik context here)

Expected behavior

Form not re-rendering on every Field blur.

Reproducible example

https://codesandbox.io/s/formik-codesandbox-template-w6yoi

Suggested solution(s)

Additional context

Your environment

Software Version(s)
Formik 2.14
React 16.13
TypeScript -
Browser Chrome 83
npm/Yarn 6.9.0
Operating System Windows 10
hrgui commented 4 years ago

This is because FastField and Field has a onBlur passed in by default.

We can get the same behavior for useField if we pass in onBlur as field.onBlur.

This can be seen here: https://codesandbox.io/s/formik-codesandbox-template-z2ww3. Notice the touched property and compare with the example.