Performance Optimization

Framework:

Overview

Schema FormX is designed with performance in mind, but performance bottlenecks may still occur in complex scenarios. This chapter introduces common optimization strategies and best practices.

Interactive Example

Dependency Linkage Optimization

Problem: Too Many Linkage Triggers

When there are complex dependencies between form fields, it may trigger excessive linkage computations.

Optimization Strategies:

Control Linkage Depth: Avoid more than 3-4 levels of cascading dependencies
Reasonably Split Schema: Split complex forms into multiple independent Groups
Use Debouncing: Use debouncing for frequently triggered linkages

Optimization Example

import { useMemo, useCallback } from 'react';

// ❌ Wrong: Creating new function on each render
const schema = [
  {
    type: 'string',
    name: 'field1',
    deps: ['field0'],
    onDepsChange: async ({ deps }) => {
      // New function each time, may trigger unnecessary re-renders
    }
  }
];

// ✅ Correct: Use useCallback to stabilize function reference
const handleDepsChange = useCallback(async ({ deps, schema }) => {
  const data = await fetchData(deps[0]);
  return { schema: { ...schema, props: { options: data } } };
}, []);

const schema = [
  {
    type: 'string',
    name: 'field1',
    deps: ['field0'],
    onDepsChange: handleDepsChange
  }
];

Complex Form Splitting

Option 1: Using Groups

Split large forms into multiple Groups, each managing independently:

import { Form } from '@schema-formx/react';
import type { GroupSchema } from '@schema-formx/react';

const schema: GroupSchema[] = [
  {
    key: 'basic',
    props: { title: 'Basic Info' },
    fields: [
      { type: 'string', name: 'name', label: 'Name' },
      { type: 'string', name: 'email', label: 'Email' }
    ]
  },
  {
    key: 'address',
    props: { title: 'Address' },
    fields: [
      { type: 'string', name: 'province', label: 'Province' },
      { type: 'string', name: 'city', label: 'City' }
    ]
  }
];

function MyForm() {
  return <Form schema={schema} />;
}

Option 2: Split into Multiple Forms

For completely independent form sections, use multiple Form instances:

import { Form } from '@schema-formx/react';
import { useRef } from 'react';

function MultiFormPage() {
  const formRef1 = useRef(null);
  const formRef2 = useRef(null);

  const handleSubmit = async () => {
    // Get data from both forms separately
    const result1 = await formRef1.current.validate();
    const result2 = await formRef2.current.validate();
    
    if (!result1.errors && !result2.errors) {
      console.log('Form 1 data:', result1.data);
      console.log('Form 2 data:', result2.data);
    }
  };
  
  return (
    <div>
      <h3>Section 1</h3>
      <Form 
        ref={formRef1}
        schema={schema1}
        components={components}
        layout={layout}
        onChange={({ data }) => console.log('Form 1 changed:', data)}
      />
      
      <h3>Section 2</h3>
      <Form 
        ref={formRef2}
        schema={schema2}
        components={components}
        layout={layout}
        onChange={({ data }) => console.log('Form 2 changed:', data)}
      />
      
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Async Data Loading Optimization

Use Caching to Avoid Duplicate Requests

const dataCache = new Map();

const fetchData = async (key: string) => {
  if (dataCache.has(key)) {
    return dataCache.get(key);
  }
  
  const data = await api.getData(key);
  dataCache.set(key, data);
  return data;
};

const schema = [
  {
    type: 'string',
    name: 'industry',
    label: 'Industry',
    props: {
      options: ['IT', 'Finance', 'Education']
    }
  },
  {
    type: 'string',
    name: 'company',
    label: 'Company',
    deps: ['industry'],
    onDepsChange: async ({ deps, schema }) => {
      const companies = await fetchData(deps[0]);
      return {
        schema: { ...schema, props: { options: companies } }
      };
    }
  }
];

Request Debouncing

For input linkage, use debouncing to avoid frequent triggers:

import { debounce } from 'lodash-es';

const fetchSuggestions = debounce(async (keyword: string) => {
  const results = await api.search(keyword);
  return results;
}, 300);

const schema = [
  {
    type: 'string',
    name: 'username',
    label: 'Username',
    deps: [],
    onDepsChange: async () => {
      // Note: Simplified demo, actual implementation needs more complex debouncing logic
    }
  }
];

Render Optimization

Avoid Unnecessary Re-renders

import { useMemo } from 'react';

function MyForm() {
  // ✅ Use useMemo to cache schema, avoid creating new objects on each render
  const schema = useMemo(() => [
    { type: 'string', name: 'name', label: 'Name' },
    { type: 'string', name: 'email', label: 'Email' }
  ], []);  // Empty dependency array, only created once

  // ✅ Use useMemo to cache layout
  const layout = useMemo(() => ({
    formClassName: 'my-form',
    formStyle: { maxWidth: '600px' }
  }), []);

  return <Form schema={schema} layout={layout} />;
}

Use React.memo to Wrap Components

import { memo } from 'react';

// Use React.memo to avoid unnecessary re-renders
const CustomField = memo(({ value, onChange }: any) => {
  return (
    <input 
      value={value || ''}
      onChange={(e) => onChange(e.target.value)}
      style={{ padding: '8px', border: '1px solid #ccc' }}
    />
  );
});

// Register custom component
const components = {
  DefaultControl: CustomField
};

Validation Optimization

Partial vs Global Validation

Choose the appropriate validation strategy for your use case:

import { useRef } from 'react';

function MyForm() {
  const formRef = useRef(null);

  // ✅ Validate all fields on submit
  const handleSubmit = async () => {
    const { data, errors } = await formRef.current.validate();
    if (errors) {
      console.log('Validation failed:', errors);
      return;
    }
    console.log('Validation passed:', data);
  };

  return <Form ref={formRef} schema={schema} />;
}

Avoid Unnecessary Global Validation

When the form has many fields, avoid triggering global validation on every value change. Instead, validate only on submission:

import { useRef, useCallback } from 'react';

function MyForm() {
  const formRef = useRef(null);

  // ✅ Only trigger global validation on submit, not on every value change
  const handleSubmit = useCallback(async () => {
    const { data, errors } = await formRef.current.validate();
    if (errors) {
      console.log('Validation failed:', errors);
      return;
    }
    console.log('Validation passed:', data);
  }, []);

  return (
    <>
      <Form ref={formRef} schema={schema} />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

Validation Strategy Comparison:

Strategy	Method	Use Case
Global Validation	`validate()`	On form submission
Automatic Validation	Triggered on field value change	User input (default behavior)

Best Practices Summary