My modal is causing all inputs to be re-rendered with every change I make while typing.
I have a Formik object set up like this:
const formik = useFormik({
enableReinitialize: true,
initialValues: {
sp_id: data?.id,
websites: data?.websites || [],
create_websites: [],
delete_websites: [],
update_websites: []
},
validationSchema: Yup.object({
sp_id: Yup.string().required("This field is required and can\'t not be changed"),
websites:Yup.array().of(Yup. string())
}),
onSubmit: (values) => {
console.log('submit:',values)
}
});
Custom Form Input Component:
const FormInput = ({ name, value, placeholder, ...rest }) => (
<div className="space-y-1 w-full pt-3 pr-2">
<label className="font-bold text-sm text-secondary">
Web Link
<span className="text-red-500">*</span>
</label>
<Input
{...formik.getFieldProps(name)}
value={value}
placeholder={placeholder}
onChange={(e) => {
formik.handleChange(e);
formik.setFieldValue(name, e.target.value);
}}
{...rest}
/>
</div>
);
I am also using Ant Design:
<Form.List name="websites">
{(fields, {add, remove}) => {
return (
(
<div key="test">
{
fields.map(({name, key, isListField, fieldKey, ...restField}) => {
return (
<div key={fieldKey}>
<Form.Item
{...restField}
name={[name, 'domain']}
fieldKey={[fieldKey, 'domain']}
validateTrigger={["onChange", "onBlur"]}
rules={[
{
required: true,
message: 'Domain is required'
}
]}
noStyle
className="w-full"
>
<div className="flex items-end w-full">
<FormInput
name={`websites.${key}.domain`}
placeholder="URL"
value={formik.values.websites[key]?.domain}
/>
{fields.length > 1 && (
<Button
type="default"
size="small"
icon={<LuTrash2 size={20}/>}
onClick={() => {
if (formik.values.websites[key]) {
formik.setFieldValue(
'delete_websites',
[
...formik.values.delete_websites,
formik.values.websites[key]
]
);
remove(name)
}
}}
className="mb-1 bg-[#F06548] border-[#F06548] text-white flex items-center justify-center h-full"
/>
)}
</div>
</Form.Item>
</div>
);
}
)}
<div className="mt-5 w-full">
<AntButton
type="dashed"
onClick={() => {
add();
}}
icon={<PlusOutlined />}
className="w-full border-2 border-dashed border-gray-500"
>
Add Website
</AntButton>
</div>
</div>
)
);
}}
</Form.List>
The problem I'm facing is that each time I make a change, the input loses focus and gets re-rendered.
I'm looking for a smoother way to handle changes without causing unnecessary re-renders.