Benchmark: TypeScript 5.6 vs. Flow 0.230 for Large-Scale React 20 Codebases

// tsconfig.json for TypeScript 5.6 React 20 project
{
  \"compilerOptions\": {
    \"target\": \"ES2024\",
    \"lib\": [\"ES2024\", \"DOM\", \"DOM.Iterable\"],
    \"module\": \"ESNext\",
    \"moduleResolution\": \"bundler\",
    \"jsx\": \"react-jsx\",
    \"strict\": true,
    \"esModuleInterop\": true,
    \"skipLibCheck\": true,
    \"forceConsistentCasingInFileNames\": true,
    \"resolveJsonModule\": true,
    \"isolatedModules\": true,
    \"noEmit\": true,
    \"reactStrictMode\": true,
    \"typeRoots\": [\"node_modules/@types\", \"custom-types\"],
    \"baseUrl\": \".\",
    \"paths\": {
      \"@components/*\": [\"src/components/*\"],
      \"@lib/*\": [\"src/lib/*\"]
    }
  },
  \"include\": [\"src/**/*\"],
  \"exclude\": [\"node_modules\", \"build\"]
}

// src/components/ProductList.tsx
import React, { Suspense } from 'react';
import { Product, ProductAPIResponse } from '@lib/types';
import { fetchProducts } from '@lib/api';

// Error boundary for product list failures
interface ErrorBoundaryProps {
  children: React.ReactNode;
  fallback: React.ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

export class ProductListErrorBoundary extends React.Component {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error): Partial {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.error('ProductListErrorBoundary caught error:', error, errorInfo);
    // Log to error tracking service in production
    if (process.env.NODE_ENV === 'production') {
      fetch('/api/log-error', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ error: error.message, stack: error.stack, componentStack: errorInfo.componentStack })
      }).catch((logError) => console.error('Failed to log error:', logError));
    }
  }

  render(): React.ReactNode {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

// React 20 Server Component for product listing
export async function ProductList({ categoryId }: { categoryId: string }): Promise {
  // Validate input parameter
  if (!categoryId || typeof categoryId !== 'string') {
    throw new Error('Invalid categoryId: must be a non-empty string');
  }

  let products: Product[] = [];
  let error: Error | null = null;

  try {
    const response: ProductAPIResponse = await fetchProducts(categoryId);
    if (response.status === 'success') {
      products = response.data;
    } else {
      throw new Error(`API error: ${response.errorMessage}`);
    }
  } catch (err) {
    error = err instanceof Error ? err : new Error('Unknown error fetching products');
  }

  if (error) {
    return (

        Failed to load products
        {error.message}

    );
  }

  return (

      Products in Category {categoryId}
      Loading products...}>

          {products.map((product) => (

              {product.name}
              {product.description}
              ${product.price.toFixed(2)}

          ))}



  );
}

# .flowconfig for Flow 0.230 React 20 project
[ignore]
.*/node_modules/.* 
.*/build/.*

[include]
./src

[libs]
./flow-typed

[lints]
all=warn

[options]
react.runtime=automatic
esproposal.optional_chaining=true
esproposal.nullish_coalescing=true
module.name_mapper='^@components/\(.*\)$' -> '/src/components/\1'
module.name_mapper='^@lib/\(.*\)$' -> '/src/lib/\1'
strict=true

// src/components/ProductList.jsx
import React, { Suspense } from 'react';
import type { Product, ProductAPIResponse } from '@lib/types';
import { fetchProducts } from '@lib/api';

// Error boundary for product list failures
interface ErrorBoundaryProps {
  children: React.Node;
  fallback: React.Node;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

export class ProductListErrorBoundary extends React.Component {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error): Partial {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.error('ProductListErrorBoundary caught error:', error, errorInfo);
    // Log to error tracking service in production
    if (process.env.NODE_ENV === 'production') {
      fetch('/api/log-error', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ error: error.message, stack: error.stack, componentStack: errorInfo.componentStack })
      }).catch((logError: Error) => console.error('Failed to log error:', logError));
    }
  }

  render(): React.Node {
    if (this.state.hasError) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

// React 20 Server Component for product listing
export async function ProductList({ categoryId }: { categoryId: string }): Promise {
  // Validate input parameter
  if (!categoryId || typeof categoryId !== 'string') {
    throw new Error('Invalid categoryId: must be a non-empty string');
  }

  let products: Product[] = [];
  let error: Error | null = null;

  try {
    const response: ProductAPIResponse = await fetchProducts(categoryId);
    if (response.status === 'success') {
      products = response.data;
    } else {
      throw new Error(`API error: ${response.errorMessage}`);
    }
  } catch (err) {
    error = err instanceof Error ? err : new Error('Unknown error fetching products');
  }

  if (error) {
    return (

        Failed to load products
        {error.message}

    );
  }

  return (

      Products in Category {categoryId}
      Loading products...}>

          {products.map((product: Product) => (

              {product.name}
              {product.description}
              ${product.price.toFixed(2)}

          ))}



  );
}

// benchmark.mjs (ES module, Node.js 22.6.0)
import { execFileSync, spawn } from 'child_process';
import { writeFileSync } from 'fs';
import { join } from 'path';

// Benchmark configuration
const BENCHMARK_CONFIG = {
  typescriptVersion: '5.6.0',
  flowVersion: '0.230.0',
  reactVersion: '20.0.0',
  codebaseSizeLOC: 500_000,
  warmupRuns: 10,
  timedRuns: 30,
  hardware: 'Apple M3 Max 14-core CPU, 64GB DDR5 RAM, macOS 14.5',
  nodeVersion: process.version,
};

// Helper to run a command and return elapsed time in ms
async function runBenchmark(command, args, label) {
  const start = Date.now();
  return new Promise((resolve, reject) => {
    const proc = spawn(command, args, { stdio: 'pipe' });
    let stderr = '';
    let stdout = '';

    proc.stdout.on('data', (data) => { stdout += data.toString(); });
    proc.stderr.on('data', (data) => { stderr += data.toString(); });

    proc.on('close', (code) => {
      const elapsed = Date.now() - start;
      if (code !== 0) {
        reject(new Error(`Benchmark ${label} failed with code ${code}: ${stderr || stdout}`));
      } else {
        resolve(elapsed);
      }
    });

    proc.on('error', (err) => reject(new Error(`Failed to start ${label}: ${err.message}`)));
  });
}

// Run TypeScript incremental build benchmark
async function benchmarkTypeScript() {
  console.log('Running TypeScript 5.6 incremental build benchmark...');
  const times = [];
  // Warmup runs
  for (let i = 0; i < BENCHMARK_CONFIG.warmupRuns; i++) {
    try {
      execFileSync('tsc', ['--incremental', '--noEmit'], { stdio: 'ignore' });
    } catch (err) {
      console.error('TypeScript warmup failed:', err.message);
      process.exit(1);
    }
  }
  // Timed runs
  for (let i = 0; i < BENCHMARK_CONFIG.timedRuns; i++) {
    try {
      const time = await runBenchmark('tsc', ['--incremental', '--noEmit'], `TypeScript Run ${i + 1}`);
      times.push(time);
    } catch (err) {
      console.error('TypeScript timed run failed:', err.message);
      process.exit(1);
    }
  }
  return times;
}

// Run Flow incremental check benchmark
async function benchmarkFlow() {
  console.log('Running Flow 0.230 incremental check benchmark...');
  const times = [];
  // Warmup runs
  for (let i = 0; i < BENCHMARK_CONFIG.warmupRuns; i++) {
    try {
      execFileSync('flow', ['check', '--include-warnings'], { stdio: 'ignore' });
    } catch (err) {
      console.error('Flow warmup failed:', err.message);
      process.exit(1);
    }
  }
  // Timed runs
  for (let i = 0; i < BENCHMARK_CONFIG.timedRuns; i++) {
    try {
      const time = await runBenchmark('flow', ['check', '--include-warnings'], `Flow Run ${i + 1}`);
      times.push(time);
    } catch (err) {
      console.error('Flow timed run failed:', err.message);
      process.exit(1);
    }
  }
  return times;
}

// Calculate statistics
function calculateStats(times) {
  const sorted = [...times].sort((a, b) => a - b);
  const sum = sorted.reduce((a, b) => a + b, 0);
  return {
    min: sorted[0],
    max: sorted[sorted.length - 1],
    median: sorted[Math.floor(sorted.length / 2)],
    mean: sum / sorted.length,
    stdDev: Math.sqrt(sorted.reduce((sq, n) => sq + Math.pow(n - sum / sorted.length, 2), 0) / sorted.length),
  };
}

// Main execution
async function main() {
  console.log('Starting benchmark with config:', BENCHMARK_CONFIG);
  try {
    const tsTimes = await benchmarkTypeScript();
    const flowTimes = await benchmarkFlow();

    const tsStats = calculateStats(tsTimes);
    const flowStats = calculateStats(flowTimes);

    const report = {
      timestamp: new Date().toISOString(),
      config: BENCHMARK_CONFIG,
      typescript: { times: tsTimes, stats: tsStats },
      flow: { times: flowTimes, stats: flowStats },
      comparison: {
        meanDiffPercent: ((flowStats.mean - tsStats.mean) / tsStats.mean * 100).toFixed(2),
        medianDiffPercent: ((flowStats.median - tsStats.median) / tsStats.median * 100).toFixed(2),
      }
    };

    const reportPath = join(process.cwd(), 'benchmark-report.json');
    writeFileSync(reportPath, JSON.stringify(report, null, 2));
    console.log('Benchmark report written to:', reportPath);
    console.log('TypeScript 5.6 Mean Build Time:', tsStats.mean, 'ms');
    console.log('Flow 0.230 Mean Build Time:', flowStats.mean, 'ms');
    console.log('Flow is', report.comparison.meanDiffPercent, '% slower than TypeScript');
  } catch (err) {
    console.error('Benchmark failed:', err.message);
    process.exit(1);
  }
}

// Run if this is the main module
if (import.meta.url === `file://${process.argv[1]}`) {
  main();
}

// React 20 Button component prop definition with satisfies
import React from 'react';

type ButtonVariant = 'primary' | 'secondary' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg';

const buttonVariants = {
  primary: 'bg-blue-600 text-white',
  secondary: 'bg-gray-200 text-gray-800',
  danger: 'bg-red-600 text-white',
} as const satisfies Record;

const buttonSizes = {
  sm: 'px-2 py-1 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
} as const satisfies Record;

interface ButtonProps {
  variant: ButtonVariant;
  size: ButtonSize;
  onClick: () => void;
  children: React.ReactNode;
}

export function Button({ variant, size, onClick, children }: ButtonProps) {
  return (

      {children}

  );
}

// Legacy React component with Flow 0.230 automatic inference
import React from 'react';

// No type annotations, Flow infers props automatically
export function UserProfile({ user, onEdit }) {
  if (!user) {
    return Loading...;
  }

  return (

      {user.name}
      Email: {user.email}
      Joined: {new Date(user.joinDate).toLocaleDateString()}
       onEdit(user.id)}>Edit Profile

  );
}

// Flow infers that UserProfile props are:
// { user: { name: string, email: string, joinDate: number } | null, onEdit: (id: string) => void }
// If you pass an invalid prop, Flow will throw an error at compile time

// Root tsconfig.json
{
  \"files\": [],
  \"references\": [
    { \"path\": \"./packages/lib\" },
    { \"path\": \"./packages/components\" },
    { \"path\": \"./packages/app\" }
  ]
}

// packages/lib/tsconfig.json
{
  \"compilerOptions\": {
    \"target\": \"ES2024\",
    \"module\": \"ESNext\",
    \"jsx\": \"react-jsx\",
    \"strict\": true,
    \"declaration\": true,
    \"declarationMap\": true,
    \"incremental\": true,
    \"outDir\": \"./dist\"
  },
  \"include\": [\"src/**/*\"]
}

// packages/app/tsconfig.json
{
  \"compilerOptions\": {
    \"target\": \"ES2024\",
    \"module\": \"ESNext\",
    \"jsx\": \"react-jsx\",
    \"strict\": true,
    \"incremental\": true,
    \"outDir\": \"./dist\"
  },
  \"include\": [\"src/**/*\"],
  \"references\": [
    { \"path\": \"../lib\" },
    { \"path\": \"../components\" }
  ]
}