I have a form using Formik. Inside this form, there are multiple input fields, checkboxes, and similar components. I am passing Formik as props to each component like this:
<DescriptionField formik={formik} />
These components contain custom Material-UI input components.
In the onChange event, I am using setFieldValue like this:
export const DescriptionField = ({
formik,
...rest
}: FormComponentProps<T>) => (
<Field name="description">
{({ form: { setFieldValue }}: FieldProps) => (
<CustomInput
value={formik.values.description}
label="Description"
setField={(description) => {
setFieldValue('description', description);
}}
{...rest}
/>
)}
</Field>
);
export const CustomInput = ({
setField,
values
label
...rest
}: FormComponentProps<T>) => (
<TextField
onChange={(e: any) => {
setField({ ...values, [selectedOption]: e.target.value });
}}
value={values && values[selectedOption] ? values[selectedOption] : ''}
....
</TextField>
);
When typing in these components, there is a slight delay of 1-2 seconds before the input is filled.
I tried using useDebounce callback, which partially solved the issue, but what is the best way to handle this?