Formik: FastField re-renders when other fields are changing

Created on 16 Nov 2019  路  3Comments  路  Source: formium/formik

馃悰 Bug report

Current Behavior

FastField in 2.0.4 re-renders when other fields update.

Expected behavior

FastField only re-renders when it's own field updates.

Reproducible example

https://codesandbox.io/s/formik-example-3tzwl

In this condesandbox you can see the effect. When changing the first input field, the second field (which is a FastField) renders as well (Every render logs a message to console, and the console's badge count increments). When you change the Formik version to 1.5.8 the FastField does not render, when changing the first field, as expected.

Additional context

Is this a bug? Am I missing something here? I checked the Formik 2 Migration Guide but nothing is mentioned that the FastField behaviour changed.

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.0.4
| React | 16.11.0
| TypeScript |
| Browser | Chrome
| npm/Yarn |
| Operating System |

FastField

Most helpful comment

Fixed in 2.1

All 3 comments

The issue can be reproduced in formik's storybook. All three example FastField components render when the form's values are changing. I tried to debug the FastField class. What I learned is that shouldComponentUpdate is never called before rendering. Anyone an idea how this can be?

Running into this issue as well on Formik 2.0.6

Repo: https://codesandbox.io/s/formik-example-mtw4r (just click on one of the fields, and click out)

Couple of observations:

  1. shouldComponentUpdate never gets called at all. I tried putting breakpoints in every single line, it never gets invoked. I believe this may be caused by https://github.com/jaredpalmer/formik/pull/1916.

@rumtraubenuss is correct that version 1.5.8 does not have the issue. It can be seen in the following codesandbox:

https://codesandbox.io/s/formik-example-2pppc


  1. All fields get rendered twice due to Form validations due to https://github.com/jaredpalmer/formik/blame/master/src/Formik.tsx#L321-L332 (first call due to react, 2nd call due to unstable_runWithPriority.)

This can be solved by doing:

<Formik
      validateOnBlur={false}
      validateOnChange={false}
      validateOnTouched={false}

^ https://codesandbox.io/s/formik-example-gzlu1 <- compare this with the repo

Fixed in 2.1

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jaredpalmer picture jaredpalmer  路  3Comments

jaredpalmer picture jaredpalmer  路  3Comments

sibelius picture sibelius  路  3Comments

jeffbski picture jeffbski  路  3Comments

green-pickle picture green-pickle  路  3Comments