5

I am using react formik the form have more 30 input field that field render are slow when typing print slow and easer Slightly slow any idea for improve the field speed. please check in codesandbox

code Sandbox Link :https://codesandbox.io/s/goofy-bassi-5s0c9?file=/src/App.js

Gokul
  • 187
  • 3
  • 11

3 Answers3

8

I have the same issue. But it will disappear when you build and deploy to server

Viet
  • 12,133
  • 2
  • 15
  • 21
7

Another workaround is to set validateOnChange to false on the <Formik> tag.

<Formik
  validateOnChange={false} // Add this line
  initialValues={{ ... }}
  validationSchema={validationSchema}
>

Some references: https://github.com/jaredpalmer/formik/issues/2296 https://github.com/jaredpalmer/formik/issues/2542

Tittoh
  • 416
  • 7
  • 15
AbdQaadir
  • 81
  • 1
  • 2
0

the main issue with formik creating lots of renders is how it calculates the state of the form when validating. the issue is when a user types a "character", 3 renders happen:

  1. form values change
  2. state is changed to "isValidating:true"
  3. state is changed to "isValidating:false"

these renders are causing terrifying issues with performance on large forms especially when a user types a lot of characters.

I've made a gist with a way to debounce the validation. what does this mean? let's look at an example of typing "abcd" regular form

1. type "a" - 3 renders
2. type "b" - 3 renders
3. type "c" - 3 renders
4. type "d" - 3 renders
total of 12 renders

with debounce validation

1. type "a" - 1 render
2. type "b" - 1 render
3. type "c" - 1 render
5. type "d" - 1 render
6. after 200ms 2 more renders for the validation part
total of 6 renders

let's say a typical input (eg. mail) will have 20 charachters. you can save about (60 vs 22) about 40 or third of the renders.

so in terms of UX. it's the best experience, as the user can type freely. and after 200ms from the "last" keystroke, it will validate the form.

https://gist.github.com/AlonMiz/e583946d3978de691ed53cece972e1a1

AlonMiz
  • 1