Architectural question regarding nested Lists and Selects

Hey everyone! Here's a common problem where I hope there is a common solution in refine.

Imagine you have a custom row template component that looks close to something like this:

import { useSelect } from '@refinedev/antd';
import { Input, Select } from 'antd';

const MyCustomRowTemplate: React.FC = (name: number) => {
  const { selectProps } = useSelect<ICategory>({
    resource: "categories",
  });

  return (
    <>
      <Form.Item name={[name, "category"]}>
        <Select placeholder="Select a category" style={{ width: 300 }} {...selectProps} />
      </Form.Item>
      <Form.Item name={[name, "another_field"]}>
        <Input />
      </Form.Item>
    </>
  );
};

import { useSelect } from '@refinedev/antd';
import { Input, Select } from 'antd';

const MyCustomRowTemplate: React.FC = (name: number) => {
  const { selectProps } = useSelect<ICategory>({
    resource: "categories",
  });

  return (
    <>
      <Form.Item name={[name, "category"]}>
        <Select placeholder="Select a category" style={{ width: 300 }} {...selectProps} />
      </Form.Item>
      <Form.Item name={[name, "another_field"]}>
        <Input />
      </Form.Item>
    </>
  );
};

import { useSelect } from '@refinedev/antd';
import { Input, Select } from 'antd';

const MyCustomRowTemplate: React.FC = (name: number) => {
  const { selectProps } = useSelect<ICategory>({
    resource: "categories",
  });

  return (
    <>
      <Form.Item name={[name, "category"]}>
        <Select placeholder="Select a category" style={{ width: 300 }} {...selectProps} />
      </Form.Item>
      <Form.Item name={[name, "another_field"]}>
        <Input />
      </Form.Item>
    </>
  );
};

import { useSelect } from '@refinedev/antd';
import { Input, Select } from 'antd';

const MyCustomRowTemplate: React.FC = (name: number) => {
  const { selectProps } = useSelect<ICategory>({
    resource: "categories",
  });

  return (
    <>
      <Form.Item name={[name, "category"]}>
        <Select placeholder="Select a category" style={{ width: 300 }} {...selectProps} />
      </Form.Item>
      <Form.Item name={[name, "another_field"]}>
        <Input />
      </Form.Item>
    </>
  );
};

I want to use this component as a template for a

Form.List

Form.List

Form.List

Form.List (https://ant.design/components/form#components-form-demo-dynamic-form-item) component which enables you to dynamically add entries to a list. Say we have a list of 10 items then this component blocks the main-thread for ~5 seconds rendering all components because of the

useSelect

useSelect

useSelect

useSelect.

I haven't found a way around this behavior yet, which as said completely blocks the main thread in my application. Maybe @core can help me figure this out

Form - Ant Design

An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises

Architectural question regarding nested Lists and Selects

Similar Threads

Similar Threads

Similar Threads