Formik: FieldArray slow on large data

[totaland]

❓Question

I have a form that renders 1000 checkboxes. I use FieldArray to do it however the form getting a very slow response after clicking on the checkbox. What can I do to improve the performance and make it smoother and not feel cranky? Many thanks

[totaland]

@jaredpalmer any suggestions mate?

[totaland]

Hey, I find out how to do that. @jaredpalmer it will reduce the lag of the form even if you use 1mil checkboxes. Inside the FieldArray you implement the react-window. You can either use a react-window or build one yourself.

[sibelius]

is this fixed?

[totaland]

No, it is the same, just use the workaround above

[alexandreh92]

can you show us the workaround code @totaland ? thanks

[totaland]

In your form you render the FieldArray item:

{<FieldArray name={'searchResult'} render={ListResult} />}

Then you have this ListResult like this:

import {FixedSizeList as List} from 'react-window';
const ListResult = () => {
    return (
      <List
        height={300}
        itemCount={length} // this can be any number of items 1mil maybe
        itemSize={30}
        width={'100%'}
      >
        {Row}
      </List>
    );
  };

const Row = React.memo(() => {return <YourActualComponent />}

From memory, you can't replace Row with React component, it only works with a function expression or arrow function, as Row like above code.

[hstevanoski]

In my case, this workaround isn't particularly useful.
Although the data is a simple array of objects, beside checkboxes, I render input fields, dropdowns etc, which means rerendering on every keystroke is expensive and I notice significant lag for ~20 components (which is even worse on an older PC, obviously).
It sucks because some libraries (like prime-react) just won't work in an uncontrolled manner, which means you are pretty much stuck with (a library such as) Formik.
Using FastField doesn't make much of a difference either.
The only thing that helps reduce the lag is disabling validation on blur and on change (inside <Formik>), but that's not an optimal solution.
Please fix this as soon as possible! Thanks!

[totaland]

My form has all of the above that you mentioned too. Do you have a codesandbox? I can have a look if I can make it better.

[hstevanoski]

My form has all of the above that you mentioned too. Do you have a codesandbox? I can have a look if I can make it better.

Thank you very much!!!
Unfortunately, since it's not a private project, I can't share the code. All I can say is that it's a somewhat complicated form.