Benchmark: React 19 vs. SolidJS 2.0 for Dynamic Form Rendering in 2026

// React 19 Dynamic Form Implementation
// Dependencies: react@19.2.0, react-dom@19.2.0, react-use-form@1.0.0
import { useState, useCallback, useMemo } from 'react';
import { useForm, Controller } from 'react-use-form';
import { z } from 'zod';

// Validation schema for dynamic form fields
const fieldSchema = z.object({
  id: z.string().uuid(),
  label: z.string().min(1, 'Label is required'),
  value: z.string().min(1, 'Value cannot be empty'),
  type: z.enum(['text', 'email', 'number']),
});

const formSchema = z.object({
  formName: z.string().min(3, 'Form name must be at least 3 characters'),
  fields: z.array(fieldSchema).min(1, 'At least one field is required'),
});

export default function ReactDynamicForm() {
  const [submissionError, setSubmissionError] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Initialize useForm with React 19's new concurrent form handler
  const {
    control,
    handleSubmit,
    formState: { errors, isValid },
    watch,
    setValue,
    getValues,
  } = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      formName: '',
      fields: [
        { id: crypto.randomUUID(), label: 'Field 1', value: '', type: 'text' },
      ],
    },
    // React 19's new concurrent batching for form mutations
    batching: 'concurrent',
  });

  // Watch all fields to trigger re-renders on change
  const allFields = watch('fields');

  // Add new field with error handling
  const addField = useCallback(() => {
    try {
      const currentFields = getValues('fields');
      if (currentFields.length >= 100) {
        throw new Error('Maximum 100 fields allowed per form');
      }
      setValue('fields', [
        ...currentFields,
        {
          id: crypto.randomUUID(),
          label: `Field ${currentFields.length + 1}`,
          value: '',
          type: 'text',
        },
      ]);
    } catch (err) {
      console.error('Failed to add field:', err);
      setSubmissionError(err.message);
    }
  }, [getValues, setValue]);

  // Remove field by ID with error handling
  const removeField = useCallback(
    (fieldId) => {
      try {
        const currentFields = getValues('fields');
        if (currentFields.length <= 1) {
          throw new Error('Cannot remove the last remaining field');
        }
        setValue(
          'fields',
          currentFields.filter((f) => f.id !== fieldId)
        );
      } catch (err) {
        console.error('Failed to remove field:', err);
        setSubmissionError(err.message);
      }
    },
    [getValues, setValue]
  );

  // Form submission handler with error handling
  const onSubmit = useCallback(async (data) => {
    setIsSubmitting(true);
    setSubmissionError(null);
    try {
      // Simulate API call with 500ms delay
      await new Promise((resolve) => setTimeout(resolve, 500));
      console.log('Form submitted successfully:', data);
      alert('Form submitted! Check console for data.');
    } catch (err) {
      console.error('Submission failed:', err);
      setSubmissionError('Failed to submit form. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  }, []);

  // Memoize field list to prevent unnecessary re-renders
  const fieldList = useMemo(
    () => (

        {allFields.map((field, index) => (

             (

              )}
            />
            {errors.fields?.[index]?.label && (

                {errors.fields[index].label.message}

            )}

             (

              )}
            />
            {errors.fields?.[index]?.value && (

                {errors.fields[index].value.message}

            )}


                setValue(`fields.${index}.type`, e.target.value)
              }
            >
              Text
              Email
              Number


             removeField(field.id)}
              className="remove-btn"
            >
              Remove


        ))}

    ),
    [allFields, control, errors.fields, removeField, setValue]
  );

  return (

      React 19 Dynamic Form


          Form Name
           (

            )}
          />
          {errors.formName && (
            {errors.formName.message}
          )}


        {fieldList}



            Add Field


            {isSubmitting ? 'Submitting...' : 'Submit Form'}



        {submissionError && (
          {submissionError}
        )}


  );
}

// SolidJS 2.0 Dynamic Form Implementation
// Dependencies: solid-js@2.3.0, solid-form@3.1.0, valibot@2.0.0
import { createSignal, createEffect, mapArray, For, Show } from 'solid-js';
import { createForm } from 'solid-form';
import * as v from 'valibot';

// Validation schema using Valibot (smaller than Zod for Solid)
const fieldSchema = v.object({
  id: v.string([v.uuid()]),
  label: v.string([v.minLength(1, 'Label is required')]),
  value: v.string([v.minLength(1, 'Value cannot be empty')]),
  type: v.picklist(['text', 'email', 'number']),
});

const formSchema = v.object({
  formName: v.string([v.minLength(3, 'Form name must be at least 3 characters')]),
  fields: v.array(fieldSchema, [v.minLength(1, 'At least one field is required')]),
});

export default function SolidDynamicForm() {
  const [submissionError, setSubmissionError] = createSignal(null);
  const [isSubmitting, setIsSubmitting] = createSignal(false);

  // Initialize Solid Form with fine-grained reactivity
  const form = createForm({
    schema: formSchema,
    defaultValues: {
      formName: '',
      fields: [
        { id: crypto.randomUUID(), label: 'Field 1', value: '', type: 'text' },
      ],
    },
    // SolidJS 2.0's compile-time optimized validation
    validateOnChange: true,
  });

  // Fine-grained signal for fields (avoids re-rendering entire list)
  const fields = form.watch('fields');

  // Add new field with error handling
  const addField = () => {
    try {
      const currentFields = form.getValues('fields');
      if (currentFields.length >= 100) {
        throw new Error('Maximum 100 fields allowed per form');
      }
      form.setValue('fields', [
        ...currentFields,
        {
          id: crypto.randomUUID(),
          label: `Field ${currentFields.length + 1}`,
          value: '',
          type: 'text',
        },
      ]);
    } catch (err) {
      console.error('Failed to add field:', err);
      setSubmissionError(err.message);
    }
  };

  // Remove field by ID with error handling
  const removeField = (fieldId) => {
    try {
      const currentFields = form.getValues('fields');
      if (currentFields.length <= 1) {
        throw new Error('Cannot remove the last remaining field');
      }
      form.setValue(
        'fields',
        currentFields.filter((f) => f.id !== fieldId)
      );
    } catch (err) {
      console.error('Failed to remove field:', err);
      setSubmissionError(err.message);
    }
  };

  // Form submission handler with error handling
  const onSubmit = async (data) => {
    setIsSubmitting(true);
    setSubmissionError(null);
    try {
      // Simulate API call with 500ms delay
      await new Promise((resolve) => setTimeout(resolve, 500));
      console.log('Form submitted successfully:', data);
      alert('Form submitted! Check console for data.');
    } catch (err) {
      console.error('Submission failed:', err);
      setSubmissionError('Failed to submit form. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  // Map array with fine-grained updates (only re-renders changed items)
  const fieldList = mapArray(fields, (field, index) => {
    const fieldErrors = form.formState.errors.fields?.[index()];

    return (

         form.setValue(`fields.${index()}.label`, e.target.value)}
          class={fieldErrors?.label ? 'error' : ''}
        />

          {fieldErrors.label.message}


         form.setValue(`fields.${index()}.value`, e.target.value)}
          class={fieldErrors?.value ? 'error' : ''}
        />

          {fieldErrors.value.message}


         form.setValue(`fields.${index()}.type`, e.target.value)}
        >
          Text
          Email
          Number


         removeField(field().id)}
          class="remove-btn"
        >
          Remove


    );
  });

  return (

      SolidJS 2.0 Dynamic Form
       { e.preventDefault(); form.handleSubmit(onSubmit)(e); }}>

          Form Name
           form.setValue('formName', e.target.value)}
            class={form.formState.errors.formName ? 'error' : ''}
          />

            {form.formState.errors.formName.message}



        {fieldList}



            Add Field


            {isSubmitting() ? 'Submitting...' : 'Submit Form'}




          {submissionError()}



  );
}

// Benchmark Suite: React 19 vs SolidJS 2.0 Dynamic Form Rendering
// Dependencies: benchmark@4.0.0, puppeteer@22.0.0, chrome-launcher@1.1.0
import Benchmark from 'benchmark';
import puppeteer from 'puppeteer';
import { launch } from 'chrome-launcher';

// Benchmark configuration (matches methodology stated earlier)
const BENCHMARK_CONFIG = {
  iterations: 100,
  timeout: 30000,
  cpuThrottling: 4, // 4x slowdown to simulate low-end devices
  networkThrottling: '3G',
  hardware: 'MacBook Pro M3 Max (64GB RAM, 1TB SSD)',
  browser: 'Chrome 126.0.6478.127',
  testScenarios: [
    '100-field form initial render',
    '100-field form single mutation',
    '100-field form 10-mutation burst',
    '20-field form with validation',
    '100-field form add/remove field',
  ],
};

// Launch headless Chrome for benchmark
async function launchBrowser() {
  try {
    const chrome = await launch({
      chromeFlags: [
        '--headless',
        '--disable-gpu',
        '--no-sandbox',
        `--cpu-throttling-rate=${BENCHMARK_CONFIG.cpuThrottling}`,
        `--throttling=${BENCHMARK_CONFIG.networkThrottling}`,
      ],
    });
    const browser = await puppeteer.connect({ browserURL: `http://localhost:${chrome.port}` });
    return { browser, chrome };
  } catch (err) {
    console.error('Failed to launch browser:', err);
    process.exit(1);
  }
}

// Run benchmark for React 19 form
async function benchmarkReact(browser) {
  const page = await browser.newPage();
  try {
    await page.goto('http://localhost:3000/react-form', {
      waitUntil: 'networkidle0',
    });

    const suite = new Benchmark.Suite('React 19 Dynamic Form');

    // Test 1: Initial render of 100-field form
    suite.add('100-field initial render', {
      defer: true,
      fn: async (deferred) => {
        await page.reload({ waitUntil: 'networkidle0' });
        const renderTime = await page.evaluate(() => window.renderTime);
        deferred.resolve(renderTime);
      },
    });

    // Test 2: Single mutation (update first field value)
    suite.add('100-field single mutation', {
      defer: true,
      fn: async (deferred) => {
        const startTime = Date.now();
        await page.evaluate(() => {
          const input = document.querySelector('input[placeholder="Field Value"]');
          input.value = 'test';
          input.dispatchEvent(new Event('input', { bubbles: true }));
        });
        await page.waitForSelector('.submit-btn:not([disabled])');
        deferred.resolve(Date.now() - startTime);
      },
    });

    // Test 3: 10-mutation burst
    suite.add('100-field 10-mutation burst', {
      defer: true,
      fn: async (deferred) => {
        const startTime = Date.now();
        for (let i = 0; i < 10; i++) {
          await page.evaluate((index) => {
            const inputs = document.querySelectorAll('input[placeholder="Field Value"]');
            if (inputs[index]) {
              inputs[index].value = `test-${i}`;
              inputs[index].dispatchEvent(new Event('input', { bubbles: true }));
            }
          }, i);
        }
        await page.waitForSelector('.submit-btn:not([disabled])');
        deferred.resolve(Date.now() - startTime);
      },
    });

    return new Promise((resolve) => {
      const results = [];
      suite
        .on('cycle', (event) => {
          results.push({
            test: event.target.name,
            hz: event.target.hz,
            mean: event.target.stats.mean * 1000, // Convert to ms
            p50: event.target.stats.p50 * 1000,
            p99: event.target.stats.p99 * 1000,
          });
        })
        .on('complete', () => resolve(results))
        .run({ async: true });
    });
  } finally {
    await page.close();
  }
}

// Run benchmark for SolidJS 2.0 form (identical logic)
async function benchmarkSolid(browser) {
  const page = await browser.newPage();
  try {
    await page.goto('http://localhost:3001/solid-form', {
      waitUntil: 'networkidle0',
    });

    const suite = new Benchmark.Suite('SolidJS 2.0 Dynamic Form');

    // Identical test cases to React
    suite.add('100-field initial render', {
      defer: true,
      fn: async (deferred) => {
        await page.reload({ waitUntil: 'networkidle0' });
        const renderTime = await page.evaluate(() => window.renderTime);
        deferred.resolve(renderTime);
      },
    });

    suite.add('100-field single mutation', {
      defer: true,
      fn: async (deferred) => {
        const startTime = Date.now();
        await page.evaluate(() => {
          const input = document.querySelector('input[placeholder="Field Value"]');
          input.value = 'test';
          input.dispatchEvent(new Event('input', { bubbles: true }));
        });
        await page.waitForSelector('.submit-btn:not([disabled])');
        deferred.resolve(Date.now() - startTime);
      },
    });

    suite.add('100-field 10-mutation burst', {
      defer: true,
      fn: async (deferred) => {
        const startTime = Date.now();
        for (let i = 0; i < 10; i++) {
          await page.evaluate((index) => {
            const inputs = document.querySelectorAll('input[placeholder="Field Value"]');
            if (inputs[index]) {
              inputs[index].value = `test-${i}`;
              inputs[index].dispatchEvent(new Event('input', { bubbles: true }));
            }
          }, i);
        }
        await page.waitForSelector('.submit-btn:not([disabled])');
        deferred.resolve(Date.now() - startTime);
      },
    });

    return new Promise((resolve) => {
      const results = [];
      suite
        .on('cycle', (event) => {
          results.push({
            test: event.target.name,
            hz: event.target.hz,
            mean: event.target.stats.mean * 1000,
            p50: event.target.stats.p50 * 1000,
            p99: event.target.stats.p99 * 1000,
          });
        })
        .on('complete', () => resolve(results))
        .run({ async: true });
    });
  } finally {
    await page.close();
  }
}

// Main benchmark execution
async function runBenchmarks() {
  console.log('Starting benchmark suite...');
  console.log('Config:', BENCHMARK_CONFIG);

  const { browser, chrome } = await launchBrowser();
  try {
    const reactResults = await benchmarkReact(browser);
    const solidResults = await benchmarkSolid(browser);

    console.log('\n=== Benchmark Results ===');
    console.log('React 19 Results:');
    reactResults.forEach((r) => console.log(`  ${r.test}: ${r.mean.toFixed(2)}ms mean, ${r.p50.toFixed(2)}ms p50, ${r.p99.toFixed(2)}ms p99`));
    console.log('\nSolidJS 2.0 Results:');
    solidResults.forEach((r) => console.log(`  ${r.test}: ${r.mean.toFixed(2)}ms mean, ${r.p50.toFixed(2)}ms p50, ${r.p99.toFixed(2)}ms p99`));
  } finally {
    await browser.disconnect();
    chrome.kill();
  }
}

// Execute benchmarks with error handling
runBenchmarks().catch((err) => {
  console.error('Benchmark failed:', err);
  process.exit(1);
});

// SolidJS: Memoize individual form fields to avoid re-renders
import { createMemo } from 'solid-js';

const Field = (props) => {
  const field = createMemo(() => props.field());
  return (

       props.onChange(e.target.value)}
      />

  );
};

// React 19: Debounce validation to reduce overhead
import { debounce } from 'lodash-es';

const debouncedValidation = debounce((value, onChange) => {
  // Run validation logic here
  onChange(value);
}, 300);

// In your form field:
onInput={(e) => debouncedValidation(e.target.value, setValue)}

// Vite config for tree-shaking Zod in React 19
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'form-vendor': ['react', 'react-use-form', 'zod'],
        },
      },
    },
  },
});