Many requests using form

I have this kind of form

    const { form, formProps, saveButtonProps, onFinish, queryResult } = useForm({
        id,
        action: RESOURCES_ACTION_EDIT,
        resource: RESOURCES.COMPARISONS,
        redirect: "list",
        onMutationSuccess: () => {
            const message = translate("common.success");
            const description = translate("pages.pricingAuditComparisions.edit.success");
            notification.success({ message, description });
        },
        onMutationError: () => {
            const message = translate("common.error");
            const description = translate("pages.pricingAuditComparisions.edit.error");
            notification.error({ message, description });
        },
    });

    const { form, formProps, saveButtonProps, onFinish, queryResult } = useForm({
        id,
        action: RESOURCES_ACTION_EDIT,
        resource: RESOURCES.COMPARISONS,
        redirect: "list",
        onMutationSuccess: () => {
            const message = translate("common.success");
            const description = translate("pages.pricingAuditComparisions.edit.success");
            notification.success({ message, description });
        },
        onMutationError: () => {
            const message = translate("common.error");
            const description = translate("pages.pricingAuditComparisions.edit.error");
            notification.error({ message, description });
        },
    });

And when I see on network tab I can see fetching the same entity many times. Why is this happening?

3 Replies

kapa.ai•6mo ago

Hi @Sebastos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useForm hook in Refine is designed to handle form-related operations such as fetching data, handling form submission, and redirecting after successful operations. If you're seeing multiple requests for the same entity, it could be due to the way you've set up your form or due to some other factors in your application. However, based on the information provided in the knowledge sources, it's not clear why multiple requests are being made for the same entity. The useForm hook should ideally make a single request to fetch the data for the specified resource and id. It's possible that the form is being re-rendered multiple times, causing the useForm hook to be invoked again and again. This could happen if there are state changes or prop changes in your component that cause it to re-render. You might want to check your component's render behavior and see if there are unnecessary re-renders. Tools like React DevTools can help you analyze the render behavior of your components. If you're still facing issues, you might want to seek help from the Refine community or support channels. They might be able to provide more specific guidance based on your exact setup and code. Refine's useForm Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form) React Hook Form's useForm Documentation (https://refine.dev/docs/packages/react-hook-form/use-form) Refine Community Discussion (https://github.com/refinedev/refine/discussions/4927) Refine Discord Support Thread (https://discord.com/channels/837692625737613362/1199246123626418268) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@689846866837373077> kapa.ai is still learning and improving, please let us know how it did by reacting below

other-emerald•6mo ago

@kapa.ai For instance when I touch the sort in a column the fetch is triggered but the data is locally

const columns: ProColumns<ComparisonType>[] = useMemo(() => ([
        {
            title: <span>{translate("pages.pricingAuditComparisions.columns.own")}</span>,
            children: [
                {
                    title: <span>{translate("pages.pricingAuditComparisions.columns.sku")}</span>,
                    dataIndex: ['mainItem', 'sku'],
                    key: ['mainItem', 'sku'],
                    align: 'center',
                    ellipsis: true,
                    filters: true,
                    tooltip: translate("pages.pricingAuditComparisions.columns.skuTooltip"),
                },
                {
                    title: <span>{translate("pages.pricingAuditComparisions.columns.item")}</span>,
                    dataIndex: ['mainItem', 'item'],
                    key: ['mainItem', 'item'],
                    align: 'center',
                    ellipsis: true,
                    filters: true,
                    sorter: (a, b) => a.mainItem?.item?.localeCompare(b?.mainItem?.item),
                },
                {
                    title: <span>{translate("pages.pricingAuditComparisions.columns.modifier")}</span>,
                    dataIndex: ['mainItem', 'modifier'],
                    key: ['mainItem', 'modifier'],
                    align: 'center',
                    ellipsis: true,
                    filters: true,
                },
                {
                    title: <span>{translate("pages.pricingAuditComparisions.columns.channel")}</span>,
                    dataIndex: ['mainItem', 'channel'],
                    key: ['mainItem', 'channel'],
                    align: 'center',
                    ellipsis: true,
                    filters: true,
                },
            ],
        },
    ]), [activeTab, renderItemSelector, renderModifierSelector, translate]);

const columns: ProColumns<ComparisonType>[] = useMemo(() => ([
        {
            title: <span>{translate("pages.pricingAuditComparisions.columns.own")}</span>,
            children: [
                {
                    title: <span>{translate("pages.pricingAuditComparisions.columns.sku")}</span>,
                    dataIndex: ['mainItem', 'sku'],
                    key: ['mainItem', 'sku'],
                    align: 'center',
                    ellipsis: true,
                    filters: true,
                    tooltip: translate("pages.pricingAuditComparisions.columns.skuTooltip"),
                },
                {
                    title: <span>{translate("pages.pricingAuditComparisions.columns.item")}</span>,
                    dataIndex: ['mainItem', 'item'],
                    key: ['mainItem', 'item'],
                    align: 'center',
                    ellipsis: true,
                    filters: true,
                    sorter: (a, b) => a.mainItem?.item?.localeCompare(b?.mainItem?.item),
                },
                {
                    title: <span>{translate("pages.pricingAuditComparisions.columns.modifier")}</span>,
                    dataIndex: ['mainItem', 'modifier'],
                    key: ['mainItem', 'modifier'],
                    align: 'center',
                    ellipsis: true,
                    filters: true,
                },
                {
                    title: <span>{translate("pages.pricingAuditComparisions.columns.channel")}</span>,
                    dataIndex: ['mainItem', 'channel'],
                    key: ['mainItem', 'channel'],
                    align: 'center',
                    ellipsis: true,
                    filters: true,
                },
            ],
        },
    ]), [activeTab, renderItemSelector, renderModifierSelector, translate]);