Why do I need to call useFieldArray's append/prepend with arguments?

[mlistemann]

I find myself in a scenario where I would like to call prepend() without any arguments. It should rather use whatever is the current defaultValue of the corresponding useForm.

The parent component that introduces useForm defines some more or less empty defaultValue object. However, I'm going to update the default values in a useEffect with reset after data has been received from an API. Instead of passing a new property like "updatedDefaultValues" down to the child component where I use prepend or append, I'm wondering why it wouldn't be possible to just call them with the current default values that are registered with useForm?

Imagine the code looking somewhat like this:

// Parent.tsx

const defaultFormValues = {
    firstName: "",
    lastName: "",
    pets: [{
        name: "",
        age: 0
    }]
} as Person;

const Parent: React.FC = () => {
    const { control, handleSubmit, reset } = useForm<Person>({
        defaultValues: defaultFormValues
    });
    const apiResponse = useFetchFromAPI();

    useEffect(() => {
        if (apiResponse.data) {
            reset(apiResponse.data);
        }
    }, [apiResponse.data, reset]);

    return <Child control={control} defaultValues={defaultFormValues} />
}

// Child.tsx

const Child: React.FC<{control: any, defaultValues: Person}> = ({control, defaultValues}) => {
    const { fields, prepend, append } = useFieldArray({
        name: "pets",
        control
    });

    onAddPetHandler = () => {
        prepend(defaultValues.pets[0]);
        // would like to do this instead, assuming it knows what are the current defaultValues registered with useForm:
        // prepend();
    }

    ...
}