Optimizing Form Rendering with Multiple Tabs and Dynamic Form Items

I want to structure a form effectively. My goal is to create a page with five tabs, each containing 10 unique form items with different types, such as text, number, and select fields. I’ve built the structure by setting up a Tab and TabContent area, displaying the corresponding TabContent based on the active tab. Each tab’s 10 form items are defined in constants as objects with types, allowing the form component to render the appropriate form item based on the type. The layout displays correctly, but the rendering speed is slow. How can I improve the performance? Below is a partial code example showing the relevant sections. I’d greatly appreciate any suggestions for optimization.

import React, { useState, useMemo } from 'react';
import {
  Tabs as UITabs,
  Tab as UITab,
  TabContent as UITabContent,
  FormInput,
  FormSelect,
  FormInputNumber,
} from 'your-ui-library';

const FORM_LIST = [
  {
    id: 0,
    key: 'school',
    title: 'School',
    fieldsList: SCHOOL_FIELDS,
  },
  {
    id: 1,
    key: 'college',
    title: 'College',
    fieldsList: COLLEGE_FIELDS,
  },
  {
    id: 2,
    key: 'university',
    title: 'University',
    fieldsList: UNIVERSITY_FIELDS,
  },
];

export const UNIVERSITY_FIELDS = [
  {
    type: 'select',
    name: '1',
    label: 'Region',
    description: 'test',
    options: [
      { label: 'Korea', value: 'korean' },
      { label: 'India', value: 'india' },
    ],
    validationRules: { required: 'Role selection is required' },
  },
  {
    type: 'inputNumber',
    name: '2',
    label: 'Minimum Letters',
    validationRules: { required: 'Number is required' },
  },
];

// Tabs Component
const Tabs = ({ tabs, activeTab, onTabChange }) => {
  return (
    <UITabs orientation="vertical" onChangeTab={(newTab) => onTabChange(newTab)} outline>
      {tabs.map((tab) => (
        <UITab key={tab.id} id={tab.id} label={tab.title}>
          {tab.title}
        </UITab>
      ))}
    </UITabs>
  );
};

// TabContent Component
const TabContent = ({ activeTab, tabs }) => {
  const content = useMemo(() => {
    return tabs
      .filter((tab) => tab.id === activeTab)
      .map((tab) => (
        <UITabContent key={tab.id} value={tab.id} activeTabNum={activeTab}>
          <FieldRenderContent fields={tab.fieldsList} />
        </UITabContent>
      ));
  }, [activeTab, tabs]);

  return <>{content}</>;
};

// FieldRenderer Component
const FieldRenderer = ({ field }) => {
  switch (field.type) {
    case 'input':
      return (
        <FormInput
          name={field.name}
          label={field.label}
          description={field.description}
          validationRules={field.validationRules}
        />
      );
    case 'select':
      return (
        <FormSelect
          name={field.name}
          label={field.label}
          options={field.options}
          description={field.description}
          isClearable={true}
          validationRules={field.validationRules}
        />
      );
    case 'inputNumber':
      return <FormInputNumber name={field.name} label={field.label} validationRules={field.validationRules} />;
    default:
      return null;
  }
};

// FieldRenderContent Component
const FieldRenderContent = ({ fields }) => {
  return (
    <>
      {fields.map((field) => (
        <FieldRenderer key={field.name} field={field} />
      ))}
    </>
  );
};

// Main Component
const FormPage = () => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div style={{ display: 'flex' }}>
      {/* Tabs */}
      <div style={{ marginRight: '16px' }}>
        <Tabs tabs={FORM_LIST} activeTab={activeTab} onTabChange={setActiveTab} />
      </div>

      {/* Tab Content */}
      <div>
        <TabContent activeTab={activeTab} tabs={FORM_LIST} />
      </div>
    </div>
  );
};

export default FormPage;