-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
FieldArray slow on large data #2296
Comments
@jaredpalmer any suggestions mate? |
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. |
is this fixed? |
No, it is the same, just use the workaround above |
can you show us the workaround code @totaland ? thanks |
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. |
In my case, this workaround isn't particularly useful. |
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!!! |
Any updates on his one? I am facing the same lag issue with multiple form fields inside the field array component. |
Hey all, I'm following the progress of this on #1895 , which seems to be a similar issue |
Encountered the same issue while dealing with form with large number of form fields. I solved it with this workaround. const FastTextField: FC<IProps> = ({ name, handleChange, value }) => {
const [localValue, setLocalValue] = useState("");
useEffect(() => {
value && setLocalValue(value);
}, [value]);
const debouncedValue = useDebounce(localValue, 200);
useEffect(() => {
handleChange(localValue);
}, [debouncedValue]);
return (
<TextField
name={name}
value={localValue}
onChange={(e: any) => setLocalValue(e.target.value)}
type="text"
/>
); And use this fast field something like this <FieldArray name="person">
{({ push, remove }) =>
formik.values.person.map((item, idx) => {
const errors = formik.errors.person[idx];
const touched = formik.touched.person[idx];
return (
<div key={["person", idx].join("_")}>
<FastTextField
name={`person[${idx}]`}
error={touched && errors}
value={item}
handleChange={(value) => formik.setFieldValue( `person[${idx}]`,value )}
/>
</div>
)
})
}
</FieldArray> |
Only add validateOnChange={false} to Formik tag |
Thanks remoideas, it setting validateOnChange=false did the trick for me |
Replace the standard formik |
First it takes 16 second for rendering but now it just takes the 8 second for a rendering thank you for this awsome solution 😇😇 |
These steps give me almost zero lagging time. |
❓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
The text was updated successfully, but these errors were encountered: