Bad Performance on Large Forms (FastField Rerendering when it Shouldn't Be)

[FilmCoder]

🐛 Bug report

Current Behavior

Fastfields are rerending even when changes to formik.value don't have to do with those FastFields.

Expected behavior

A FastField should only rerender if a piece of formik state changes that is directly relevant to that FastField.

Reproducible example

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

Run the example in Chrome with React Devtools v3 (which supports highlighting components on rerenders).

Instructions for installing react devtools v3:
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

Also, you'll need to run it outside of the Sandbox UI for React Devtools to hook up to the sandbox app properly: https://q4l33.csb.app/

Make sure to turn on "Highlight Update" in React Devtools.

TO REPRODUCE: Type in the top input (normal Field). You'll see the bottom input (FastField) rerender whenever new letters are typed into the normal Field.

@jaredpalmer

Suggested solution(s)

I rolled an HOC that passes the onChange handler of inputs through a lodash debounce function. Otherwise, my form is too slow and large lag is introduced. My form has about 15 inputs, some of them with checkboxes and radio buttons.

Additional context

Your environment

Software	Version(s)
Formik	2.1.4
React	16.8
TypeScript
Browser	Chrome 80.0.3987.122 (Official Build) (64-bit)
npm/Yarn
Operating System	Windows 64 bit

[FilmCoder]

I think React 16.8 is treating shouldComponentUpdate as a suggestion, ignoring it, and rerending the FastField anyways?

[FilmCoder]

Actually I'm wondering if centralizing all form values into a single object is fundamentally antithesis to having components act alone in isolation? I tested React Redux Form, it doesn't have this issue and is much more performant than Formik currently is.

[FilmCoder]

I've found React Hook Form to be much more performant than Formik for large forms, because of how aggressively in embraces uncontrolled inputs. If you're creating a large form with over 15 fields and it needs to perform without lag on mobile, I'd recommend React Hook Form over Formik. If you're making smaller forms for desktop users, Formik is fine.

[FilmCoder]

In conclusion, the way Formik stores form values directly in the form context and uses controlled inputs is fundamentally non performant. This may not be a bug per say, but a design flaw. Or perhaps it's not a design flaw, but regardless it will cause large forms to behave poorly due to forced rerenders from context changes, something React Hook Form avoids by using uncontrolled inputs. Furthermore, it is possible to partially optimize and still use Formik with React.useMemo, but it's still nowhere near as performant as embracing uncontrolled inputs.

[totaland]

@FilmCoder I agree on your input. Formik will have bad performance on large form. However, you can overcome this challenge with React-window. Well with large form, you normally will only see part of the form at one time until you scroll down. So what is the point of rendering all of them? Hence, it will reduce performance. If you implement react-window, you will get back all of that performance you have lost. Happy coding. FYI, I implement 1000 checkboxes with Formik no performance issue. Heck, you can implement 1mil without issue. @jaredpalmer
I completely agree with all your points above, as I myself have to research to overcome the same issue as you are.

[teiger313]

Don't know about mobile much, I'm a web developer and to have more than 15 fields is in my understanding poor UX.

[solarstar101]

so is the bests solution to just abandon formik?

every single post has this exact same issue everyone says to abandon it and we were JUST considering switching over to it. tried doing 1 form and having this exact same issue its a form rendering only 5 fields 5 FIELDS how is it this slow

[johnrom]

@solarstar101 this is still my preferred Controlled Form library and I have a release candidate with fixes for most of the performance issues.

https://www.npmjs.com/package/@johnrom/formik-v3/v/3.0.0-rc1

(aside from issues many users have with their own key and mishandling of React, which can also cause issues)

There are plenty of other form libraries that do other things, including uncontrolled forms (react-hook-form) or global forms (redux-form), but this is the only one I know of with this particular style of Context-based API which I prefer. I may officially fork it off of the latest MIT version if this project doesn't pick back up by the time I need to take my changes to production. I'm currently in the process of rewriting the docs for the v3 API which has some breaking changes.

If you try and find any issues with the above RC, you can note them here: #3231