Optimizing Form Performance with useFieldArray
Demonstrate the use of useFieldArray hook from TanStack Form to manage dynamic form fields efficiently, emphasizing performance optimization.
import { useFieldArray, useForm } from 'react-hook-form';
First, import the necessary hooks from TanStack Form.
function DynamicForm() {
const { control, handleSubmit } = useForm();
const { fields, append, remove } = useFieldArray({
control,
name: 'users'
});
Initialize the useForm and useFieldArray hooks. 'useFieldArray' is used for managing dynamic arrays of fields.
const onSubmit = (data) => console.log(data);
return (
/* Form rendering logic here, showing usage of fields, append, and remove */
);
}
Define an onSubmit function to handle form submission and log the form data. Following this, return the dynamic form component structure.
/* Example usage of append */
<button onClick={() => append({ name: '', age: '' })}>Add User</button>
Demonstrates how to add a new user object to the 'users' array field by using the 'append' method.
/* Example usage of remove */
<button onClick={() => remove(index)}>Remove User</button>
Shows how to remove a specific user from the 'users' array field using the 'remove' method. The 'index' parameter refers to the index of the user to be removed.
export default DynamicForm;
Exports the DynamicForm component for use in other parts of the application.