How to use useFieldArray with nested components and avoid re-render after deleting element from array

[KalachevDev]

Hello!

I have a case when I have something like this

const {fields, remove} = useFieldArray({...});

return fields.map((item, index) => <NestedComponent key={item.id} handleRemove={() => remove(index)} />)

I have really large form and I need to avoid any unnecessary re-renders. Here, for example, if I remove any non-last element, all components will re-render due to handleRemove callback change

I can do something like this:

return fields.map((item, index) => <NestedComponent key={item.id} handleRemove={remove} indexToRemove={index} />)

In this case all elements that are following removed element will re-render due to indexToRemove property change.

Probably something like this will solve the issue, but I'm not sure if it's a good solution:

return fields.map((item, index) => <NestedComponent key={item.id} handleRemove={remove} indexToRemove={index} />)

// NestedComponent
const handleRemove = () => {
  // filter out value from this component
  replace(currentValue.filter(field => field.value !== currentFieldValue))
};
return <div><input {...register('...')} /> <button onClick={handleRemove}></button></div>;