Formik: FastField does not avoid re-render on react 16.8

[karianpour]

🐛 Bug report

Current Behavior

Using FastField does not avoid re-render on react 16.8, while editing other fields.

Expected behavior

It should avoid it as it was doing on react 16.2

Reproducible example

SandCodebox which produces re-renders
SandCodebox which works fine
To check the update you have to open the rendered page on a new window. The only deference is package versions.

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 1.5.7
| React | 16.8.6
| TypeScript | 3.4.5
| Browser | Chrome 72
| npm/Yarn | npm 6.9
| Operating System | Ubuntu 16.04

[bologer]

Are there any news on this?

[shulcsm]

I seem to have same issue on v2 rc

[mohsinulhaq]

@jaredpalmer Any update on this issue? FastField was one of a star feature for me to use Formik but looks like it hasn't been working for a long time now.

[mihdan]

@jaredpalmer, are there any news on this?

[mohsinulhaq]

@karianpour by the way issue doesn't seem to be with a specific React version, but the Formik version. In your 16.2 example, you install 16.8 anyway because of the ^. But the Formik version in that case is 1.1.2, compared to 1.5.7 in the buggy case.

[oliverkuldmae]

Can confirm, tested different versions and the last properly working one was 1.1.2. Large forms are strongly impacted by this.

[karianpour]

The commit which made the problem is here.

[karianpour]

I tried to debug the project, I cloned the project, then I ran npm i, but after installation it tried to run automatically and it failed. Is there any documentation how to contribute on the project?

[hourliert]

(React: 16.8.6)

I have the same issue here with 1.5.8. I downgraded to 1.1.2 and FastField worked as expected (avoid the re-render of the full form).

Is there a workaround available? I have a form with 30+ fields that is really slow because of the full render of the form on every keystroke. This is really blocking.

Thanks in advance 🙏

EDIT: I ended doing what was suggested on another issue: For each input, add a local state that get updated on change, only on blur, update formik field. It is fine in my case, _for now_, but still very annoying formik doesn't provide a fix by default.

[mohsinulhaq]

There are couple of other serious issues in Formik that I had no response from the author about 😢. I therefore went with react-final-form, the author there is quite responsive.