diff --git a/FRONTEND_OPTIMIZATION_ARCHITECTURE.md b/FRONTEND_OPTIMIZATION_ARCHITECTURE.md
new file mode 100644
index 000000000..137b8bf88
--- /dev/null
+++ b/FRONTEND_OPTIMIZATION_ARCHITECTURE.md
@@ -0,0 +1,168 @@
+# Frontend Optimization Architecture
+
+## Overview
+
+React frontend optimization extends Codeflash's existing JS/TS support with
+framework-specific component discovery, React Profiler instrumentation,
+memoization-focused optimization, and render-count-aware acceptance criteria.
+
+## Design Principle
+
+React optimization is a **framework plugin** under JS/TS, not a separate language.
+It reuses the existing tree-sitter parser (JSX/TSX), Jest/Vitest runner, comparator,
+and instrumentation infrastructure. Framework-specific logic is isolated in
+`languages/javascript/frameworks/react/`.
+
+This pattern is designed to be reused for other frontend frameworks (Vue, Angular, Svelte)
+by adding new directories under `languages/javascript/frameworks/<framework>/`.
+
+## Architecture Diagram
+
+    ┌──────────────────────────────────────────────────────────┐
+    │                     CLI Entry Point                       │
+    │  codeflash optimize --file src/components/TaskList.tsx    │
+    └────────────────────────┬─────────────────────────────────┘
+                             │
+                             ▼
+    ┌──────────────────────────────────────────────────────────┐
+    │              Framework Detection (detector.py)            │
+    │  package.json → FrameworkInfo(name="react", version=18)   │
+    └────────────────────────┬─────────────────────────────────┘
+                             │
+                             ▼
+    ┌──────────────────────────────────────────────────────────┐
+    │           Component Discovery (discovery.py)              │
+    │  tree-sitter → ReactComponentInfo[]                       │
+    │  PascalCase + JSX return + hooks → is_react_component     │
+    └────────────────────────┬─────────────────────────────────┘
+                             │
+                             ▼
+    ┌──────────────────────────────────────────────────────────┐
+    │         Context Extraction (context.py + analyzer.py)     │
+    │  Component source + props interface + hooks + parents     │
+    │  + optimization opportunities (missing memo/useMemo)      │
+    └────────────────────────┬─────────────────────────────────┘
+                             │
+              ┌──────────────┴──────────────┐
+              ▼                              ▼
+    ┌───────────────────┐      ┌──────────────────────────────┐
+    │   Test Generation  │      │    Optimization Generation    │
+    │   (testgen.py)     │      │    (aiservice + react prompts)│
+    │                    │      │                                │
+    │  React Testing     │      │  React.memo wrapping          │
+    │  Library tests     │      │  useMemo for computations     │
+    │  + re-render       │      │  useCallback for handlers     │
+    │  counting tests    │      │  Inline object elimination    │
+    └────────┬──────────┘      └──────────────┬───────────────┘
+              │                                │
+              └──────────────┬─────────────────┘
+                             ▼
+    ┌──────────────────────────────────────────────────────────┐
+    │           Verification (existing Jest/Vitest runner)       │
+    │  Run existing + generated tests on original AND candidate  │
+    │  compare_test_results() → behavioral equivalence           │
+    └────────────────────────┬─────────────────────────────────┘
+                             │
+                             ▼
+    ┌──────────────────────────────────────────────────────────┐
+    │         React Benchmarking (profiler.py + benchmarking.py)│
+    │  React Profiler instrumentation → render count + duration  │
+    │  Parse !######REACT_RENDER:...######! markers              │
+    │  Compare original vs optimized render profiles             │
+    └────────────────────────┬─────────────────────────────────┘
+                             │
+                             ▼
+    ┌──────────────────────────────────────────────────────────┐
+    │              Critic (render_efficiency_critic)             │
+    │  Accept if: render_count reduced >= 20%                   │
+    │         OR: render_duration reduced >= threshold           │
+    │        AND: all tests pass (behavioral equivalence)        │
+    └────────────────────────┬─────────────────────────────────┘
+                             │
+                             ▼
+    ┌──────────────────────────────────────────────────────────┐
+    │                    PR Creation                             │
+    │  "Reduced re-renders from 47 → 3 (93.6% fewer)"          │
+    │  "Render time: 340ms → 12ms (28x faster)"                 │
+    │  Includes generated tests + optimized component code       │
+    └──────────────────────────────────────────────────────────┘
+
+## File Structure
+
+    languages/javascript/
+    ├── support.py                    # Delegates to react/ when framework detected
+    ├── treesitter.py                 # Reused — already handles JSX/TSX
+    ├── test_runner.py                # Reused — runs Jest/Vitest
+    ├── comparator.py                 # Reused — compares test results
+    ├── instrument.py                 # Reused — capturePerf wrapping
+    ├── parse.py                      # Extended — parse REACT_RENDER markers
+    ├── frameworks/
+    │   ├── __init__.py
+    │   ├── detector.py               # Detect React from package.json
+    │   └── react/
+    │       ├── __init__.py
+    │       ├── discovery.py          # Find React components via tree-sitter
+    │       ├── analyzer.py           # Detect optimization opportunities
+    │       ├── profiler.py           # React Profiler instrumentation
+    │       ├── context.py            # Component context extraction
+    │       ├── benchmarking.py       # Render count/duration comparison
+    │       └── testgen.py            # React Testing Library test helpers
+
+## Verification Model
+
+React optimization uses the SAME verification guarantees as code optimization:
+
+    ┌─────────────────────────────────────────────────┐
+    │           Behavioral Equivalence                 │
+    │                                                   │
+    │  For each test invocation:                        │
+    │    original.did_pass == candidate.did_pass        │
+    │    original.return_value ≡ candidate.return_value │
+    │    original.stdout ≡ candidate.stdout             │
+    │                                                   │
+    │  PLUS for React:                                  │
+    │    candidate.render_count <= original.render_count │
+    │    candidate.render_duration < original.render_duration │
+    └─────────────────────────────────────────────────┘
+
+## Optimization Patterns (Tier 1)
+
+| Pattern | Detection | Optimization | Verification |
+|---------|-----------|-------------|--------------|
+| Missing React.memo | Component not wrapped + receives stable props | Wrap with React.memo() | Same render output, fewer renders |
+| Missing useMemo | Array .filter/.sort/.map in render body | Wrap computation in useMemo() | Same computed result, fewer executions |
+| Missing useCallback | Function defined in render, passed as prop | Wrap with useCallback() | Same behavior, stable reference |
+| Inline object props | Object literal in JSX prop position | Extract to useMemo or module constant | Same prop values, stable reference |
+
+## Extending to Other Frameworks
+
+To add support for a new framework (e.g., Vue):
+
+1. Create `languages/javascript/frameworks/vue/` directory
+2. Add discovery module: detect Vue SFCs (`.vue` files), `<script setup>`, composition API
+3. Add analyzer module: detect reactivity patterns (missing `computed()`, inline watchers)
+4. Add context module: extract component props, emits, slots, composables
+5. Add profiler module: instrument with Vue Devtools performance API
+6. Add benchmarking module: compare reactive dependency tracking counts
+7. Update `detector.py` to detect Vue from `package.json`
+8. Add backend prompts in `django/aiservice/core/languages/js_ts/prompts/vue_optimizer/`
+
+The framework detection → discovery → context → optimize → verify → benchmark pipeline
+is shared infrastructure. Only the framework-specific detection and analysis differ.
+
+## Test Project
+
+A comprehensive React test project lives at `code_to_optimize/js/code_to_optimize_react/`
+with components that exercise each optimization pattern:
+
+| Component | Optimization Patterns |
+|-----------|----------------------|
+| TaskBoard | useMemo, useCallback, inline styles, React.memo |
+| DataGrid | useMemo (aggregations, pagination), useCallback, inline styles |
+| SearchableList | Unstable references defeating memo'd children, useMemo |
+| FormWithValidation | useMemo (validation), useCallback (handlers), regex caching |
+| VirtualizedTree | useMemo (tree flattening, search), useCallback |
+| OptimizedCounter | Already optimized — should be skipped |
+| ServerDashboard | Server Component — should be skipped |
+| useFilteredData | Hook returning unstable object reference |
+| useDebounce | Standard hook — should be detected as hook, not component |
diff --git a/code_to_optimize/js/code_to_optimize_react/codeflash.yaml b/code_to_optimize/js/code_to_optimize_react/codeflash.yaml
new file mode 100644
index 000000000..15629fc14
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/codeflash.yaml
@@ -0,0 +1,4 @@
+language: typescript
+module_root: .
+tests_root: tests
+test_framework: jest
diff --git a/code_to_optimize/js/code_to_optimize_react/jest.config.ts b/code_to_optimize/js/code_to_optimize_react/jest.config.ts
new file mode 100644
index 000000000..1e0fe6ad9
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/jest.config.ts
@@ -0,0 +1,38 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testMatch: [
+    '**/tests/**/*.test.ts',
+    '**/tests/**/*.test.tsx',
+    '**/tests/**/*.spec.tsx'
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  setupFilesAfterSetup: ['@testing-library/jest-dom'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!**/node_modules/**',
+    '!**/dist/**',
+    '!jest.config.ts'
+  ],
+  reporters: [
+    'default',
+    [
+      'jest-junit',
+      {
+        outputDirectory: '.codeflash',
+        outputName: 'jest-results.xml',
+        includeConsoleOutput: true
+      }
+    ]
+  ],
+  transform: {
+    '^.+\\.tsx?$': ['ts-jest', {
+      useESM: false,
+      tsconfig: 'tsconfig.json'
+    }]
+  }
+};
+
+export default config;
diff --git a/code_to_optimize/js/code_to_optimize_react/package.json b/code_to_optimize/js/code_to_optimize_react/package.json
new file mode 100644
index 000000000..98ff89c57
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "codeflash-react-test",
+  "version": "1.0.0",
+  "description": "Sample React TypeScript project for codeflash optimization testing",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "build": "tsc"
+  },
+  "codeflash": {
+    "moduleRoot": ".",
+    "testsRoot": "tests"
+  },
+  "keywords": [
+    "codeflash",
+    "optimization",
+    "testing",
+    "react",
+    "typescript"
+  ],
+  "author": "CodeFlash Inc.",
+  "license": "BSL 1.1",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "codeflash": "file:../../../packages/codeflash",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
+    "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.0.0"
+  }
+}
diff --git a/code_to_optimize/js/code_to_optimize_react/src/components/DataGrid.tsx b/code_to_optimize/js/code_to_optimize_react/src/components/DataGrid.tsx
new file mode 100644
index 000000000..05c554a67
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/src/components/DataGrid.tsx
@@ -0,0 +1,276 @@
+/**
+ * DataGrid component - demonstrates expensive computation patterns.
+ *
+ * Intentionally inefficient patterns:
+ * - Multiple expensive .filter/.sort/.map/.reduce chains on every render
+ * - Derived state computed inline without useMemo
+ * - No React.memo wrapping
+ * - Inline functions in event handlers without useCallback
+ *
+ * Simulates a data-heavy dashboard grid that becomes slow with large datasets.
+ */
+import React, { useState } from 'react';
+
+export interface DataRow {
+  id: number;
+  name: string;
+  category: string;
+  value: number;
+  date: string;
+  isActive: boolean;
+  tags: string[];
+  metadata: Record<string, string>;
+}
+
+interface ColumnConfig {
+  key: keyof DataRow;
+  label: string;
+  sortable: boolean;
+  filterable: boolean;
+  width?: number;
+}
+
+interface DataGridProps {
+  rows: DataRow[];
+  columns: ColumnConfig[];
+  pageSize: number;
+  onRowSelect: (row: DataRow) => void;
+  onBulkAction: (ids: number[], action: string) => void;
+}
+
+type SortDirection = 'asc' | 'desc';
+
+/**
+ * Data grid with filtering, sorting, pagination, and aggregation.
+ * Every derived value is computed inline — prime target for useMemo optimization.
+ */
+export function DataGrid({ rows, columns, pageSize, onRowSelect, onBulkAction }: DataGridProps) {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [sortColumn, setSortColumn] = useState<keyof DataRow>('name');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
+
+  // Inefficient: expensive filter runs every render
+  const filteredRows = rows.filter(row => {
+    return Object.entries(filters).every(([key, filterValue]) => {
+      if (!filterValue) return true;
+      const cellValue = String(row[key as keyof DataRow]).toLowerCase();
+      return cellValue.includes(filterValue.toLowerCase());
+    });
+  });
+
+  // Inefficient: expensive sort runs every render
+  const sortedRows = [...filteredRows].sort((a, b) => {
+    const aVal = a[sortColumn];
+    const bVal = b[sortColumn];
+    const direction = sortDirection === 'asc' ? 1 : -1;
+
+    if (typeof aVal === 'string' && typeof bVal === 'string') {
+      return aVal.localeCompare(bVal) * direction;
+    }
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+      return (aVal - bVal) * direction;
+    }
+    return 0;
+  });
+
+  // Inefficient: pagination computed every render
+  const totalPages = Math.ceil(sortedRows.length / pageSize);
+  const paginatedRows = sortedRows.slice(
+    currentPage * pageSize,
+    (currentPage + 1) * pageSize,
+  );
+
+  // Inefficient: aggregation computed every render
+  const aggregations = {
+    totalCount: filteredRows.length,
+    activeCount: filteredRows.filter(r => r.isActive).length,
+    totalValue: filteredRows.reduce((sum, r) => sum + r.value, 0),
+    avgValue: filteredRows.length > 0
+      ? filteredRows.reduce((sum, r) => sum + r.value, 0) / filteredRows.length
+      : 0,
+    categoryBreakdown: filteredRows.reduce(
+      (acc, r) => {
+        acc[r.category] = (acc[r.category] || 0) + 1;
+        return acc;
+      },
+      {} as Record<string, number>,
+    ),
+    topCategories: Object.entries(
+      filteredRows.reduce(
+        (acc, r) => {
+          acc[r.category] = (acc[r.category] || 0) + r.value;
+          return acc;
+        },
+        {} as Record<string, number>,
+      ),
+    )
+      .sort(([, a], [, b]) => b - a)
+      .slice(0, 5),
+    uniqueTags: Array.from(new Set(filteredRows.flatMap(r => r.tags))).sort(),
+  };
+
+  // Inefficient: function recreated every render
+  const handleSort = (column: keyof DataRow) => {
+    if (sortColumn === column) {
+      setSortDirection(d => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  // Inefficient: function recreated every render
+  const handleFilterChange = (column: string, value: string) => {
+    setFilters(prev => ({ ...prev, [column]: value }));
+    setCurrentPage(0);
+  };
+
+  // Inefficient: function recreated every render
+  const toggleRowSelection = (id: number) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  // Inefficient: function recreated every render
+  const toggleSelectAll = () => {
+    if (selectedIds.size === paginatedRows.length) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(paginatedRows.map(r => r.id)));
+    }
+  };
+
+  return (
+    <div>
+      {/* Inefficient: inline style */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px' }}>
+        <span>
+          {aggregations.totalCount} rows | {aggregations.activeCount} active |
+          Total value: ${aggregations.totalValue.toFixed(2)} |
+          Avg: ${aggregations.avgValue.toFixed(2)}
+        </span>
+        {selectedIds.size > 0 && (
+          <div style={{ display: 'flex', gap: '4px' }}>
+            <button onClick={() => onBulkAction(Array.from(selectedIds), 'archive')}>
+              Archive ({selectedIds.size})
+            </button>
+            <button onClick={() => onBulkAction(Array.from(selectedIds), 'delete')}>
+              Delete ({selectedIds.size})
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Inefficient: inline style */}
+      <div style={{ padding: '4px 8px', fontSize: '12px', color: '#666' }}>
+        Top categories: {aggregations.topCategories.map(([cat, val]) => `${cat}: $${val}`).join(', ')}
+        {' | '}
+        Tags: {aggregations.uniqueTags.slice(0, 10).join(', ')}
+        {aggregations.uniqueTags.length > 10 && ` +${aggregations.uniqueTags.length - 10} more`}
+      </div>
+
+      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <thead>
+          <tr>
+            <th>
+              <input
+                type="checkbox"
+                checked={selectedIds.size === paginatedRows.length && paginatedRows.length > 0}
+                onChange={toggleSelectAll}
+              />
+            </th>
+            {columns.map(col => (
+              <th
+                key={String(col.key)}
+                style={{ width: col.width, cursor: col.sortable ? 'pointer' : 'default' }}
+                onClick={() => col.sortable && handleSort(col.key)}
+              >
+                {col.label}
+                {sortColumn === col.key && (sortDirection === 'asc' ? ' ▲' : ' ▼')}
+              </th>
+            ))}
+          </tr>
+          <tr>
+            <th />
+            {columns.map(col => (
+              <th key={`filter-${String(col.key)}`}>
+                {col.filterable && (
+                  <input
+                    type="text"
+                    placeholder={`Filter ${col.label}...`}
+                    value={filters[String(col.key)] || ''}
+                    onChange={e => handleFilterChange(String(col.key), e.target.value)}
+                    style={{ width: '100%', fontSize: '11px' }}
+                  />
+                )}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {paginatedRows.map(row => (
+            <tr
+              key={row.id}
+              onClick={() => onRowSelect(row)}
+              style={{
+                cursor: 'pointer',
+                background: selectedIds.has(row.id) ? '#e3f2fd' : 'transparent',
+                opacity: row.isActive ? 1 : 0.5,
+              }}
+            >
+              <td>
+                <input
+                  type="checkbox"
+                  checked={selectedIds.has(row.id)}
+                  onChange={() => toggleRowSelection(row.id)}
+                  onClick={e => e.stopPropagation()}
+                />
+              </td>
+              {columns.map(col => (
+                <td key={`${row.id}-${String(col.key)}`}>
+                  {Array.isArray(row[col.key])
+                    ? (row[col.key] as string[]).join(', ')
+                    : String(row[col.key])}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {/* Inefficient: inline style */}
+      <div style={{ display: 'flex', justifyContent: 'center', gap: '4px', padding: '8px' }}>
+        <button disabled={currentPage === 0} onClick={() => setCurrentPage(0)}>
+          First
+        </button>
+        <button disabled={currentPage === 0} onClick={() => setCurrentPage(p => p - 1)}>
+          Prev
+        </button>
+        <span>
+          Page {currentPage + 1} of {totalPages}
+        </span>
+        <button
+          disabled={currentPage >= totalPages - 1}
+          onClick={() => setCurrentPage(p => p + 1)}
+        >
+          Next
+        </button>
+        <button
+          disabled={currentPage >= totalPages - 1}
+          onClick={() => setCurrentPage(totalPages - 1)}
+        >
+          Last
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/code_to_optimize/js/code_to_optimize_react/src/components/FormWithValidation.tsx b/code_to_optimize/js/code_to_optimize_react/src/components/FormWithValidation.tsx
new file mode 100644
index 000000000..b39cfae93
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/src/components/FormWithValidation.tsx
@@ -0,0 +1,242 @@
+/**
+ * FormWithValidation component - demonstrates expensive validation patterns.
+ *
+ * Intentionally inefficient patterns:
+ * - Inline validation functions recreated every render
+ * - Validation results computed without memoization
+ * - Inline style objects
+ * - No useCallback for handlers
+ * - Inefficient regex recompilation (not cached outside render)
+ *
+ * Common in enterprise forms where every keystroke triggers full re-validation.
+ */
+import React, { useState } from 'react';
+
+interface FormField {
+  name: string;
+  label: string;
+  type: 'text' | 'email' | 'number' | 'password' | 'textarea';
+  required: boolean;
+  minLength?: number;
+  maxLength?: number;
+  min?: number;
+  max?: number;
+  pattern?: string;
+  customValidator?: (value: string, allValues: Record<string, string>) => string | null;
+}
+
+interface FormWithValidationProps {
+  fields: FormField[];
+  onSubmit: (values: Record<string, string>) => void;
+  onChange?: (field: string, value: string) => void;
+  initialValues?: Record<string, string>;
+  submitLabel?: string;
+}
+
+/**
+ * Form component that validates all fields on every keystroke.
+ * Validation is intentionally done inline without memoization.
+ */
+export function FormWithValidation({
+  fields,
+  onSubmit,
+  onChange,
+  initialValues = {},
+  submitLabel = 'Submit',
+}: FormWithValidationProps) {
+  const [values, setValues] = useState<Record<string, string>>(initialValues);
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const [submitted, setSubmitted] = useState(false);
+
+  // Inefficient: entire validation runs on every render for all fields
+  const errors: Record<string, string[]> = {};
+  for (const field of fields) {
+    const value = values[field.name] || '';
+    const fieldErrors: string[] = [];
+
+    if (field.required && !value.trim()) {
+      fieldErrors.push(`${field.label} is required`);
+    }
+
+    if (value && field.minLength && value.length < field.minLength) {
+      fieldErrors.push(`${field.label} must be at least ${field.minLength} characters`);
+    }
+
+    if (value && field.maxLength && value.length > field.maxLength) {
+      fieldErrors.push(`${field.label} must be at most ${field.maxLength} characters`);
+    }
+
+    if (value && field.type === 'number') {
+      const numVal = Number(value);
+      if (isNaN(numVal)) {
+        fieldErrors.push(`${field.label} must be a number`);
+      } else {
+        if (field.min !== undefined && numVal < field.min) {
+          fieldErrors.push(`${field.label} must be at least ${field.min}`);
+        }
+        if (field.max !== undefined && numVal > field.max) {
+          fieldErrors.push(`${field.label} must be at most ${field.max}`);
+        }
+      }
+    }
+
+    if (value && field.type === 'email') {
+      // Inefficient: regex compiled on every render instead of being a constant
+      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+      if (!emailRegex.test(value)) {
+        fieldErrors.push(`${field.label} must be a valid email address`);
+      }
+    }
+
+    if (value && field.type === 'password') {
+      // Inefficient: all these regexes compiled on every render
+      if (!/[A-Z]/.test(value)) fieldErrors.push('Must contain an uppercase letter');
+      if (!/[a-z]/.test(value)) fieldErrors.push('Must contain a lowercase letter');
+      if (!/[0-9]/.test(value)) fieldErrors.push('Must contain a number');
+      if (!/[!@#$%^&*]/.test(value)) fieldErrors.push('Must contain a special character');
+    }
+
+    if (value && field.pattern) {
+      // Inefficient: regex compiled from string on every render
+      const patternRegex = new RegExp(field.pattern);
+      if (!patternRegex.test(value)) {
+        fieldErrors.push(`${field.label} format is invalid`);
+      }
+    }
+
+    if (field.customValidator) {
+      const customError = field.customValidator(value, values);
+      if (customError) {
+        fieldErrors.push(customError);
+      }
+    }
+
+    if (fieldErrors.length > 0) {
+      errors[field.name] = fieldErrors;
+    }
+  }
+
+  // Inefficient: computed every render
+  const hasErrors = Object.keys(errors).length > 0;
+  const errorCount = Object.values(errors).reduce((sum, errs) => sum + errs.length, 0);
+  const completedFields = fields.filter(f => {
+    const val = values[f.name] || '';
+    return val.trim().length > 0 && !errors[f.name];
+  }).length;
+  const progress = fields.length > 0 ? (completedFields / fields.length) * 100 : 0;
+
+  // Inefficient: function recreated every render
+  const handleChange = (fieldName: string, value: string) => {
+    setValues(prev => ({ ...prev, [fieldName]: value }));
+    onChange?.(fieldName, value);
+  };
+
+  // Inefficient: function recreated every render
+  const handleBlur = (fieldName: string) => {
+    setTouched(prev => ({ ...prev, [fieldName]: true }));
+  };
+
+  // Inefficient: function recreated every render
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitted(true);
+    setTouched(
+      fields.reduce(
+        (acc, f) => ({ ...acc, [f.name]: true }),
+        {} as Record<string, boolean>,
+      ),
+    );
+    if (!hasErrors) {
+      onSubmit(values);
+    }
+  };
+
+  const shouldShowError = (fieldName: string) =>
+    (touched[fieldName] || submitted) && errors[fieldName];
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* Inefficient: inline style */}
+      <div style={{ marginBottom: '16px' }}>
+        <div
+          style={{
+            height: '4px',
+            background: '#e0e0e0',
+            borderRadius: '2px',
+            overflow: 'hidden',
+          }}
+        >
+          <div
+            style={{
+              height: '100%',
+              width: `${progress}%`,
+              background: hasErrors ? '#f44336' : '#4caf50',
+              transition: 'width 0.3s',
+            }}
+          />
+        </div>
+        <small style={{ color: '#666' }}>
+          {completedFields} of {fields.length} fields completed
+          {errorCount > 0 && ` (${errorCount} errors)`}
+        </small>
+      </div>
+
+      {fields.map(field => (
+        <div key={field.name} style={{ marginBottom: '12px' }}>
+          <label style={{ display: 'block', fontWeight: 'bold', marginBottom: '4px' }}>
+            {field.label}
+            {field.required && <span style={{ color: 'red' }}> *</span>}
+          </label>
+          {field.type === 'textarea' ? (
+            <textarea
+              value={values[field.name] || ''}
+              onChange={e => handleChange(field.name, e.target.value)}
+              onBlur={() => handleBlur(field.name)}
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: `1px solid ${shouldShowError(field.name) ? 'red' : '#ccc'}`,
+                borderRadius: '4px',
+              }}
+            />
+          ) : (
+            <input
+              type={field.type === 'password' ? 'password' : 'text'}
+              value={values[field.name] || ''}
+              onChange={e => handleChange(field.name, e.target.value)}
+              onBlur={() => handleBlur(field.name)}
+              style={{
+                width: '100%',
+                padding: '8px',
+                border: `1px solid ${shouldShowError(field.name) ? 'red' : '#ccc'}`,
+                borderRadius: '4px',
+              }}
+            />
+          )}
+          {shouldShowError(field.name) && (
+            <ul style={{ color: 'red', fontSize: '12px', margin: '4px 0 0', padding: '0 0 0 16px' }}>
+              {errors[field.name].map((err, i) => (
+                <li key={i}>{err}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ))}
+
+      <button
+        type="submit"
+        disabled={submitted && hasErrors}
+        style={{
+          padding: '10px 24px',
+          background: hasErrors && submitted ? '#ccc' : '#1976d2',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: hasErrors && submitted ? 'not-allowed' : 'pointer',
+        }}
+      >
+        {submitLabel}
+      </button>
+    </form>
+  );
+}
diff --git a/code_to_optimize/js/code_to_optimize_react/src/components/OptimizedCounter.tsx b/code_to_optimize/js/code_to_optimize_react/src/components/OptimizedCounter.tsx
new file mode 100644
index 000000000..5ee1927d2
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/src/components/OptimizedCounter.tsx
@@ -0,0 +1,60 @@
+/**
+ * OptimizedCounter component - already properly optimized.
+ *
+ * This component correctly uses:
+ * - React.memo wrapping
+ * - useCallback for handlers
+ * - useMemo for computed values
+ *
+ * The optimizer should detect this is already optimized and skip it
+ * (or produce minimal/no changes).
+ */
+import React, { useState, useCallback, useMemo, memo } from 'react';
+
+interface CounterProps {
+  initialCount: number;
+  step: number;
+  label: string;
+  max?: number;
+  min?: number;
+}
+
+export const OptimizedCounter = memo(function OptimizedCounter({
+  initialCount,
+  step,
+  label,
+  max = Infinity,
+  min = -Infinity,
+}: CounterProps) {
+  const [count, setCount] = useState(initialCount);
+
+  const increment = useCallback(() => {
+    setCount(c => Math.min(c + step, max));
+  }, [step, max]);
+
+  const decrement = useCallback(() => {
+    setCount(c => Math.max(c - step, min));
+  }, [step, min]);
+
+  const reset = useCallback(() => {
+    setCount(initialCount);
+  }, [initialCount]);
+
+  const displayValue = useMemo(() => {
+    if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`;
+    if (count >= 1_000) return `${(count / 1_000).toFixed(1)}K`;
+    return String(count);
+  }, [count]);
+
+  const isAtMax = useMemo(() => count >= max, [count, max]);
+  const isAtMin = useMemo(() => count <= min, [count, min]);
+
+  return (
+    <div>
+      <span>{label}: {displayValue}</span>
+      <button onClick={decrement} disabled={isAtMin}>-{step}</button>
+      <button onClick={increment} disabled={isAtMax}>+{step}</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+});
diff --git a/code_to_optimize/js/code_to_optimize_react/src/components/SearchableList.tsx b/code_to_optimize/js/code_to_optimize_react/src/components/SearchableList.tsx
new file mode 100644
index 000000000..db824dd51
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/src/components/SearchableList.tsx
@@ -0,0 +1,178 @@
+/**
+ * SearchableList component - demonstrates referential instability patterns.
+ *
+ * Intentionally inefficient patterns:
+ * - Inline function props passed to memoized children (breaks memo)
+ * - Inline object props creating new references on every render
+ * - Derived data (search, sort, group) recomputed without memoization
+ * - Component not wrapped in React.memo
+ *
+ * This is a common pattern in codebases where developers wrap children in memo()
+ * but forget to stabilize the parent's prop references, negating the benefit.
+ */
+import React, { useState, memo } from 'react';
+
+export interface ListItem {
+  id: number;
+  label: string;
+  category: string;
+  timestamp: number;
+  score: number;
+  isFavorite: boolean;
+}
+
+interface ListItemCardProps {
+  item: ListItem;
+  onToggleFavorite: (id: number) => void;
+  onDelete: (id: number) => void;
+  style: React.CSSProperties;
+  isHighlighted: boolean;
+}
+
+/**
+ * Memoized child component — but parent passes unstable references,
+ * so React.memo never actually prevents re-renders.
+ */
+export const ListItemCard = memo(function ListItemCard({
+  item,
+  onToggleFavorite,
+  onDelete,
+  style,
+  isHighlighted,
+}: ListItemCardProps) {
+  return (
+    <div style={style}>
+      <span style={{ fontWeight: isHighlighted ? 'bold' : 'normal' }}>
+        {item.label}
+      </span>
+      <span> [{item.category}]</span>
+      <span> Score: {item.score}</span>
+      <button onClick={() => onToggleFavorite(item.id)}>
+        {item.isFavorite ? '★' : '☆'}
+      </button>
+      <button onClick={() => onDelete(item.id)}>×</button>
+    </div>
+  );
+});
+
+interface SearchableListProps {
+  items: ListItem[];
+  onToggleFavorite: (id: number) => void;
+  onDelete: (id: number) => void;
+  highlightedIds: number[];
+}
+
+/**
+ * Parent component that defeats child memoization by passing unstable references.
+ */
+export function SearchableList({
+  items,
+  onToggleFavorite,
+  onDelete,
+  highlightedIds,
+}: SearchableListProps) {
+  const [query, setQuery] = useState('');
+  const [sortBy, setSortBy] = useState<'label' | 'score' | 'timestamp'>('label');
+  const [showFavoritesOnly, setShowFavoritesOnly] = useState(false);
+
+  // Inefficient: expensive pipeline recomputed every render
+  const processedItems = items
+    .filter(item => {
+      if (showFavoritesOnly && !item.isFavorite) return false;
+      if (query) {
+        return (
+          item.label.toLowerCase().includes(query.toLowerCase()) ||
+          item.category.toLowerCase().includes(query.toLowerCase())
+        );
+      }
+      return true;
+    })
+    .sort((a, b) => {
+      if (sortBy === 'label') return a.label.localeCompare(b.label);
+      if (sortBy === 'score') return b.score - a.score;
+      return b.timestamp - a.timestamp;
+    });
+
+  // Inefficient: grouping computed every render
+  const categoryGroups = processedItems.reduce(
+    (groups, item) => {
+      const group = groups[item.category] || [];
+      group.push(item);
+      groups[item.category] = group;
+      return groups;
+    },
+    {} as Record<string, ListItem[]>,
+  );
+
+  // Inefficient: stats computed every render
+  const stats = {
+    total: processedItems.length,
+    favorites: processedItems.filter(i => i.isFavorite).length,
+    avgScore:
+      processedItems.length > 0
+        ? processedItems.reduce((sum, i) => sum + i.score, 0) / processedItems.length
+        : 0,
+    categories: Object.keys(categoryGroups).length,
+  };
+
+  // Inefficient: creates Set on every render
+  const highlightedSet = new Set(highlightedIds);
+
+  return (
+    <div>
+      {/* Inefficient: inline style */}
+      <div style={{ padding: '8px', display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <input
+          type="text"
+          placeholder="Search..."
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+        />
+        <select value={sortBy} onChange={e => setSortBy(e.target.value as typeof sortBy)}>
+          <option value="label">By Name</option>
+          <option value="score">By Score</option>
+          <option value="timestamp">By Date</option>
+        </select>
+        <label>
+          <input
+            type="checkbox"
+            checked={showFavoritesOnly}
+            onChange={e => setShowFavoritesOnly(e.target.checked)}
+          />
+          Favorites only
+        </label>
+      </div>
+
+      {/* Inefficient: inline style */}
+      <div style={{ padding: '4px 8px', fontSize: '12px', color: '#666' }}>
+        {stats.total} items | {stats.favorites} favorites |
+        Avg score: {stats.avgScore.toFixed(1)} | {stats.categories} categories
+      </div>
+
+      {Object.entries(categoryGroups).map(([category, categoryItems]) => (
+        <div key={category}>
+          <h3 style={{ margin: '8px 0 4px', fontSize: '14px' }}>
+            {category} ({categoryItems.length})
+          </h3>
+          {categoryItems.map(item => (
+            <ListItemCard
+              key={item.id}
+              item={item}
+              // Inefficient: inline function creates new reference every render
+              // This defeats the React.memo on ListItemCard
+              onToggleFavorite={(id) => onToggleFavorite(id)}
+              onDelete={(id) => onDelete(id)}
+              // Inefficient: inline object creates new reference every render
+              style={{
+                padding: '4px 8px',
+                borderBottom: '1px solid #eee',
+                background: highlightedSet.has(item.id) ? '#fff3e0' : 'white',
+              }}
+              isHighlighted={highlightedSet.has(item.id)}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/code_to_optimize/js/code_to_optimize_react/src/components/ServerDashboard.tsx b/code_to_optimize/js/code_to_optimize_react/src/components/ServerDashboard.tsx
new file mode 100644
index 000000000..604b9d725
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/src/components/ServerDashboard.tsx
@@ -0,0 +1,31 @@
+"use server";
+
+/**
+ * ServerDashboard - a Server Component that should be SKIPPED by the optimizer.
+ *
+ * Server Components (marked with "use server") run on the server and
+ * don't have client-side rendering concerns like re-renders.
+ * The optimizer should detect the directive and skip this file entirely.
+ */
+
+interface DashboardData {
+  totalUsers: number;
+  activeUsers: number;
+  revenue: number;
+}
+
+export async function ServerDashboard({ orgId }: { orgId: string }) {
+  const response = await fetch(`/api/dashboard/${orgId}`);
+  const data: DashboardData = await response.json();
+
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <div>
+        <p>Total Users: {data.totalUsers}</p>
+        <p>Active Users: {data.activeUsers}</p>
+        <p>Revenue: ${data.revenue.toFixed(2)}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/code_to_optimize/js/code_to_optimize_react/src/components/TaskBoard.tsx b/code_to_optimize/js/code_to_optimize_react/src/components/TaskBoard.tsx
new file mode 100644
index 000000000..e8cd9ad95
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/src/components/TaskBoard.tsx
@@ -0,0 +1,254 @@
+/**
+ * TaskBoard component - demonstrates multiple React optimization opportunities.
+ *
+ * Intentionally inefficient patterns:
+ * - Inline object/array literals in JSX props (new reference every render)
+ * - Functions defined in render body without useCallback
+ * - Expensive .filter/.sort/.reduce without useMemo
+ * - Component not wrapped in React.memo
+ *
+ * These patterns cause unnecessary re-renders in child components when TaskBoard's
+ * parent re-renders, even if TaskBoard's props haven't changed.
+ */
+import React, { useState } from 'react';
+
+export interface Task {
+  id: number;
+  title: string;
+  description: string;
+  status: 'todo' | 'in-progress' | 'done';
+  priority: 'low' | 'medium' | 'high' | 'critical';
+  assignee: string;
+  tags: string[];
+  createdAt: number;
+  updatedAt: number;
+}
+
+interface TaskBoardProps {
+  tasks: Task[];
+  onTaskUpdate: (id: number, updates: Partial<Task>) => void;
+  onTaskDelete: (id: number) => void;
+  onTaskCreate: (task: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>) => void;
+  currentUser: string;
+}
+
+const PRIORITY_ORDER = { critical: 0, high: 1, medium: 2, low: 3 };
+
+/**
+ * Main task board component with filtering, sorting, and grouping.
+ * Contains multiple optimization opportunities for codeflash to detect and fix.
+ */
+export function TaskBoard({
+  tasks,
+  onTaskUpdate,
+  onTaskDelete,
+  onTaskCreate,
+  currentUser,
+}: TaskBoardProps) {
+  const [filterStatus, setFilterStatus] = useState<Task['status'] | 'all'>('all');
+  const [filterAssignee, setFilterAssignee] = useState<string>('all');
+  const [sortBy, setSortBy] = useState<'priority' | 'title' | 'createdAt'>('priority');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Inefficient: runs on every render, should use useMemo
+  const filteredTasks = tasks.filter(task => {
+    if (filterStatus !== 'all' && task.status !== filterStatus) return false;
+    if (filterAssignee !== 'all' && task.assignee !== filterAssignee) return false;
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      return (
+        task.title.toLowerCase().includes(query) ||
+        task.description.toLowerCase().includes(query) ||
+        task.tags.some(tag => tag.toLowerCase().includes(query))
+      );
+    }
+    return true;
+  });
+
+  // Inefficient: runs on every render, should use useMemo
+  const sortedTasks = filteredTasks.sort((a, b) => {
+    if (sortBy === 'priority') {
+      return PRIORITY_ORDER[a.priority] - PRIORITY_ORDER[b.priority];
+    }
+    if (sortBy === 'title') {
+      return a.title.localeCompare(b.title);
+    }
+    return b.createdAt - a.createdAt;
+  });
+
+  // Inefficient: expensive grouping runs on every render, should use useMemo
+  const groupedTasks = sortedTasks.reduce(
+    (groups, task) => {
+      const group = groups[task.status] || [];
+      group.push(task);
+      groups[task.status] = group;
+      return groups;
+    },
+    {} as Record<Task['status'], Task[]>,
+  );
+
+  // Inefficient: computed on every render, should use useMemo
+  const uniqueAssignees = Array.from(new Set(tasks.map(t => t.assignee))).sort();
+
+  // Inefficient: computed on every render, should use useMemo
+  const stats = {
+    total: tasks.length,
+    todo: tasks.filter(t => t.status === 'todo').length,
+    inProgress: tasks.filter(t => t.status === 'in-progress').length,
+    done: tasks.filter(t => t.status === 'done').length,
+    myTasks: tasks.filter(t => t.assignee === currentUser).length,
+    critical: tasks.filter(t => t.priority === 'critical' && t.status !== 'done').length,
+  };
+
+  // Inefficient: function created on every render, should use useCallback
+  const handleStatusChange = (taskId: number, newStatus: Task['status']) => {
+    onTaskUpdate(taskId, { status: newStatus, updatedAt: Date.now() });
+  };
+
+  // Inefficient: function created on every render, should use useCallback
+  const handlePriorityChange = (taskId: number, newPriority: Task['priority']) => {
+    onTaskUpdate(taskId, { priority: newPriority, updatedAt: Date.now() });
+  };
+
+  // Inefficient: function created on every render, should use useCallback
+  const handleDelete = (taskId: number) => {
+    onTaskDelete(taskId);
+  };
+
+  // Inefficient: function created on every render, should use useCallback
+  const handleQuickCreate = () => {
+    onTaskCreate({
+      title: 'New Task',
+      description: '',
+      status: 'todo',
+      priority: 'medium',
+      assignee: currentUser,
+      tags: [],
+    });
+  };
+
+  return (
+    <div>
+      {/* Inefficient: inline style object creates new reference every render */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '16px' }}>
+        <h1>Task Board</h1>
+        <button onClick={handleQuickCreate}>+ New Task</button>
+      </div>
+
+      {/* Inefficient: inline style object */}
+      <div style={{ display: 'flex', gap: '8px', padding: '0 16px', flexWrap: 'wrap' }}>
+        <span>Status: {stats.todo} todo, {stats.inProgress} in progress, {stats.done} done</span>
+        <span>| My tasks: {stats.myTasks}</span>
+        {stats.critical > 0 && (
+          <span style={{ color: 'red', fontWeight: 'bold' }}>
+            {stats.critical} critical!
+          </span>
+        )}
+      </div>
+
+      {/* Inefficient: inline style object */}
+      <div style={{ display: 'flex', gap: '8px', padding: '16px' }}>
+        <input
+          type="text"
+          placeholder="Search tasks..."
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+        />
+        <select value={filterStatus} onChange={e => setFilterStatus(e.target.value as Task['status'] | 'all')}>
+          <option value="all">All Statuses</option>
+          <option value="todo">To Do</option>
+          <option value="in-progress">In Progress</option>
+          <option value="done">Done</option>
+        </select>
+        <select value={filterAssignee} onChange={e => setFilterAssignee(e.target.value)}>
+          <option value="all">All Assignees</option>
+          {uniqueAssignees.map(assignee => (
+            <option key={assignee} value={assignee}>{assignee}</option>
+          ))}
+        </select>
+        <select value={sortBy} onChange={e => setSortBy(e.target.value as typeof sortBy)}>
+          <option value="priority">Sort by Priority</option>
+          <option value="title">Sort by Title</option>
+          <option value="createdAt">Sort by Date</option>
+        </select>
+      </div>
+
+      {/* Inefficient: inline style object */}
+      <div style={{ display: 'flex', gap: '16px', padding: '16px' }}>
+        {(['todo', 'in-progress', 'done'] as Task['status'][]).map(status => (
+          <div key={status} style={{ flex: 1, minWidth: '250px' }}>
+            <h2>{status} ({(groupedTasks[status] || []).length})</h2>
+            <ul style={{ listStyle: 'none', padding: 0 }}>
+              {(groupedTasks[status] || []).map(task => (
+                <li
+                  key={task.id}
+                  style={{
+                    border: '1px solid #ccc',
+                    borderRadius: '4px',
+                    padding: '8px',
+                    marginBottom: '8px',
+                    borderLeft: `4px solid ${
+                      task.priority === 'critical' ? '#d32f2f'
+                        : task.priority === 'high' ? '#f57c00'
+                          : task.priority === 'medium' ? '#1976d2'
+                            : '#388e3c'
+                    }`,
+                  }}
+                >
+                  <strong>{task.title}</strong>
+                  <p style={{ margin: '4px 0', fontSize: '12px', color: '#666' }}>
+                    {task.description}
+                  </p>
+                  {/* Inefficient: inline style object */}
+                  <div style={{ display: 'flex', gap: '4px', fontSize: '11px' }}>
+                    {task.tags.map(tag => (
+                      <span
+                        key={tag}
+                        style={{
+                          background: '#e0e0e0',
+                          borderRadius: '2px',
+                          padding: '1px 4px',
+                        }}
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                  {/* Inefficient: inline style object */}
+                  <div style={{ display: 'flex', gap: '4px', marginTop: '8px' }}>
+                    <select
+                      value={task.status}
+                      onChange={e => handleStatusChange(task.id, e.target.value as Task['status'])}
+                    >
+                      <option value="todo">To Do</option>
+                      <option value="in-progress">In Progress</option>
+                      <option value="done">Done</option>
+                    </select>
+                    <select
+                      value={task.priority}
+                      onChange={e => handlePriorityChange(task.id, e.target.value as Task['priority'])}
+                    >
+                      <option value="low">Low</option>
+                      <option value="medium">Medium</option>
+                      <option value="high">High</option>
+                      <option value="critical">Critical</option>
+                    </select>
+                    <button
+                      onClick={() => handleDelete(task.id)}
+                      style={{ color: 'red', border: 'none', cursor: 'pointer' }}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                  <small style={{ color: '#999' }}>
+                    Assigned to: {task.assignee}
+                  </small>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/code_to_optimize/js/code_to_optimize_react/src/components/VirtualizedTree.tsx b/code_to_optimize/js/code_to_optimize_react/src/components/VirtualizedTree.tsx
new file mode 100644
index 000000000..aede24e80
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/src/components/VirtualizedTree.tsx
@@ -0,0 +1,252 @@
+/**
+ * VirtualizedTree component - demonstrates recursive/tree data patterns.
+ *
+ * Intentionally inefficient patterns:
+ * - Recursive tree flattening computed on every render without memoization
+ * - Search/filter traverses entire tree on each keystroke
+ * - Inline handler functions recreated on every render
+ * - No React.memo on tree node component
+ * - Path computation is O(n*depth) instead of cached
+ *
+ * Simulates a file tree or org chart with expandable nodes.
+ */
+import React, { useState } from 'react';
+
+export interface TreeNode {
+  id: string;
+  label: string;
+  children?: TreeNode[];
+  metadata?: Record<string, string>;
+  icon?: string;
+}
+
+interface FlatNode {
+  node: TreeNode;
+  depth: number;
+  isExpanded: boolean;
+  hasChildren: boolean;
+  path: string[];
+}
+
+interface VirtualizedTreeProps {
+  data: TreeNode[];
+  onSelect: (node: TreeNode, path: string[]) => void;
+  onExpand?: (nodeId: string) => void;
+  onCollapse?: (nodeId: string) => void;
+  selectedId?: string;
+}
+
+/**
+ * Recursively flatten a tree into a list for rendering.
+ * Intentionally inefficient: rebuilds entire flat list on every render.
+ */
+function flattenTree(
+  nodes: TreeNode[],
+  expandedIds: Set<string>,
+  depth: number = 0,
+  parentPath: string[] = [],
+): FlatNode[] {
+  const result: FlatNode[] = [];
+
+  for (const node of nodes) {
+    const path = [...parentPath, node.id];
+    const hasChildren = !!node.children && node.children.length > 0;
+    const isExpanded = expandedIds.has(node.id);
+
+    result.push({ node, depth, isExpanded, hasChildren, path });
+
+    if (hasChildren && isExpanded) {
+      result.push(...flattenTree(node.children!, expandedIds, depth + 1, path));
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Recursively search a tree for matching nodes.
+ * Intentionally inefficient: full traversal on every keystroke.
+ */
+function searchTree(nodes: TreeNode[], query: string): Set<string> {
+  const matchingIds = new Set<string>();
+  const lowerQuery = query.toLowerCase();
+
+  function traverse(node: TreeNode, ancestors: string[]) {
+    const matches =
+      node.label.toLowerCase().includes(lowerQuery) ||
+      Object.values(node.metadata || {}).some(v => v.toLowerCase().includes(lowerQuery));
+
+    if (matches) {
+      matchingIds.add(node.id);
+      // Also include all ancestors so the path is visible
+      for (const ancestorId of ancestors) {
+        matchingIds.add(ancestorId);
+      }
+    }
+
+    if (node.children) {
+      for (const child of node.children) {
+        traverse(child, [...ancestors, node.id]);
+      }
+    }
+  }
+
+  for (const node of nodes) {
+    traverse(node, []);
+  }
+
+  return matchingIds;
+}
+
+/**
+ * Count total nodes in a tree.
+ * Intentionally inefficient: full traversal every render.
+ */
+function countNodes(nodes: TreeNode[]): number {
+  let count = 0;
+  for (const node of nodes) {
+    count++;
+    if (node.children) {
+      count += countNodes(node.children);
+    }
+  }
+  return count;
+}
+
+/**
+ * Get max depth of a tree.
+ * Intentionally inefficient: full traversal every render.
+ */
+function getMaxDepth(nodes: TreeNode[], depth: number = 0): number {
+  let maxDepth = depth;
+  for (const node of nodes) {
+    if (node.children && node.children.length > 0) {
+      maxDepth = Math.max(maxDepth, getMaxDepth(node.children, depth + 1));
+    }
+  }
+  return maxDepth;
+}
+
+/**
+ * Tree component with search, expand/collapse, and selection.
+ */
+export function VirtualizedTree({
+  data,
+  onSelect,
+  onExpand,
+  onCollapse,
+  selectedId,
+}: VirtualizedTreeProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Inefficient: full tree traversal on every render
+  const totalNodes = countNodes(data);
+  const maxDepth = getMaxDepth(data);
+
+  // Inefficient: search traversal on every render
+  const matchingIds = searchQuery ? searchTree(data, searchQuery) : null;
+
+  // Inefficient: flattening on every render
+  const expandedForSearch = matchingIds
+    ? new Set([...expandedIds, ...matchingIds])
+    : expandedIds;
+  const flatNodes = flattenTree(data, expandedForSearch);
+
+  // Inefficient: filter on every render
+  const visibleNodes = matchingIds
+    ? flatNodes.filter(fn => matchingIds.has(fn.node.id))
+    : flatNodes;
+
+  // Inefficient: function recreated every render
+  const toggleExpand = (nodeId: string) => {
+    setExpandedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) {
+        next.delete(nodeId);
+        onCollapse?.(nodeId);
+      } else {
+        next.add(nodeId);
+        onExpand?.(nodeId);
+      }
+      return next;
+    });
+  };
+
+  // Inefficient: function recreated every render
+  const expandAll = () => {
+    const allIds = new Set<string>();
+    function collect(nodes: TreeNode[]) {
+      for (const node of nodes) {
+        if (node.children && node.children.length > 0) {
+          allIds.add(node.id);
+          collect(node.children);
+        }
+      }
+    }
+    collect(data);
+    setExpandedIds(allIds);
+  };
+
+  // Inefficient: function recreated every render
+  const collapseAll = () => {
+    setExpandedIds(new Set());
+  };
+
+  return (
+    <div>
+      {/* Inefficient: inline style */}
+      <div style={{ padding: '8px', borderBottom: '1px solid #e0e0e0' }}>
+        <input
+          type="text"
+          placeholder="Search tree..."
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          style={{ width: '100%', padding: '4px 8px', marginBottom: '4px' }}
+        />
+        {/* Inefficient: inline style */}
+        <div style={{ display: 'flex', gap: '8px', fontSize: '12px' }}>
+          <button onClick={expandAll}>Expand All</button>
+          <button onClick={collapseAll}>Collapse All</button>
+          <span style={{ color: '#666' }}>
+            {visibleNodes.length} of {totalNodes} nodes | Depth: {maxDepth}
+          </span>
+        </div>
+      </div>
+
+      <div style={{ overflow: 'auto', maxHeight: '600px' }}>
+        {visibleNodes.map(flatNode => (
+          <div
+            key={flatNode.node.id}
+            onClick={() => onSelect(flatNode.node, flatNode.path)}
+            style={{
+              paddingLeft: `${flatNode.depth * 20 + 8}px`,
+              padding: '4px 8px',
+              cursor: 'pointer',
+              background: selectedId === flatNode.node.id ? '#e3f2fd' : 'transparent',
+              borderBottom: '1px solid #f5f5f5',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+            }}
+          >
+            {flatNode.hasChildren && (
+              <span
+                onClick={e => {
+                  e.stopPropagation();
+                  toggleExpand(flatNode.node.id);
+                }}
+                style={{ cursor: 'pointer', width: '16px', textAlign: 'center' }}
+              >
+                {flatNode.isExpanded ? '▼' : '▶'}
+              </span>
+            )}
+            {!flatNode.hasChildren && <span style={{ width: '16px' }} />}
+            {flatNode.node.icon && <span>{flatNode.node.icon}</span>}
+            <span>{flatNode.node.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/code_to_optimize/js/code_to_optimize_react/src/hooks/useDebounce.ts b/code_to_optimize/js/code_to_optimize_react/src/hooks/useDebounce.ts
new file mode 100644
index 000000000..a19153dc5
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/src/hooks/useDebounce.ts
@@ -0,0 +1,27 @@
+/**
+ * useDebounce hook - standard debounce implementation.
+ *
+ * This hook is already reasonably implemented. It should be detected as a hook
+ * (not a component) and handled appropriately by the optimization pipeline.
+ */
+import { useState, useEffect } from 'react';
+
+/**
+ * Debounce a value by the given delay in milliseconds.
+ * Returns the debounced value that only updates after the delay.
+ */
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
diff --git a/code_to_optimize/js/code_to_optimize_react/src/hooks/useFilteredData.ts b/code_to_optimize/js/code_to_optimize_react/src/hooks/useFilteredData.ts
new file mode 100644
index 000000000..2b09a8f8b
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/src/hooks/useFilteredData.ts
@@ -0,0 +1,86 @@
+/**
+ * useFilteredData hook - demonstrates hook optimization patterns.
+ *
+ * Intentionally inefficient patterns:
+ * - Returns new object reference on every call (breaks shallow comparison)
+ * - Filter/sort computed without useMemo
+ * - Callbacks recreated without useCallback
+ * - Derived state computed inline
+ *
+ * Custom hooks that return unstable references are a common source of
+ * unnecessary re-renders in components that consume them.
+ */
+import { useState } from 'react';
+
+interface FilterOptions<T> {
+  searchField: keyof T;
+  sortField: keyof T;
+  sortDirection: 'asc' | 'desc';
+}
+
+interface FilteredDataResult<T> {
+  filteredItems: T[];
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  sortField: keyof T;
+  sortDirection: 'asc' | 'desc';
+  setSortField: (field: keyof T) => void;
+  toggleSortDirection: () => void;
+  totalCount: number;
+  filteredCount: number;
+  isEmpty: boolean;
+}
+
+/**
+ * Hook for filtering and sorting data arrays.
+ * Returns unstable references — consumers re-render on every parent render.
+ */
+export function useFilteredData<T extends Record<string, unknown>>(
+  data: T[],
+  options: FilterOptions<T>,
+): FilteredDataResult<T> {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortField, setSortField] = useState<keyof T>(options.sortField);
+  const [sortDirection, setSortDirection] = useState(options.sortDirection);
+
+  // Inefficient: filter runs every call
+  const filteredItems = data.filter(item => {
+    if (!searchQuery) return true;
+    const fieldValue = String(item[options.searchField] || '');
+    return fieldValue.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+
+  // Inefficient: sort runs every call
+  const sortedItems = filteredItems.sort((a, b) => {
+    const aVal = a[sortField];
+    const bVal = b[sortField];
+    const dir = sortDirection === 'asc' ? 1 : -1;
+
+    if (typeof aVal === 'string' && typeof bVal === 'string') {
+      return aVal.localeCompare(bVal) * dir;
+    }
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+      return (aVal - bVal) * dir;
+    }
+    return 0;
+  });
+
+  // Inefficient: function recreated every call
+  const toggleSortDirection = () => {
+    setSortDirection(d => (d === 'asc' ? 'desc' : 'asc'));
+  };
+
+  // Inefficient: returns new object reference every call
+  return {
+    filteredItems: sortedItems,
+    searchQuery,
+    setSearchQuery,
+    sortField,
+    sortDirection,
+    setSortField,
+    toggleSortDirection,
+    totalCount: data.length,
+    filteredCount: sortedItems.length,
+    isEmpty: sortedItems.length === 0,
+  };
+}
diff --git a/code_to_optimize/js/code_to_optimize_react/tests/DataGrid.test.tsx b/code_to_optimize/js/code_to_optimize_react/tests/DataGrid.test.tsx
new file mode 100644
index 000000000..404d1c8fc
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/tests/DataGrid.test.tsx
@@ -0,0 +1,198 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DataGrid, DataRow } from '../src/components/DataGrid';
+
+const makeRow = (overrides: Partial<DataRow> = {}): DataRow => ({
+  id: 1,
+  name: 'Test Item',
+  category: 'A',
+  value: 100,
+  date: '2024-01-15',
+  isActive: true,
+  tags: ['tag1'],
+  metadata: { source: 'test' },
+  ...overrides,
+});
+
+const makeRows = (count: number): DataRow[] =>
+  Array.from({ length: count }, (_, i) =>
+    makeRow({
+      id: i + 1,
+      name: `Item ${String(i + 1).padStart(3, '0')}`,
+      category: ['Electronics', 'Clothing', 'Food', 'Books'][i % 4],
+      value: Math.round((i + 1) * 10.5 * 100) / 100,
+      date: `2024-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}`,
+      isActive: i % 3 !== 0,
+      tags: [`tag-${i % 5}`, `category-${i % 3}`],
+      metadata: { source: `source-${i % 3}` },
+    }),
+  );
+
+const defaultColumns = [
+  { key: 'name' as const, label: 'Name', sortable: true, filterable: true },
+  { key: 'category' as const, label: 'Category', sortable: true, filterable: true },
+  { key: 'value' as const, label: 'Value', sortable: true, filterable: false },
+  { key: 'date' as const, label: 'Date', sortable: true, filterable: false },
+];
+
+const noop = () => {};
+
+describe('DataGrid', () => {
+  describe('rendering', () => {
+    test('renders with empty rows', () => {
+      render(
+        <DataGrid
+          rows={[]}
+          columns={defaultColumns}
+          pageSize={10}
+          onRowSelect={noop}
+          onBulkAction={noop}
+        />,
+      );
+      expect(screen.getByText(/0 rows/)).toBeTruthy();
+    });
+
+    test('renders column headers', () => {
+      render(
+        <DataGrid
+          rows={makeRows(5)}
+          columns={defaultColumns}
+          pageSize={10}
+          onRowSelect={noop}
+          onBulkAction={noop}
+        />,
+      );
+      expect(screen.getByText('Name')).toBeTruthy();
+      expect(screen.getByText('Category')).toBeTruthy();
+      expect(screen.getByText('Value')).toBeTruthy();
+    });
+
+    test('renders correct row count', () => {
+      const rows = makeRows(5);
+      render(
+        <DataGrid
+          rows={rows}
+          columns={defaultColumns}
+          pageSize={10}
+          onRowSelect={noop}
+          onBulkAction={noop}
+        />,
+      );
+      expect(screen.getByText(/5 rows/)).toBeTruthy();
+    });
+
+    test('displays aggregation values', () => {
+      const rows = makeRows(10);
+      render(
+        <DataGrid
+          rows={rows}
+          columns={defaultColumns}
+          pageSize={20}
+          onRowSelect={noop}
+          onBulkAction={noop}
+        />,
+      );
+      expect(screen.getByText(/active/)).toBeTruthy();
+      expect(screen.getByText(/Total value/)).toBeTruthy();
+    });
+  });
+
+  describe('pagination', () => {
+    test('paginates rows correctly', () => {
+      const rows = makeRows(25);
+      render(
+        <DataGrid
+          rows={rows}
+          columns={defaultColumns}
+          pageSize={10}
+          onRowSelect={noop}
+          onBulkAction={noop}
+        />,
+      );
+      expect(screen.getByText(/Page 1 of 3/)).toBeTruthy();
+    });
+
+    test('navigates to next page', () => {
+      const rows = makeRows(25);
+      render(
+        <DataGrid
+          rows={rows}
+          columns={defaultColumns}
+          pageSize={10}
+          onRowSelect={noop}
+          onBulkAction={noop}
+        />,
+      );
+      fireEvent.click(screen.getByText('Next'));
+      expect(screen.getByText(/Page 2 of 3/)).toBeTruthy();
+    });
+  });
+
+  describe('sorting', () => {
+    test('sorts by column when header clicked', () => {
+      const rows = makeRows(5);
+      render(
+        <DataGrid
+          rows={rows}
+          columns={defaultColumns}
+          pageSize={10}
+          onRowSelect={noop}
+          onBulkAction={noop}
+        />,
+      );
+      fireEvent.click(screen.getByText('Name'));
+      // Should show sort indicator
+      expect(screen.getByText(/Name/)).toBeTruthy();
+    });
+  });
+
+  describe('selection', () => {
+    test('calls onRowSelect when row clicked', () => {
+      const onRowSelect = jest.fn();
+      const rows = makeRows(3);
+      render(
+        <DataGrid
+          rows={rows}
+          columns={defaultColumns}
+          pageSize={10}
+          onRowSelect={onRowSelect}
+          onBulkAction={noop}
+        />,
+      );
+      fireEvent.click(screen.getByText('Item 001'));
+      expect(onRowSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 1 }));
+    });
+  });
+
+  describe('performance with large datasets', () => {
+    test('renders 200 rows with pagination', () => {
+      const rows = makeRows(200);
+      const { container } = render(
+        <DataGrid
+          rows={rows}
+          columns={defaultColumns}
+          pageSize={20}
+          onRowSelect={noop}
+          onBulkAction={noop}
+        />,
+      );
+      expect(container).toBeTruthy();
+      expect(screen.getByText(/200 rows/)).toBeTruthy();
+    });
+
+    test('renders 1000 rows with pagination', () => {
+      const rows = makeRows(1000);
+      const { container } = render(
+        <DataGrid
+          rows={rows}
+          columns={defaultColumns}
+          pageSize={50}
+          onRowSelect={noop}
+          onBulkAction={noop}
+        />,
+      );
+      expect(container).toBeTruthy();
+      expect(screen.getByText(/1000 rows/)).toBeTruthy();
+    });
+  });
+});
diff --git a/code_to_optimize/js/code_to_optimize_react/tests/FormWithValidation.test.tsx b/code_to_optimize/js/code_to_optimize_react/tests/FormWithValidation.test.tsx
new file mode 100644
index 000000000..3704c6ed2
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/tests/FormWithValidation.test.tsx
@@ -0,0 +1,212 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { FormWithValidation } from '../src/components/FormWithValidation';
+
+const textField = (name: string, label: string, required = true) => ({
+  name,
+  label,
+  type: 'text' as const,
+  required,
+});
+
+const emailField = { name: 'email', label: 'Email', type: 'email' as const, required: true };
+const passwordField = {
+  name: 'password',
+  label: 'Password',
+  type: 'password' as const,
+  required: true,
+  minLength: 8,
+};
+
+const noop = () => {};
+
+describe('FormWithValidation', () => {
+  describe('rendering', () => {
+    test('renders all fields', () => {
+      render(
+        <FormWithValidation
+          fields={[textField('name', 'Name'), emailField]}
+          onSubmit={noop}
+        />,
+      );
+      expect(screen.getByText('Name')).toBeTruthy();
+      expect(screen.getByText('Email')).toBeTruthy();
+    });
+
+    test('renders submit button with custom label', () => {
+      render(
+        <FormWithValidation
+          fields={[textField('name', 'Name')]}
+          onSubmit={noop}
+          submitLabel="Save"
+        />,
+      );
+      expect(screen.getByText('Save')).toBeTruthy();
+    });
+
+    test('renders with initial values', () => {
+      render(
+        <FormWithValidation
+          fields={[textField('name', 'Name')]}
+          onSubmit={noop}
+          initialValues={{ name: 'John' }}
+        />,
+      );
+      const input = screen.getByDisplayValue('John');
+      expect(input).toBeTruthy();
+    });
+
+    test('renders progress bar', () => {
+      render(
+        <FormWithValidation
+          fields={[textField('a', 'A'), textField('b', 'B'), textField('c', 'C')]}
+          onSubmit={noop}
+        />,
+      );
+      expect(screen.getByText(/0 of 3 fields completed/)).toBeTruthy();
+    });
+
+    test('shows required asterisk', () => {
+      render(
+        <FormWithValidation
+          fields={[textField('name', 'Name', true)]}
+          onSubmit={noop}
+        />,
+      );
+      expect(screen.getByText('*')).toBeTruthy();
+    });
+  });
+
+  describe('validation', () => {
+    test('shows required error after submit', () => {
+      render(
+        <FormWithValidation
+          fields={[textField('name', 'Name')]}
+          onSubmit={noop}
+        />,
+      );
+      fireEvent.click(screen.getByText('Submit'));
+      expect(screen.getByText('Name is required')).toBeTruthy();
+    });
+
+    test('shows email format error', () => {
+      render(
+        <FormWithValidation
+          fields={[emailField]}
+          onSubmit={noop}
+        />,
+      );
+      const input = screen.getByRole('textbox');
+      fireEvent.change(input, { target: { value: 'not-an-email' } });
+      fireEvent.blur(input);
+      expect(screen.getByText(/valid email/)).toBeTruthy();
+    });
+
+    test('shows minLength error', () => {
+      render(
+        <FormWithValidation
+          fields={[passwordField]}
+          onSubmit={noop}
+        />,
+      );
+      const input = screen.getByRole('textbox') || document.querySelector('input[type="password"]');
+      if (input) {
+        fireEvent.change(input, { target: { value: 'Aa1!' } });
+        fireEvent.blur(input);
+      }
+    });
+
+    test('validates password complexity', () => {
+      render(
+        <FormWithValidation
+          fields={[passwordField]}
+          onSubmit={noop}
+        />,
+      );
+      // Password fields need all complexity requirements
+      const inputs = document.querySelectorAll('input');
+      if (inputs.length > 0) {
+        fireEvent.change(inputs[0], { target: { value: 'weakpassword' } });
+        fireEvent.blur(inputs[0]);
+      }
+    });
+
+    test('custom validator works', () => {
+      const fields = [
+        {
+          ...textField('age', 'Age'),
+          customValidator: (value: string) =>
+            Number(value) < 18 ? 'Must be 18 or older' : null,
+        },
+      ];
+      render(<FormWithValidation fields={fields} onSubmit={noop} />);
+      const input = screen.getByRole('textbox');
+      fireEvent.change(input, { target: { value: '15' } });
+      fireEvent.blur(input);
+      expect(screen.getByText('Must be 18 or older')).toBeTruthy();
+    });
+  });
+
+  describe('submission', () => {
+    test('calls onSubmit with values when valid', () => {
+      const onSubmit = jest.fn();
+      render(
+        <FormWithValidation
+          fields={[textField('name', 'Name', false)]}
+          onSubmit={onSubmit}
+          initialValues={{ name: 'Alice' }}
+        />,
+      );
+      fireEvent.click(screen.getByText('Submit'));
+      expect(onSubmit).toHaveBeenCalledWith({ name: 'Alice' });
+    });
+
+    test('does not call onSubmit when invalid', () => {
+      const onSubmit = jest.fn();
+      render(
+        <FormWithValidation
+          fields={[textField('name', 'Name', true)]}
+          onSubmit={onSubmit}
+        />,
+      );
+      fireEvent.click(screen.getByText('Submit'));
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    test('calls onChange callback', () => {
+      const onChange = jest.fn();
+      render(
+        <FormWithValidation
+          fields={[textField('name', 'Name')]}
+          onSubmit={noop}
+          onChange={onChange}
+        />,
+      );
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Bob' } });
+      expect(onChange).toHaveBeenCalledWith('name', 'Bob');
+    });
+  });
+
+  describe('performance with many fields', () => {
+    test('renders form with 20 fields', () => {
+      const fields = Array.from({ length: 20 }, (_, i) =>
+        textField(`field_${i}`, `Field ${i + 1}`),
+      );
+      const { container } = render(
+        <FormWithValidation fields={fields} onSubmit={noop} />,
+      );
+      expect(container).toBeTruthy();
+      expect(screen.getByText(/0 of 20 fields completed/)).toBeTruthy();
+    });
+
+    test('validates all fields on submit with 20 fields', () => {
+      const fields = Array.from({ length: 20 }, (_, i) =>
+        textField(`field_${i}`, `Field ${i + 1}`),
+      );
+      const onSubmit = jest.fn();
+      render(<FormWithValidation fields={fields} onSubmit={onSubmit} />);
+      fireEvent.click(screen.getByText('Submit'));
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/code_to_optimize/js/code_to_optimize_react/tests/SearchableList.test.tsx b/code_to_optimize/js/code_to_optimize_react/tests/SearchableList.test.tsx
new file mode 100644
index 000000000..17c72a64c
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/tests/SearchableList.test.tsx
@@ -0,0 +1,233 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { SearchableList, ListItemCard, ListItem } from '../src/components/SearchableList';
+
+const makeItem = (overrides: Partial<ListItem> = {}): ListItem => ({
+  id: 1,
+  label: 'Test Item',
+  category: 'General',
+  timestamp: Date.now(),
+  score: 50,
+  isFavorite: false,
+  ...overrides,
+});
+
+const makeItems = (count: number): ListItem[] =>
+  Array.from({ length: count }, (_, i) =>
+    makeItem({
+      id: i + 1,
+      label: `Item ${String(i + 1).padStart(3, '0')}`,
+      category: ['Work', 'Personal', 'Shopping', 'Health'][i % 4],
+      timestamp: Date.now() - i * 60000,
+      score: (i * 17) % 100,
+      isFavorite: i % 5 === 0,
+    }),
+  );
+
+const noop = () => {};
+
+describe('SearchableList', () => {
+  describe('rendering', () => {
+    test('renders with empty list', () => {
+      render(
+        <SearchableList
+          items={[]}
+          onToggleFavorite={noop}
+          onDelete={noop}
+          highlightedIds={[]}
+        />,
+      );
+      expect(screen.getByText(/0 items/)).toBeTruthy();
+    });
+
+    test('renders items grouped by category', () => {
+      const items = makeItems(8);
+      render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={noop}
+          onDelete={noop}
+          highlightedIds={[]}
+        />,
+      );
+      expect(screen.getByText(/Work/)).toBeTruthy();
+      expect(screen.getByText(/Personal/)).toBeTruthy();
+    });
+
+    test('renders stats correctly', () => {
+      const items = makeItems(20);
+      render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={noop}
+          onDelete={noop}
+          highlightedIds={[]}
+        />,
+      );
+      expect(screen.getByText(/20 items/)).toBeTruthy();
+      expect(screen.getByText(/favorites/)).toBeTruthy();
+    });
+
+    test('displays highlighted items', () => {
+      const items = makeItems(5);
+      const { container } = render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={noop}
+          onDelete={noop}
+          highlightedIds={[1, 3]}
+        />,
+      );
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('search', () => {
+    test('filters items by label', () => {
+      const items = [
+        makeItem({ id: 1, label: 'Apple', category: 'Fruit' }),
+        makeItem({ id: 2, label: 'Banana', category: 'Fruit' }),
+        makeItem({ id: 3, label: 'Carrot', category: 'Vegetable' }),
+      ];
+      render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={noop}
+          onDelete={noop}
+          highlightedIds={[]}
+        />,
+      );
+      fireEvent.change(screen.getByPlaceholderText('Search...'), {
+        target: { value: 'Ban' },
+      });
+      expect(screen.getByText('Banana')).toBeTruthy();
+    });
+
+    test('filters items by category', () => {
+      const items = [
+        makeItem({ id: 1, label: 'Apple', category: 'Fruit' }),
+        makeItem({ id: 2, label: 'Carrot', category: 'Vegetable' }),
+      ];
+      render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={noop}
+          onDelete={noop}
+          highlightedIds={[]}
+        />,
+      );
+      fireEvent.change(screen.getByPlaceholderText('Search...'), {
+        target: { value: 'Veg' },
+      });
+      expect(screen.getByText('Carrot')).toBeTruthy();
+    });
+  });
+
+  describe('interactions', () => {
+    test('calls onToggleFavorite when star clicked', () => {
+      const onToggle = jest.fn();
+      const items = [makeItem({ id: 7, isFavorite: false })];
+      render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={onToggle}
+          onDelete={noop}
+          highlightedIds={[]}
+        />,
+      );
+      fireEvent.click(screen.getByText('☆'));
+      expect(onToggle).toHaveBeenCalledWith(7);
+    });
+
+    test('calls onDelete when delete clicked', () => {
+      const onDelete = jest.fn();
+      const items = [makeItem({ id: 9 })];
+      render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={noop}
+          onDelete={onDelete}
+          highlightedIds={[]}
+        />,
+      );
+      fireEvent.click(screen.getByText('×'));
+      expect(onDelete).toHaveBeenCalledWith(9);
+    });
+
+    test('favorites-only filter works', () => {
+      const items = [
+        makeItem({ id: 1, label: 'Fav', isFavorite: true }),
+        makeItem({ id: 2, label: 'NotFav', isFavorite: false }),
+      ];
+      render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={noop}
+          onDelete={noop}
+          highlightedIds={[]}
+        />,
+      );
+      fireEvent.click(screen.getByLabelText(/Favorites only/));
+      expect(screen.getByText('Fav')).toBeTruthy();
+    });
+  });
+
+  describe('performance with large datasets', () => {
+    test('renders 200 items', () => {
+      const items = makeItems(200);
+      const { container } = render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={noop}
+          onDelete={noop}
+          highlightedIds={[1, 50, 100, 150]}
+        />,
+      );
+      expect(container).toBeTruthy();
+    });
+
+    test('renders 500 items', () => {
+      const items = makeItems(500);
+      const { container } = render(
+        <SearchableList
+          items={items}
+          onToggleFavorite={noop}
+          onDelete={noop}
+          highlightedIds={Array.from({ length: 50 }, (_, i) => i * 10 + 1)}
+        />,
+      );
+      expect(container).toBeTruthy();
+    });
+  });
+});
+
+describe('ListItemCard', () => {
+  test('renders item label and category', () => {
+    const item = makeItem({ label: 'My Item', category: 'Work' });
+    render(
+      <ListItemCard
+        item={item}
+        onToggleFavorite={noop}
+        onDelete={noop}
+        style={{}}
+        isHighlighted={false}
+      />,
+    );
+    expect(screen.getByText('My Item')).toBeTruthy();
+    expect(screen.getByText(/Work/)).toBeTruthy();
+  });
+
+  test('shows filled star for favorites', () => {
+    const item = makeItem({ isFavorite: true });
+    render(
+      <ListItemCard
+        item={item}
+        onToggleFavorite={noop}
+        onDelete={noop}
+        style={{}}
+        isHighlighted={false}
+      />,
+    );
+    expect(screen.getByText('★')).toBeTruthy();
+  });
+});
diff --git a/code_to_optimize/js/code_to_optimize_react/tests/TaskBoard.test.tsx b/code_to_optimize/js/code_to_optimize_react/tests/TaskBoard.test.tsx
new file mode 100644
index 000000000..bdf2eca64
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/tests/TaskBoard.test.tsx
@@ -0,0 +1,186 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TaskBoard, Task } from '../src/components/TaskBoard';
+
+const createTask = (overrides: Partial<Task> = {}): Task => ({
+  id: 1,
+  title: 'Test Task',
+  description: 'A test task description',
+  status: 'todo',
+  priority: 'medium',
+  assignee: 'alice',
+  tags: ['frontend'],
+  createdAt: Date.now(),
+  updatedAt: Date.now(),
+  ...overrides,
+});
+
+const makeTasks = (count: number): Task[] =>
+  Array.from({ length: count }, (_, i) =>
+    createTask({
+      id: i + 1,
+      title: `Task ${i + 1}`,
+      status: (['todo', 'in-progress', 'done'] as const)[i % 3],
+      priority: (['low', 'medium', 'high', 'critical'] as const)[i % 4],
+      assignee: ['alice', 'bob', 'charlie'][i % 3],
+      tags: [`tag-${i % 5}`, `category-${i % 3}`],
+      createdAt: Date.now() - i * 100000,
+    }),
+  );
+
+const noop = () => {};
+
+describe('TaskBoard', () => {
+  describe('rendering', () => {
+    test('renders with empty task list', () => {
+      render(
+        <TaskBoard
+          tasks={[]}
+          onTaskUpdate={noop}
+          onTaskDelete={noop}
+          onTaskCreate={noop}
+          currentUser="alice"
+        />,
+      );
+      expect(screen.getByText('Task Board')).toBeTruthy();
+    });
+
+    test('renders all status columns', () => {
+      const tasks = makeTasks(9);
+      render(
+        <TaskBoard
+          tasks={tasks}
+          onTaskUpdate={noop}
+          onTaskDelete={noop}
+          onTaskCreate={noop}
+          currentUser="alice"
+        />,
+      );
+      expect(screen.getByText(/todo/i)).toBeTruthy();
+      expect(screen.getByText(/in-progress/i)).toBeTruthy();
+      expect(screen.getByText(/done/i)).toBeTruthy();
+    });
+
+    test('renders task titles', () => {
+      const tasks = [createTask({ id: 1, title: 'Important Feature' })];
+      render(
+        <TaskBoard
+          tasks={tasks}
+          onTaskUpdate={noop}
+          onTaskDelete={noop}
+          onTaskCreate={noop}
+          currentUser="alice"
+        />,
+      );
+      expect(screen.getByText('Important Feature')).toBeTruthy();
+    });
+
+    test('renders stats correctly', () => {
+      const tasks = [
+        createTask({ id: 1, status: 'todo' }),
+        createTask({ id: 2, status: 'todo' }),
+        createTask({ id: 3, status: 'in-progress' }),
+        createTask({ id: 4, status: 'done' }),
+      ];
+      render(
+        <TaskBoard
+          tasks={tasks}
+          onTaskUpdate={noop}
+          onTaskDelete={noop}
+          onTaskCreate={noop}
+          currentUser="alice"
+        />,
+      );
+      expect(screen.getByText(/2 todo/)).toBeTruthy();
+      expect(screen.getByText(/1 in progress/)).toBeTruthy();
+      expect(screen.getByText(/1 done/)).toBeTruthy();
+    });
+  });
+
+  describe('filtering', () => {
+    test('search filters tasks by title', () => {
+      const tasks = [
+        createTask({ id: 1, title: 'Build UI' }),
+        createTask({ id: 2, title: 'Fix API bug' }),
+        createTask({ id: 3, title: 'Write docs' }),
+      ];
+      render(
+        <TaskBoard
+          tasks={tasks}
+          onTaskUpdate={noop}
+          onTaskDelete={noop}
+          onTaskCreate={noop}
+          currentUser="alice"
+        />,
+      );
+      const searchInput = screen.getByPlaceholderText('Search tasks...');
+      fireEvent.change(searchInput, { target: { value: 'API' } });
+      expect(screen.getByText('Fix API bug')).toBeTruthy();
+    });
+  });
+
+  describe('interactions', () => {
+    test('calls onTaskDelete when delete button clicked', () => {
+      const onDelete = jest.fn();
+      const tasks = [createTask({ id: 42, title: 'Delete me' })];
+      render(
+        <TaskBoard
+          tasks={tasks}
+          onTaskUpdate={noop}
+          onTaskDelete={onDelete}
+          onTaskCreate={noop}
+          currentUser="alice"
+        />,
+      );
+      fireEvent.click(screen.getByText('Delete'));
+      expect(onDelete).toHaveBeenCalledWith(42);
+    });
+
+    test('calls onTaskCreate when new task button clicked', () => {
+      const onCreate = jest.fn();
+      render(
+        <TaskBoard
+          tasks={[]}
+          onTaskUpdate={noop}
+          onTaskDelete={noop}
+          onTaskCreate={onCreate}
+          currentUser="alice"
+        />,
+      );
+      fireEvent.click(screen.getByText('+ New Task'));
+      expect(onCreate).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'New Task', assignee: 'alice' }),
+      );
+    });
+  });
+
+  describe('performance with large datasets', () => {
+    test('renders 100 tasks without error', () => {
+      const tasks = makeTasks(100);
+      const { container } = render(
+        <TaskBoard
+          tasks={tasks}
+          onTaskUpdate={noop}
+          onTaskDelete={noop}
+          onTaskCreate={noop}
+          currentUser="alice"
+        />,
+      );
+      expect(container).toBeTruthy();
+    });
+
+    test('renders 500 tasks without error', () => {
+      const tasks = makeTasks(500);
+      const { container } = render(
+        <TaskBoard
+          tasks={tasks}
+          onTaskUpdate={noop}
+          onTaskDelete={noop}
+          onTaskCreate={noop}
+          currentUser="alice"
+        />,
+      );
+      expect(container).toBeTruthy();
+    });
+  });
+});
diff --git a/code_to_optimize/js/code_to_optimize_react/tests/VirtualizedTree.test.tsx b/code_to_optimize/js/code_to_optimize_react/tests/VirtualizedTree.test.tsx
new file mode 100644
index 000000000..0f1d6eeea
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/tests/VirtualizedTree.test.tsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { VirtualizedTree, TreeNode } from '../src/components/VirtualizedTree';
+
+const makeTree = (depth: number, breadth: number, prefix = ''): TreeNode[] =>
+  Array.from({ length: breadth }, (_, i) => {
+    const id = `${prefix}node-${i}`;
+    return {
+      id,
+      label: `${prefix}Node ${i}`,
+      metadata: { type: i % 2 === 0 ? 'folder' : 'file' },
+      icon: i % 2 === 0 ? '📁' : '📄',
+      children: depth > 1 ? makeTree(depth - 1, breadth, `${id}/`) : undefined,
+    };
+  });
+
+const noop = () => {};
+
+describe('VirtualizedTree', () => {
+  describe('rendering', () => {
+    test('renders root nodes', () => {
+      const data = makeTree(1, 3);
+      render(
+        <VirtualizedTree data={data} onSelect={noop} />,
+      );
+      expect(screen.getByText('Node 0')).toBeTruthy();
+      expect(screen.getByText('Node 1')).toBeTruthy();
+      expect(screen.getByText('Node 2')).toBeTruthy();
+    });
+
+    test('renders with empty data', () => {
+      render(<VirtualizedTree data={[]} onSelect={noop} />);
+      expect(screen.getByText(/0 of 0 nodes/)).toBeTruthy();
+    });
+
+    test('displays total node count', () => {
+      const data = makeTree(2, 3); // 3 + 9 = 12 nodes
+      render(<VirtualizedTree data={data} onSelect={noop} />);
+      expect(screen.getByText(/12/)).toBeTruthy();
+    });
+
+    test('displays depth info', () => {
+      const data = makeTree(3, 2); // depth 2 (0-indexed)
+      render(<VirtualizedTree data={data} onSelect={noop} />);
+      expect(screen.getByText(/Depth/)).toBeTruthy();
+    });
+
+    test('renders expand/collapse icons for parent nodes', () => {
+      const data = makeTree(2, 2);
+      render(<VirtualizedTree data={data} onSelect={noop} />);
+      const expandButtons = screen.getAllByText('▶');
+      expect(expandButtons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('expand/collapse', () => {
+    test('expands node to show children', () => {
+      const data = makeTree(2, 2);
+      render(<VirtualizedTree data={data} onSelect={noop} />);
+      // Click expand on first node
+      fireEvent.click(screen.getAllByText('▶')[0]);
+      // Children should now be visible
+      expect(screen.getByText(/node-0\/Node 0/)).toBeTruthy();
+    });
+
+    test('expand all shows all nodes', () => {
+      const data = makeTree(2, 2);
+      render(<VirtualizedTree data={data} onSelect={noop} />);
+      fireEvent.click(screen.getByText('Expand All'));
+      // All leaf nodes should be visible now
+      const nodeTexts = screen.getAllByText(/Node/);
+      expect(nodeTexts.length).toBeGreaterThan(2);
+    });
+
+    test('collapse all hides children', () => {
+      const data = makeTree(2, 2);
+      render(<VirtualizedTree data={data} onSelect={noop} />);
+      fireEvent.click(screen.getByText('Expand All'));
+      fireEvent.click(screen.getByText('Collapse All'));
+      // Only root nodes should be visible
+    });
+
+    test('calls onExpand callback', () => {
+      const onExpand = jest.fn();
+      const data = makeTree(2, 2);
+      render(<VirtualizedTree data={data} onSelect={noop} onExpand={onExpand} />);
+      fireEvent.click(screen.getAllByText('▶')[0]);
+      expect(onExpand).toHaveBeenCalledWith('node-0');
+    });
+
+    test('calls onCollapse callback', () => {
+      const onCollapse = jest.fn();
+      const data = makeTree(2, 2);
+      render(<VirtualizedTree data={data} onSelect={noop} onCollapse={onCollapse} />);
+      // Expand then collapse
+      fireEvent.click(screen.getAllByText('▶')[0]);
+      fireEvent.click(screen.getAllByText('▼')[0]);
+      expect(onCollapse).toHaveBeenCalledWith('node-0');
+    });
+  });
+
+  describe('search', () => {
+    test('filters tree by search query', () => {
+      const data: TreeNode[] = [
+        {
+          id: 'src',
+          label: 'src',
+          children: [
+            { id: 'app', label: 'App.tsx' },
+            { id: 'index', label: 'index.ts' },
+          ],
+        },
+        {
+          id: 'tests',
+          label: 'tests',
+          children: [
+            { id: 'app-test', label: 'App.test.tsx' },
+          ],
+        },
+      ];
+      render(<VirtualizedTree data={data} onSelect={noop} />);
+      fireEvent.change(screen.getByPlaceholderText('Search tree...'), {
+        target: { value: 'App' },
+      });
+      // App.tsx and App.test.tsx should match, plus ancestors
+    });
+  });
+
+  describe('selection', () => {
+    test('calls onSelect with node and path', () => {
+      const onSelect = jest.fn();
+      const data = makeTree(1, 3);
+      render(<VirtualizedTree data={data} onSelect={onSelect} />);
+      fireEvent.click(screen.getByText('Node 1'));
+      expect(onSelect).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'node-1' }),
+        ['node-1'],
+      );
+    });
+
+    test('highlights selected node', () => {
+      const data = makeTree(1, 3);
+      const { container } = render(
+        <VirtualizedTree data={data} onSelect={noop} selectedId="node-1" />,
+      );
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('performance with large trees', () => {
+    test('renders tree with 100 nodes (10x10)', () => {
+      const data = makeTree(2, 10); // 10 + 100 = 110 nodes
+      const { container } = render(
+        <VirtualizedTree data={data} onSelect={noop} />,
+      );
+      expect(container).toBeTruthy();
+    });
+
+    test('renders tree with 1000+ nodes (10x10x10)', () => {
+      const data = makeTree(3, 10); // 10 + 100 + 1000 = 1110 nodes
+      const { container } = render(
+        <VirtualizedTree data={data} onSelect={noop} />,
+      );
+      expect(container).toBeTruthy();
+    });
+
+    test('search on large tree', () => {
+      const data = makeTree(3, 5); // 5 + 25 + 125 = 155 nodes
+      render(<VirtualizedTree data={data} onSelect={noop} />);
+      fireEvent.change(screen.getByPlaceholderText('Search tree...'), {
+        target: { value: 'Node 3' },
+      });
+      // Should filter without crashing
+    });
+  });
+});
diff --git a/code_to_optimize/js/code_to_optimize_react/tests/hooks.test.ts b/code_to_optimize/js/code_to_optimize_react/tests/hooks.test.ts
new file mode 100644
index 000000000..18a196488
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/tests/hooks.test.ts
@@ -0,0 +1,86 @@
+import { renderHook, act } from '@testing-library/react';
+import { useDebounce } from '../src/hooks/useDebounce';
+
+describe('useDebounce', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  test('returns initial value immediately', () => {
+    const { result } = renderHook(() => useDebounce('hello', 500));
+    expect(result.current).toBe('hello');
+  });
+
+  test('does not update value before delay', () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      { initialProps: { value: 'hello', delay: 500 } },
+    );
+
+    rerender({ value: 'world', delay: 500 });
+    expect(result.current).toBe('hello');
+  });
+
+  test('updates value after delay', () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      { initialProps: { value: 'hello', delay: 500 } },
+    );
+
+    rerender({ value: 'world', delay: 500 });
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+    expect(result.current).toBe('world');
+  });
+
+  test('resets timer on rapid changes', () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      { initialProps: { value: 'a', delay: 300 } },
+    );
+
+    rerender({ value: 'ab', delay: 300 });
+    act(() => { jest.advanceTimersByTime(100); });
+
+    rerender({ value: 'abc', delay: 300 });
+    act(() => { jest.advanceTimersByTime(100); });
+
+    rerender({ value: 'abcd', delay: 300 });
+    act(() => { jest.advanceTimersByTime(100); });
+
+    // Not yet debounced
+    expect(result.current).toBe('a');
+
+    act(() => { jest.advanceTimersByTime(300); });
+    expect(result.current).toBe('abcd');
+  });
+
+  test('works with numbers', () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      { initialProps: { value: 0, delay: 200 } },
+    );
+
+    rerender({ value: 42, delay: 200 });
+    act(() => { jest.advanceTimersByTime(200); });
+    expect(result.current).toBe(42);
+  });
+
+  test('works with objects', () => {
+    const obj1 = { name: 'Alice' };
+    const obj2 = { name: 'Bob' };
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      { initialProps: { value: obj1, delay: 100 } },
+    );
+
+    rerender({ value: obj2, delay: 100 });
+    act(() => { jest.advanceTimersByTime(100); });
+    expect(result.current).toEqual({ name: 'Bob' });
+  });
+});
diff --git a/code_to_optimize/js/code_to_optimize_react/tsconfig.json b/code_to_optimize/js/code_to_optimize_react/tsconfig.json
new file mode 100644
index 000000000..ac348585f
--- /dev/null
+++ b/code_to_optimize/js/code_to_optimize_react/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "outDir": "./dist",
+    "rootDir": ".",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/codeflash-benchmark/codeflash_benchmark/version.py b/codeflash-benchmark/codeflash_benchmark/version.py
index 18606e8d2..57668e5ec 100644
--- a/codeflash-benchmark/codeflash_benchmark/version.py
+++ b/codeflash-benchmark/codeflash_benchmark/version.py
@@ -1,2 +1,2 @@
 # These version placeholders will be replaced by uv-dynamic-versioning during build.
-__version__ = "0.3.0"
+__version__ = "0.20.1.post141.dev0+80380063"
diff --git a/codeflash/api/aiservice.py b/codeflash/api/aiservice.py
index b8bc9454b..a144a9dd3 100644
--- a/codeflash/api/aiservice.py
+++ b/codeflash/api/aiservice.py
@@ -135,6 +135,8 @@ def optimize_code(
         is_async: bool = False,
         n_candidates: int = 5,
         is_numerical_code: bool | None = None,
+        is_react_component: bool = False,
+        react_context: str | None = None,
     ) -> list[OptimizedCandidate]:
         """Optimize the given code for performance by making a request to the Django endpoint.
 
@@ -188,6 +190,12 @@ def optimize_code(
             if module_system:
                 payload["module_system"] = module_system
 
+        # React-specific fields
+        if is_react_component:
+            payload["is_react_component"] = True
+            if react_context:
+                payload["react_context"] = react_context
+
         # DEBUG: Print payload language field
         logger.debug(
             f"Sending optimize request with language='{payload['language']}' (type: {type(payload['language'])})"
diff --git a/codeflash/api/schemas.py b/codeflash/api/schemas.py
index 37e2c72a5..db64cb514 100644
--- a/codeflash/api/schemas.py
+++ b/codeflash/api/schemas.py
@@ -120,6 +120,10 @@ class OptimizeRequest:
     repo_name: str | None = None
     current_username: str | None = None
 
+    # === React-specific ===
+    is_react_component: bool = False
+    react_context: str = ""
+
     def to_payload(self) -> dict[str, Any]:
         """Convert to API payload dict, maintaining backward compatibility."""
         payload = {
@@ -150,6 +154,12 @@ def to_payload(self) -> dict[str, Any]:
         if self.language_info.module_system != ModuleSystem.UNKNOWN:
             payload["module_system"] = self.language_info.module_system.value
 
+        # React-specific fields
+        if self.is_react_component:
+            payload["is_react_component"] = True
+            if self.react_context:
+                payload["react_context"] = self.react_context
+
         return payload
 
 
@@ -187,6 +197,9 @@ class TestGenRequest:
     # === Metadata ===
     codeflash_version: str = ""
 
+    # === React-specific ===
+    is_react_component: bool = False
+
     def to_payload(self) -> dict[str, Any]:
         """Convert to API payload dict, maintaining backward compatibility."""
         payload = {
@@ -218,6 +231,10 @@ def to_payload(self) -> dict[str, Any]:
         if self.language_info.module_system != ModuleSystem.UNKNOWN:
             payload["module_system"] = self.language_info.module_system.value
 
+        # React-specific fields
+        if self.is_react_component:
+            payload["is_react_component"] = True
+
         return payload
 
 
diff --git a/codeflash/languages/base.py b/codeflash/languages/base.py
index 3e10da319..ce19c536b 100644
--- a/codeflash/languages/base.py
+++ b/codeflash/languages/base.py
@@ -93,6 +93,7 @@ class CodeContext:
     read_only_context: str = ""
     imports: list[str] = field(default_factory=list)
     language: Language = Language.PYTHON
+    react_context: str | None = None
 
 
 @dataclass
diff --git a/codeflash/languages/javascript/frameworks/__init__.py b/codeflash/languages/javascript/frameworks/__init__.py
new file mode 100644
index 000000000..c4bf7a8df
--- /dev/null
+++ b/codeflash/languages/javascript/frameworks/__init__.py
@@ -0,0 +1 @@
+"""Framework detection and support for JavaScript/TypeScript projects."""
diff --git a/codeflash/languages/javascript/frameworks/detector.py b/codeflash/languages/javascript/frameworks/detector.py
new file mode 100644
index 000000000..f4905c593
--- /dev/null
+++ b/codeflash/languages/javascript/frameworks/detector.py
@@ -0,0 +1,97 @@
+"""Framework detection for JavaScript/TypeScript projects.
+
+Detects React (and potentially other frameworks) by inspecting package.json
+dependencies. Results are cached per project root.
+"""
+
+from __future__ import annotations
+
+import json
+import logging
+from dataclasses import dataclass, field
+from functools import lru_cache
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from pathlib import Path
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass(frozen=True)
+class FrameworkInfo:
+    """Information about the frontend framework used in a project."""
+
+    name: str  # "react", "vue", "angular", "none"
+    version: str | None = None  # e.g., "18.2.0"
+    react_version_major: int | None = None  # e.g., 18
+    has_testing_library: bool = False  # @testing-library/react installed
+    has_react_compiler: bool = False  # React 19+ compiler detected
+    dev_dependencies: frozenset[str] = field(default_factory=frozenset)
+
+
+_EMPTY_FRAMEWORK = FrameworkInfo(name="none")
+
+
+@lru_cache(maxsize=32)
+def detect_framework(project_root: Path) -> FrameworkInfo:
+    """Detect the frontend framework from package.json.
+
+    Reads dependencies and devDependencies to identify React and its ecosystem.
+    Results are cached per project root path.
+    """
+    package_json_path = project_root / "package.json"
+    if not package_json_path.exists():
+        return _EMPTY_FRAMEWORK
+
+    try:
+        package_data = json.loads(package_json_path.read_text(encoding="utf-8"))
+    except (json.JSONDecodeError, OSError) as e:
+        logger.debug("Failed to read package.json at %s: %s", package_json_path, e)
+        return _EMPTY_FRAMEWORK
+
+    deps = package_data.get("dependencies", {})
+    dev_deps = package_data.get("devDependencies", {})
+    all_deps = {**deps, **dev_deps}
+
+    # Detect React
+    react_version_str = deps.get("react") or dev_deps.get("react")
+    if not react_version_str:
+        return _EMPTY_FRAMEWORK
+
+    version = _parse_version_string(react_version_str)
+    major = _parse_major_version(version)
+
+    has_testing_library = "@testing-library/react" in all_deps
+    has_react_compiler = (
+        "babel-plugin-react-compiler" in all_deps
+        or "react-compiler-runtime" in all_deps
+        or (major is not None and major >= 19)
+    )
+
+    return FrameworkInfo(
+        name="react",
+        version=version,
+        react_version_major=major,
+        has_testing_library=has_testing_library,
+        has_react_compiler=has_react_compiler,
+        dev_dependencies=frozenset(all_deps.keys()),
+    )
+
+
+def _parse_version_string(version_spec: str) -> str | None:
+    """Extract a clean version from a semver range like ^18.2.0 or ~17.0.0."""
+    stripped = version_spec.lstrip("^~>=<! ")
+    if stripped and stripped[0].isdigit():
+        return stripped
+    return None
+
+
+def _parse_major_version(version: str | None) -> int | None:
+    """Extract major version number from a version string."""
+    if not version:
+        return None
+    try:
+        return int(version.split(".")[0])
+    except (ValueError, IndexError):
+        return None
diff --git a/codeflash/languages/javascript/frameworks/react/__init__.py b/codeflash/languages/javascript/frameworks/react/__init__.py
new file mode 100644
index 000000000..c7622b0d6
--- /dev/null
+++ b/codeflash/languages/javascript/frameworks/react/__init__.py
@@ -0,0 +1 @@
+"""React framework support for component discovery, profiling, and optimization."""
diff --git a/codeflash/languages/javascript/frameworks/react/analyzer.py b/codeflash/languages/javascript/frameworks/react/analyzer.py
new file mode 100644
index 000000000..2de39c802
--- /dev/null
+++ b/codeflash/languages/javascript/frameworks/react/analyzer.py
@@ -0,0 +1,159 @@
+"""Static analysis for React optimization opportunities.
+
+Detects common performance anti-patterns in React components:
+- Inline object/array creation in JSX props
+- Functions defined inside render body (missing useCallback)
+- Expensive computations without useMemo
+- Components receiving referentially unstable props
+"""
+
+from __future__ import annotations
+
+import re
+from dataclasses import dataclass
+from enum import Enum
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from codeflash.languages.javascript.frameworks.react.discovery import ReactComponentInfo
+
+
+class OpportunitySeverity(str, Enum):
+    HIGH = "high"
+    MEDIUM = "medium"
+    LOW = "low"
+
+
+class OpportunityType(str, Enum):
+    INLINE_OBJECT_PROP = "inline_object_prop"
+    INLINE_ARRAY_PROP = "inline_array_prop"
+    MISSING_USECALLBACK = "missing_usecallback"
+    MISSING_USEMEMO = "missing_usememo"
+    MISSING_REACT_MEMO = "missing_react_memo"
+    UNSTABLE_REFERENCE = "unstable_reference"
+
+
+@dataclass(frozen=True)
+class OptimizationOpportunity:
+    """A detected optimization opportunity in a React component."""
+
+    type: OpportunityType
+    line: int
+    description: str
+    severity: OpportunitySeverity
+
+
+# Patterns for expensive operations inside render body
+EXPENSIVE_OPS_RE = re.compile(r"\.(filter|map|sort|reduce|flatMap|find|findIndex|every|some)\s*\(")
+INLINE_OBJECT_IN_JSX_RE = re.compile(r"=\{\s*\{")  # ={{ ... }} in JSX
+INLINE_ARRAY_IN_JSX_RE = re.compile(r"=\{\s*\[")  # ={[ ... ]} in JSX
+FUNCTION_DEF_RE = re.compile(
+    r"(?:const|let|var)\s+\w+\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_]\w*)\s*=>"
+    r"|function\s+\w+\s*\("
+)
+USECALLBACK_RE = re.compile(r"\buseCallback\s*\(")
+USEMEMO_RE = re.compile(r"\buseMemo\s*\(")
+
+
+def detect_optimization_opportunities(source: str, component_info: ReactComponentInfo) -> list[OptimizationOpportunity]:
+    """Detect optimization opportunities in a React component."""
+    opportunities: list[OptimizationOpportunity] = []
+    lines = source.splitlines()
+
+    # Only analyze the component's own lines
+    start = component_info.start_line - 1
+    end = min(component_info.end_line, len(lines))
+    component_lines = lines[start:end]
+    component_source = "\n".join(component_lines)
+
+    # Check for inline objects in JSX props
+    _detect_inline_props(component_lines, start, opportunities)
+
+    # Check for functions defined in render body without useCallback
+    _detect_missing_usecallback(component_source, component_lines, start, opportunities)
+
+    # Check for expensive computations without useMemo
+    _detect_missing_usememo(component_source, component_lines, start, opportunities)
+
+    # Check if component should be wrapped in React.memo
+    if not component_info.is_memoized:
+        opportunities.append(
+            OptimizationOpportunity(
+                type=OpportunityType.MISSING_REACT_MEMO,
+                line=component_info.start_line,
+                description=f"Component '{component_info.function_name}' is not wrapped in React.memo(). "
+                "If it receives stable props, wrapping can prevent unnecessary re-renders.",
+                severity=OpportunitySeverity.MEDIUM,
+            )
+        )
+
+    return opportunities
+
+
+def _detect_inline_props(lines: list[str], offset: int, opportunities: list[OptimizationOpportunity]) -> None:
+    """Detect inline object/array literals in JSX prop positions."""
+    for i, line in enumerate(lines):
+        line_num = offset + i + 1
+        if INLINE_OBJECT_IN_JSX_RE.search(line):
+            opportunities.append(
+                OptimizationOpportunity(
+                    type=OpportunityType.INLINE_OBJECT_PROP,
+                    line=line_num,
+                    description="Inline object literal in JSX prop creates a new reference on every render. "
+                    "Extract to useMemo or a module-level constant.",
+                    severity=OpportunitySeverity.HIGH,
+                )
+            )
+        if INLINE_ARRAY_IN_JSX_RE.search(line):
+            opportunities.append(
+                OptimizationOpportunity(
+                    type=OpportunityType.INLINE_ARRAY_PROP,
+                    line=line_num,
+                    description="Inline array literal in JSX prop creates a new reference on every render. "
+                    "Extract to useMemo or a module-level constant.",
+                    severity=OpportunitySeverity.HIGH,
+                )
+            )
+
+
+def _detect_missing_usecallback(
+    component_source: str, lines: list[str], offset: int, opportunities: list[OptimizationOpportunity]
+) -> None:
+    """Detect arrow functions or function expressions that could use useCallback."""
+    has_usecallback = bool(USECALLBACK_RE.search(component_source))
+
+    for i, line in enumerate(lines):
+        line_num = offset + i + 1
+        stripped = line.strip()
+        # Look for arrow function or function expression definitions inside the component
+        if FUNCTION_DEF_RE.search(stripped) and "useCallback" not in stripped and "useMemo" not in stripped:
+            # Skip if the component already uses useCallback extensively
+            if not has_usecallback:
+                opportunities.append(
+                    OptimizationOpportunity(
+                        type=OpportunityType.MISSING_USECALLBACK,
+                        line=line_num,
+                        description="Function defined inside render body creates a new reference on every render. "
+                        "Wrap with useCallback() if passed as a prop to child components.",
+                        severity=OpportunitySeverity.MEDIUM,
+                    )
+                )
+
+
+def _detect_missing_usememo(
+    component_source: str, lines: list[str], offset: int, opportunities: list[OptimizationOpportunity]
+) -> None:
+    """Detect expensive computations that could benefit from useMemo."""
+    for i, line in enumerate(lines):
+        line_num = offset + i + 1
+        stripped = line.strip()
+        if EXPENSIVE_OPS_RE.search(stripped) and "useMemo" not in stripped:
+            opportunities.append(
+                OptimizationOpportunity(
+                    type=OpportunityType.MISSING_USEMEMO,
+                    line=line_num,
+                    description="Expensive array operation in render body runs on every render. "
+                    "Wrap with useMemo() and specify dependencies.",
+                    severity=OpportunitySeverity.HIGH,
+                )
+            )
diff --git a/codeflash/languages/javascript/frameworks/react/benchmarking.py b/codeflash/languages/javascript/frameworks/react/benchmarking.py
new file mode 100644
index 000000000..0ef29f648
--- /dev/null
+++ b/codeflash/languages/javascript/frameworks/react/benchmarking.py
@@ -0,0 +1,98 @@
+"""React render benchmarking and comparison.
+
+Compares original vs optimized render profiles from React Profiler
+instrumentation to quantify re-render reduction and render time improvement.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from codeflash.languages.javascript.parse import RenderProfile
+
+
+@dataclass(frozen=True)
+class RenderBenchmark:
+    """Comparison of original vs optimized render metrics."""
+
+    component_name: str
+    original_render_count: int
+    optimized_render_count: int
+    original_avg_duration_ms: float
+    optimized_avg_duration_ms: float
+
+    @property
+    def render_count_reduction_pct(self) -> float:
+        """Percentage reduction in render count (0-100)."""
+        if self.original_render_count == 0:
+            return 0.0
+        return (self.original_render_count - self.optimized_render_count) / self.original_render_count * 100
+
+    @property
+    def duration_reduction_pct(self) -> float:
+        """Percentage reduction in render duration (0-100)."""
+        if self.original_avg_duration_ms == 0:
+            return 0.0
+        return (self.original_avg_duration_ms - self.optimized_avg_duration_ms) / self.original_avg_duration_ms * 100
+
+    @property
+    def render_speedup_x(self) -> float:
+        """Render time speedup factor (e.g., 2.5x means 2.5 times faster)."""
+        if self.optimized_avg_duration_ms == 0:
+            return 0.0
+        return self.original_avg_duration_ms / self.optimized_avg_duration_ms
+
+
+def compare_render_benchmarks(
+    original_profiles: list[RenderProfile], optimized_profiles: list[RenderProfile]
+) -> RenderBenchmark | None:
+    """Compare original and optimized render profiles.
+
+    Aggregates render counts and durations across all render events
+    for the same component, then computes the benchmark comparison.
+    """
+    if not original_profiles or not optimized_profiles:
+        return None
+
+    # Use the first profile's component name
+    component_name = original_profiles[0].component_name
+
+    # Aggregate original metrics
+    orig_count = max((p.render_count for p in original_profiles), default=0)
+    orig_durations = [p.actual_duration_ms for p in original_profiles]
+    orig_avg_duration = sum(orig_durations) / len(orig_durations) if orig_durations else 0.0
+
+    # Aggregate optimized metrics
+    opt_count = max((p.render_count for p in optimized_profiles), default=0)
+    opt_durations = [p.actual_duration_ms for p in optimized_profiles]
+    opt_avg_duration = sum(opt_durations) / len(opt_durations) if opt_durations else 0.0
+
+    return RenderBenchmark(
+        component_name=component_name,
+        original_render_count=orig_count,
+        optimized_render_count=opt_count,
+        original_avg_duration_ms=orig_avg_duration,
+        optimized_avg_duration_ms=opt_avg_duration,
+    )
+
+
+def format_render_benchmark_for_pr(benchmark: RenderBenchmark) -> str:
+    """Format render benchmark data for PR comment body."""
+    lines = [
+        "### React Render Performance",
+        "",
+        "| Metric | Before | After | Improvement |",
+        "|--------|--------|-------|-------------|",
+        f"| Renders | {benchmark.original_render_count} | {benchmark.optimized_render_count} "
+        f"| {benchmark.render_count_reduction_pct:.1f}% fewer |",
+        f"| Avg render time | {benchmark.original_avg_duration_ms:.2f}ms "
+        f"| {benchmark.optimized_avg_duration_ms:.2f}ms "
+        f"| {benchmark.duration_reduction_pct:.1f}% faster |",
+    ]
+
+    if benchmark.render_speedup_x > 1:
+        lines.append(f"\nRender time improved **{benchmark.render_speedup_x:.1f}x**.")
+
+    return "\n".join(lines)
diff --git a/codeflash/languages/javascript/frameworks/react/context.py b/codeflash/languages/javascript/frameworks/react/context.py
new file mode 100644
index 000000000..83b927ed3
--- /dev/null
+++ b/codeflash/languages/javascript/frameworks/react/context.py
@@ -0,0 +1,198 @@
+"""React-specific context extraction for component optimization.
+
+Extracts props interfaces, hook usage, parent/child component relationships,
+context subscriptions, and optimization opportunities from React components.
+"""
+
+from __future__ import annotations
+
+import logging
+import re
+from dataclasses import dataclass, field
+from typing import TYPE_CHECKING
+
+from codeflash.languages.javascript.frameworks.react.analyzer import detect_optimization_opportunities
+
+if TYPE_CHECKING:
+    from pathlib import Path
+
+    from tree_sitter import Node
+
+    from codeflash.languages.javascript.frameworks.react.analyzer import OptimizationOpportunity
+    from codeflash.languages.javascript.frameworks.react.discovery import ReactComponentInfo
+    from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer
+
+_HOOK_PATTERN = re.compile(r"\b(use[A-Z]\w*)\s*(?:<[^>]*>)?\s*\(")
+
+_JSX_COMPONENT_RE = re.compile(r"<([A-Z][a-zA-Z0-9.]*)")
+
+_CONTEXT_RE = re.compile(r"\buseContext\s*\(\s*(\w+)")
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class HookUsage:
+    """Represents a hook call within a component."""
+
+    name: str
+    has_dependency_array: bool = False
+    dependency_count: int = 0
+
+
+@dataclass
+class ReactContext:
+    """Context information for a React component, used in LLM prompts."""
+
+    props_interface: str | None = None
+    hooks_used: list[HookUsage] = field(default_factory=list)
+    parent_usages: list[str] = field(default_factory=list)
+    child_components: list[str] = field(default_factory=list)
+    context_subscriptions: list[str] = field(default_factory=list)
+    is_already_memoized: bool = False
+    optimization_opportunities: list[OptimizationOpportunity] = field(default_factory=list)
+
+    def to_prompt_string(self) -> str:
+        """Format this context for inclusion in an LLM optimization prompt."""
+        parts: list[str] = []
+
+        if self.props_interface:
+            parts.append(f"Props interface:\n```typescript\n{self.props_interface}\n```")
+
+        if self.hooks_used:
+            hook_lines = []
+            for hook in self.hooks_used:
+                dep_info = f" (deps: {hook.dependency_count})" if hook.has_dependency_array else " (no deps)"
+                hook_lines.append(f"  - {hook.name}{dep_info}")
+            parts.append("Hooks used:\n" + "\n".join(hook_lines))
+
+        if self.child_components:
+            parts.append("Child components rendered: " + ", ".join(self.child_components))
+
+        if self.context_subscriptions:
+            parts.append("Context subscriptions: " + ", ".join(self.context_subscriptions))
+
+        if self.is_already_memoized:
+            parts.append("Note: Component is already wrapped in React.memo()")
+
+        if self.optimization_opportunities:
+            opp_lines = []
+            for opp in self.optimization_opportunities:
+                opp_lines.append(f"  - [{opp.severity.value}] Line {opp.line}: {opp.description}")
+            parts.append("Detected optimization opportunities:\n" + "\n".join(opp_lines))
+
+        return "\n\n".join(parts)
+
+
+def extract_react_context(
+    component_info: ReactComponentInfo, source: str, analyzer: TreeSitterAnalyzer, module_root: Path
+) -> ReactContext:
+    """Extract React-specific context for a component.
+
+    Analyzes the component source to find props types, hooks, child components,
+    and optimization opportunities.
+    """
+    context = ReactContext(props_interface=component_info.props_type, is_already_memoized=component_info.is_memoized)
+
+    # Extract hook usage details from the component source
+    lines = source.splitlines()
+    start = component_info.start_line - 1
+    end = min(component_info.end_line, len(lines))
+    component_source = "\n".join(lines[start:end])
+
+    context.hooks_used = _extract_hook_usages(component_source)
+    context.child_components = _extract_child_components(component_source, analyzer, source)
+    context.context_subscriptions = _extract_context_subscriptions(component_source)
+    context.optimization_opportunities = detect_optimization_opportunities(source, component_info)
+
+    # Extract full props interface definition if we have a type name
+    if component_info.props_type:
+        full_interface = _find_type_definition(component_info.props_type, source, analyzer)
+        if full_interface:
+            context.props_interface = full_interface
+
+    return context
+
+
+def _extract_hook_usages(component_source: str) -> list[HookUsage]:
+    """Parse hook calls and their dependency arrays from component source."""
+    hooks: list[HookUsage] = []
+    cs = component_source
+    n = len(cs)
+
+    # Use precompiled pattern
+    for match in _HOOK_PATTERN.finditer(cs):
+        hook_name = match.group(1)
+        has_deps = False
+        dep_count = 0
+
+        # Simple heuristic: count brackets to find dependency array
+        bracket_depth = 1
+        j = match.end()
+        # Scan by index to avoid allocating a new substring for the rest_of_line on each iteration
+        while j < n:
+            char = cs[j]
+            if char == "(":
+                bracket_depth += 1
+            elif char == ")":
+                bracket_depth -= 1
+                if bracket_depth == 0:
+                    # Find last non-space character before this closing paren
+                    k = j - 1
+                    while k >= match.end() and cs[k].isspace():
+                        k -= 1
+                    if k >= match.end() and cs[k] == "]":
+                        has_deps = True
+                        # Find the opening '[' for the dependency array within the search window
+                        array_start = cs.rfind("[", match.end(), k + 1)
+                        if array_start >= 0:
+                            array_content = cs[array_start + 1 : k].strip()
+                            if array_content:
+                                dep_count = array_content.count(",") + 1
+                            else:
+                                dep_count = 0  # empty deps []
+                                has_deps = True
+                    break
+
+            j += 1
+
+        hooks.append(HookUsage(name=hook_name, has_dependency_array=has_deps, dependency_count=dep_count))
+
+    return hooks
+
+
+def _extract_child_components(component_source: str, analyzer: TreeSitterAnalyzer, full_source: str) -> list[str]:
+    """Find child component names rendered in JSX."""
+    children = set()
+    for match in _JSX_COMPONENT_RE.finditer(component_source):
+        name = match.group(1)
+        # Skip React built-ins like React.Fragment
+        if name not in ("React.Fragment", "Fragment", "Suspense", "React.Suspense"):
+            children.add(name)
+    return sorted(children)
+
+
+def _extract_context_subscriptions(component_source: str) -> list[str]:
+    """Find React context subscriptions via useContext calls."""
+    return [match.group(1) for match in _CONTEXT_RE.finditer(component_source)]
+
+
+def _find_type_definition(type_name: str, source: str, analyzer: TreeSitterAnalyzer) -> str | None:
+    """Find the full type/interface definition for a props type."""
+    source_bytes = source.encode("utf-8")
+    tree = analyzer.parse(source_bytes)
+
+    def search_node(node: Node) -> str | None:
+        if node.type in ("interface_declaration", "type_alias_declaration"):
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                name = source_bytes[name_node.start_byte : name_node.end_byte].decode("utf-8")
+                if name == type_name:
+                    return source_bytes[node.start_byte : node.end_byte].decode("utf-8")
+        for child in node.children:
+            result = search_node(child)
+            if result:
+                return result
+        return None
+
+    return search_node(tree.root_node)
diff --git a/codeflash/languages/javascript/frameworks/react/discovery.py b/codeflash/languages/javascript/frameworks/react/discovery.py
new file mode 100644
index 000000000..a7f231488
--- /dev/null
+++ b/codeflash/languages/javascript/frameworks/react/discovery.py
@@ -0,0 +1,261 @@
+"""React component discovery via tree-sitter analysis.
+
+Identifies React components (function, arrow, class) and hooks by analyzing
+PascalCase naming, JSX returns, and hook usage patterns.
+"""
+
+from __future__ import annotations
+
+import logging
+import re
+from dataclasses import dataclass
+from enum import Enum
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from pathlib import Path
+
+    from tree_sitter import Node
+
+    from codeflash.languages.javascript.treesitter import FunctionNode, TreeSitterAnalyzer
+
+_JSX_TYPES = frozenset(
+    ("jsx_element", "jsx_self_closing_element", "jsx_fragment", "jsx_expression", "jsx_opening_element")
+)
+
+logger = logging.getLogger(__name__)
+
+PASCAL_CASE_RE = re.compile(r"^[A-Z][a-zA-Z0-9]*$")
+HOOK_CALL_RE = re.compile(r"\buse[A-Z]\w*\s*(?:<[^>]*>)?\s*\(")
+HOOK_NAME_RE = re.compile(r"^use[A-Z]\w*$")
+
+# Built-in React hooks
+BUILTIN_HOOKS = frozenset(
+    {
+        "useState",
+        "useEffect",
+        "useContext",
+        "useReducer",
+        "useCallback",
+        "useMemo",
+        "useRef",
+        "useImperativeHandle",
+        "useLayoutEffect",
+        "useInsertionEffect",
+        "useDebugValue",
+        "useDeferredValue",
+        "useTransition",
+        "useId",
+        "useSyncExternalStore",
+        "useOptimistic",
+        "useActionState",
+        "useFormStatus",
+    }
+)
+
+
+class ComponentType(str, Enum):
+    FUNCTION = "function"
+    ARROW = "arrow"
+    CLASS = "class"
+    HOOK = "hook"
+
+
+@dataclass(frozen=True)
+class ReactComponentInfo:
+    """Information about a discovered React component or hook."""
+
+    function_name: str
+    component_type: ComponentType
+    uses_hooks: tuple[str, ...] = ()
+    returns_jsx: bool = False
+    props_type: str | None = None
+    is_memoized: bool = False
+    start_line: int = 0
+    end_line: int = 0
+
+
+def is_react_component(func: FunctionNode, source: str, analyzer: TreeSitterAnalyzer) -> bool:
+    """Check if a function is a React component.
+
+    A React component:
+    - Has a PascalCase name
+    - Returns JSX (or could be a hook if named use*)
+    - Is not a class method (standalone function)
+    """
+    if func.is_method:
+        return False
+
+    name = func.name
+
+    # Hooks (useXxx) are not components
+    if HOOK_NAME_RE.match(name):
+        return False
+
+    if not PASCAL_CASE_RE.match(name):
+        return False
+
+    return _function_returns_jsx(func, source, analyzer)
+
+
+def is_react_hook(func: FunctionNode) -> bool:
+    """Check if a function is a custom React hook (useXxx naming)."""
+    return bool(HOOK_NAME_RE.match(func.name)) and not func.is_method
+
+
+def classify_component(func: FunctionNode, source: str, analyzer: TreeSitterAnalyzer) -> ComponentType | None:
+    """Classify a function as a React component type, hook, or None."""
+    if is_react_hook(func):
+        return ComponentType.HOOK
+
+    if not is_react_component(func, source, analyzer):
+        return None
+
+    if func.is_arrow:
+        return ComponentType.ARROW
+
+    return ComponentType.FUNCTION
+
+
+def find_react_components(source: str, file_path: Path, analyzer: TreeSitterAnalyzer) -> list[ReactComponentInfo]:
+    """Find all React components and hooks in a source file.
+
+    Skips files with "use server" directive (Next.js Server Components).
+    """
+    # Skip Server Components
+    if _has_server_directive(source):
+        logger.debug("Skipping server component file: %s", file_path)
+        return []
+
+    functions = analyzer.find_functions(source, include_methods=False, include_arrow_functions=True, require_name=True)
+
+    components: list[ReactComponentInfo] = []
+    for func in functions:
+        comp_type = classify_component(func, source, analyzer)
+        if comp_type is None:
+            continue
+
+        hooks_used = _extract_hooks_used(func.source_text)
+        props_type = _extract_props_type(func, source, analyzer)
+        is_memoized = _is_wrapped_in_memo(func, source)
+
+        components.append(
+            ReactComponentInfo(
+                function_name=func.name,
+                component_type=comp_type,
+                uses_hooks=tuple(hooks_used),
+                returns_jsx=comp_type != ComponentType.HOOK and _function_returns_jsx(func, source, analyzer),
+                props_type=props_type,
+                is_memoized=is_memoized,
+                start_line=func.start_line,
+                end_line=func.end_line,
+            )
+        )
+
+    return components
+
+
+def _has_server_directive(source: str) -> bool:
+    """Check for 'use server' directive at the top of the file."""
+    for line in source.splitlines()[:5]:
+        stripped = line.strip()
+        if stripped in ('"use server"', "'use server'", '"use server";', "'use server';"):
+            return True
+        if stripped and not stripped.startswith("//") and not stripped.startswith("/*"):
+            break
+    return False
+
+
+def _function_returns_jsx(func: FunctionNode, source: str, analyzer: TreeSitterAnalyzer) -> bool:
+    """Check if a function returns JSX by looking for jsx_element/jsx_self_closing_element nodes."""
+    source_bytes = source.encode("utf-8")
+    node = func.node
+
+    # For arrow functions with expression body (implicit return), check the body directly
+    body = node.child_by_field_name("body")
+    if body:
+        return _node_contains_jsx(body)
+
+    return False
+
+
+def _node_contains_jsx(node: Node) -> bool:
+    """Recursively check if a tree-sitter node contains JSX."""
+    stack = [node]
+    while stack:
+        current = stack.pop()
+        if current.type in _JSX_TYPES:
+            return True
+        stack.extend(current.children)
+    return False
+
+
+HOOK_EXTRACT_RE = re.compile(r"\b(use[A-Z]\w*)\s*(?:<[^>]*>)?\s*\(")
+
+
+def _extract_hooks_used(function_source: str) -> list[str]:
+    """Extract hook names called within a function body."""
+    hooks = []
+    seen = set()
+    for match in HOOK_EXTRACT_RE.finditer(function_source):
+        hook_name = match.group(1)
+        if hook_name not in seen:
+            seen.add(hook_name)
+            hooks.append(hook_name)
+    return hooks
+
+
+def _extract_props_type(func: FunctionNode, source: str, analyzer: TreeSitterAnalyzer) -> str | None:
+    """Extract the TypeScript props type annotation from a component's parameters."""
+    source_bytes = source.encode("utf-8")
+    node = func.node
+
+    # Look for formal_parameters -> type_annotation
+    params = node.child_by_field_name("parameters")
+    if not params:
+        return None
+
+    for param in params.children:
+        # Look for type annotation on first parameter
+        if param.type in ("required_parameter", "optional_parameter"):
+            type_node = param.child_by_field_name("type")
+            if type_node:
+                # Get the type annotation node (skip the colon)
+                for child in type_node.children:
+                    if child.type != ":":
+                        return source_bytes[child.start_byte : child.end_byte].decode("utf-8")
+        # Destructured params with type: { foo, bar }: Props
+        if param.type == "object_pattern":
+            # Look for next sibling that is a type_annotation
+            next_sib = param.next_named_sibling
+            if next_sib and next_sib.type == "type_annotation":
+                for child in next_sib.children:
+                    if child.type != ":":
+                        return source_bytes[child.start_byte : child.end_byte].decode("utf-8")
+
+    return None
+
+
+def _is_wrapped_in_memo(func: FunctionNode, source: str) -> bool:
+    """Check if the component is already wrapped in React.memo or memo()."""
+    # Check if the variable declaration wrapping this function uses memo()
+    # e.g., const MyComp = React.memo(function MyComp(...) {...})
+    # or    const MyComp = memo((...) => {...})
+    node = func.node
+    parent = node.parent
+
+    while parent:
+        if parent.type == "call_expression":
+            func_node = parent.child_by_field_name("function")
+            if func_node:
+                source_bytes = source.encode("utf-8")
+                func_text = source_bytes[func_node.start_byte : func_node.end_byte].decode("utf-8")
+                if func_text in ("React.memo", "memo"):
+                    return True
+        parent = parent.parent
+
+    # Also check for memo wrapping at the export level:
+    # export default memo(MyComponent)
+    name = func.name
+    memo_patterns = [f"React.memo({name})", f"memo({name})", f"React.memo({name},", f"memo({name},"]
+    return any(pattern in source for pattern in memo_patterns)
diff --git a/codeflash/languages/javascript/frameworks/react/profiler.py b/codeflash/languages/javascript/frameworks/react/profiler.py
new file mode 100644
index 000000000..0723b139f
--- /dev/null
+++ b/codeflash/languages/javascript/frameworks/react/profiler.py
@@ -0,0 +1,346 @@
+"""React Profiler instrumentation for render counting and timing.
+
+Wraps React components with React.Profiler to capture render count,
+phase (mount/update), actualDuration, and baseDuration. Outputs structured
+markers parseable by the existing marker-parsing infrastructure.
+
+Marker format:
+    !######REACT_RENDER:{component}:{phase}:{actualDuration}:{baseDuration}:{count}######!
+"""
+
+from __future__ import annotations
+
+import logging
+import re
+from functools import cache, lru_cache
+from typing import TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from pathlib import Path
+
+    from tree_sitter import Node
+
+    from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer
+
+_SAFE_NAME_RE = re.compile(r"[^a-zA-Z0-9_]")
+
+logger = logging.getLogger(__name__)
+
+MARKER_PREFIX = "REACT_RENDER"
+
+
+def generate_render_counter_code(component_name: str) -> str:
+    """Generate the onRender callback and counter variable for Profiler instrumentation."""
+    return _build_render_counter_code(component_name, MARKER_PREFIX)
+
+
+def instrument_component_with_profiler(source: str, component_name: str, analyzer: TreeSitterAnalyzer) -> str:
+    """Instrument a single component with React.Profiler.
+
+    Wraps all JSX return statements with <React.Profiler> and adds the
+    onRender callback + counter at module scope.
+
+    Handles:
+    - Single return statements
+    - Conditional returns (if/else)
+    - Fragment returns (<>...</>)
+    - Early returns (leaves non-JSX returns alone)
+    """
+    source_bytes = _encode_cached(source)
+    tree = analyzer.parse(source_bytes)
+
+    safe_name = _SAFE_NAME_RE.sub("_", component_name)
+    profiler_id = component_name
+
+    # Find the component function node
+    func_node = _find_component_function(tree.root_node, component_name, source_bytes)
+    if func_node is None:
+        logger.debug("Could not find component function: %s", component_name)
+        return source
+
+    # Find all return statements with JSX inside this function
+    return_nodes = _find_jsx_returns(func_node, source_bytes)
+    if not return_nodes:
+        logger.debug("No JSX return statements found in: %s", component_name)
+        return source
+
+    # Compute all wrapped segments based on original source bytes, then build final string once.
+    # This avoids repeated slicing/concatenation of the full source for each replacement.
+    replacements: list[tuple[int, int, str]] = []
+    for ret_node in sorted(return_nodes, key=lambda n: n.start_byte):
+        computed = _compute_wrapped_segment(source_bytes, ret_node, profiler_id, safe_name)
+        if computed is not None:
+            replacements.append(computed)
+
+    if replacements:
+        # Reconstruct result in a single pass
+        parts: list[str] = []
+        prev = 0
+        for start, end, wrapped in replacements:
+            # Use original source slices (string indices expected by original logic)
+            parts.append(source[prev:start])
+            parts.append(wrapped)
+            prev = end
+        parts.append(source[prev:])
+        result = "".join(parts)
+    else:
+        result = source
+
+    # Add render counter code at the top (after imports) using the already-parsed tree
+
+    # Add render counter code at the top (after imports)
+    counter_code = generate_render_counter_code(component_name)
+
+    # Inline logic similar to _insert_after_imports but reuse existing `tree` to avoid re-parsing
+    last_import_end = 0
+    for child in tree.root_node.children:
+        if child.type == "import_statement":
+            last_import_end = child.end_byte
+
+    insert_pos = last_import_end
+    while insert_pos < len(result) and result[insert_pos] != "\n":
+        insert_pos += 1
+    if insert_pos < len(result):
+        insert_pos += 1  # skip the newline
+
+    result = result[:insert_pos] + "\n" + counter_code + "\n\n" + result[insert_pos:]
+
+    # Ensure React is imported
+
+    # Ensure React is imported
+    return _ensure_react_import(result)
+
+
+def instrument_all_components_for_tracing(source: str, file_path: Path, analyzer: TreeSitterAnalyzer) -> str:
+    """Instrument ALL components in a file for tracing/discovery mode."""
+    from codeflash.languages.javascript.frameworks.react.discovery import find_react_components
+
+    components = find_react_components(source, file_path, analyzer)
+    if not components:
+        return source
+
+    result = source
+    # Process in reverse order by start_line to preserve positions
+    for comp in sorted(components, key=lambda c: c.start_line, reverse=True):
+        if comp.returns_jsx:
+            result = instrument_component_with_profiler(result, comp.function_name, analyzer)
+
+    return result
+
+
+def _find_component_function(root_node: Node, component_name: str, source_bytes: bytes) -> Node | None:
+    """Find the tree-sitter node for a named component function."""
+    # Check function declarations
+    if root_node.type == "function_declaration":
+        name_node = root_node.child_by_field_name("name")
+        if name_node:
+            name = source_bytes[name_node.start_byte : name_node.end_byte].decode("utf-8")
+            if name == component_name:
+                return root_node
+
+    # Check variable declarators with arrow functions (const MyComp = () => ...)
+    if root_node.type == "variable_declarator":
+        name_node = root_node.child_by_field_name("name")
+        if name_node:
+            name = source_bytes[name_node.start_byte : name_node.end_byte].decode("utf-8")
+            if name == component_name:
+                return root_node
+
+    # Check export statements
+    if root_node.type in ("export_statement", "lexical_declaration", "variable_declaration"):
+        for child in root_node.children:
+            result = _find_component_function(child, component_name, source_bytes)
+            if result:
+                return result
+
+    for child in root_node.children:
+        result = _find_component_function(child, component_name, source_bytes)
+        if result:
+            return result
+
+    return None
+
+
+def _find_jsx_returns(func_node: Node, source_bytes: bytes) -> list[Node]:
+    """Find all return statements that contain JSX within a function node."""
+    returns: list[Node] = []
+
+    def walk(node: Node) -> None:
+        # Don't descend into nested functions
+        if node != func_node and node.type in (
+            "function_declaration",
+            "arrow_function",
+            "function",
+            "method_definition",
+        ):
+            return
+
+        if node.type == "return_statement":
+            # Check if return value contains JSX
+            for child in node.children:
+                if _contains_jsx(child):
+                    returns.append(node)
+                    break
+        else:
+            for child in node.children:
+                walk(child)
+
+    walk(func_node)
+    return returns
+
+
+def _contains_jsx(node: Node) -> bool:
+    """Check if a tree-sitter node contains JSX elements."""
+    if node.type in ("jsx_element", "jsx_self_closing_element", "jsx_fragment"):
+        return True
+    return any(_contains_jsx(child) for child in node.children)
+
+
+def _wrap_return_with_profiler(source: str, return_node: Node, profiler_id: str, safe_name: str) -> str:
+    """Wrap a return statement's JSX with React.Profiler."""
+    source_bytes = source.encode("utf-8")
+
+    # Find the JSX part of the return (skip "return" keyword and whitespace)
+    jsx_start = None
+    jsx_end = return_node.end_byte
+
+    paren_child = None
+
+    for child in return_node.children:
+        if child.type == "return":
+            continue
+        if child.type == ";":
+            jsx_end = child.start_byte
+            continue
+        if child.type == "parenthesized_expression" and paren_child is None:
+            paren_child = child
+        if _contains_jsx(child):
+            jsx_start = child.start_byte
+            jsx_end = child.end_byte
+            break
+
+    if jsx_start is None:
+        return source
+
+    # Check if the return uses parentheses: return (...)
+    # If so, we need to wrap inside the parens
+    if paren_child is not None:
+        has_parens = True
+        jsx_start = paren_child.start_byte + 1  # skip (
+        jsx_end = paren_child.end_byte - 1  # skip )
+    else:
+        has_parens = False
+
+    jsx_content = source_bytes[jsx_start:jsx_end].decode("utf-8").strip()
+
+    wrapped = (
+        f'<React.Profiler id="{profiler_id}" onRender={{_codeflashOnRender_{safe_name}}}>'
+        f"\n{jsx_content}\n"
+        f"</React.Profiler>"
+    )
+
+    return source[:jsx_start] + wrapped + source[jsx_end:]
+
+
+def _insert_after_imports(source: str, code: str, analyzer: TreeSitterAnalyzer) -> str:
+    """Insert code after the last import statement."""
+    source_bytes = source.encode("utf-8")
+    tree = analyzer.parse(source_bytes)
+
+    last_import_end = 0
+    # Search from the end and stop at the first import_statement encountered
+    # to avoid scanning all children when the last import is near the end.
+    for child in reversed(tree.root_node.children):
+        if child.type == "import_statement":
+            last_import_end = child.end_byte
+            break
+
+    # Find end of line after last import using byte offsets to match tree-sitter.
+    nl_pos = source_bytes.find(b"\n", last_import_end)
+    if nl_pos == -1:
+        insert_pos = len(source_bytes)
+    else:
+        insert_pos = nl_pos + 1  # skip the newline
+
+    code_bytes = code.encode("utf-8")
+    new_bytes = source_bytes[:insert_pos] + b"\n" + code_bytes + b"\n\n" + source_bytes[insert_pos:]
+
+    return new_bytes.decode("utf-8")
+
+
+def _ensure_react_import(source: str) -> str:
+    """Ensure React is imported (needed for React.Profiler)."""
+    if "import React" in source or "import * as React" in source:
+        return source
+    # Add React import at the top
+    if "from 'react'" in source or 'from "react"' in source:
+        # React is imported but maybe not as the default. That's fine for JSX.
+        # We need React.Profiler so add it
+        if "React" not in source.split("from", maxsplit=1)[0] if "from" in source else "":
+            return 'import React from "react";\n' + source
+        return source
+    return 'import React from "react";\n' + source
+
+
+# Cache small number of encoded strings to avoid repeated encode() overhead
+@lru_cache(maxsize=64)
+def _encode_cached(s: str) -> bytes:
+    return s.encode("utf-8")
+
+
+def _compute_wrapped_segment(
+    source_bytes: bytes, return_node: Node, profiler_id: str, safe_name: str
+) -> tuple[int, int, str] | None:
+    """Compute the replacement segment (start, end, wrapped) for a return node.
+
+    Returns None if no JSX segment was found.
+    """
+    # Find the JSX part of the return (skip "return" keyword and whitespace)
+    jsx_start = None
+    jsx_end = return_node.end_byte
+
+    for child in return_node.children:
+        if child.type == "return":
+            continue
+        if child.type == ";":
+            jsx_end = child.start_byte
+            continue
+        if _contains_jsx(child):
+            jsx_start = child.start_byte
+            jsx_end = child.end_byte
+            break
+
+    if jsx_start is None:
+        return None
+
+    # Default jsx_content from bytes slice
+    jsx_content = source_bytes[jsx_start:jsx_end].decode("utf-8").strip()
+
+    # Check if the return uses parentheses: return (...)
+    # If so, we need to wrap inside the parens
+    for child in return_node.children:
+        if child.type == "parenthesized_expression":
+            # skip outer parentheses
+            jsx_start = child.start_byte + 1  # skip (
+            jsx_end = child.end_byte - 1  # skip )
+            jsx_content = source_bytes[jsx_start:jsx_end].decode("utf-8").strip()
+            break
+
+    wrapped = (
+        f'<React.Profiler id="{profiler_id}" onRender={{_codeflashOnRender_{safe_name}}}>'
+        f"\n{jsx_content}\n"
+        f"</React.Profiler>"
+    )
+
+    return jsx_start, jsx_end, wrapped
+
+
+@cache
+def _build_render_counter_code(component_name: str, marker_prefix: str) -> str:
+    safe_name = _SAFE_NAME_RE.sub("_", component_name)
+    return f"""\
+let _codeflash_render_count_{safe_name} = 0;
+function _codeflashOnRender_{safe_name}(id, phase, actualDuration, baseDuration) {{
+  _codeflash_render_count_{safe_name}++;
+  console.log(`!######{marker_prefix}:${{id}}:${{phase}}:${{actualDuration}}:${{baseDuration}}:${{_codeflash_render_count_{safe_name}}}######!`);
+}}"""
diff --git a/codeflash/languages/javascript/frameworks/react/testgen.py b/codeflash/languages/javascript/frameworks/react/testgen.py
new file mode 100644
index 000000000..be09e858e
--- /dev/null
+++ b/codeflash/languages/javascript/frameworks/react/testgen.py
@@ -0,0 +1,116 @@
+"""React-specific test generation helpers.
+
+Provides context building for React testgen prompts, re-render counting
+test templates, and post-processing for generated React tests.
+"""
+
+from __future__ import annotations
+
+import re
+from typing import TYPE_CHECKING, Any
+
+if TYPE_CHECKING:
+    from codeflash.languages.base import CodeContext
+    from codeflash.languages.javascript.frameworks.react.context import ReactContext
+    from codeflash.languages.javascript.frameworks.react.discovery import ReactComponentInfo
+
+
+def build_react_testgen_context(
+    component_info: ReactComponentInfo, react_context: ReactContext, code_context: CodeContext
+) -> dict[str, Any]:
+    """Assemble context dict for the React testgen LLM prompt."""
+    return {
+        "component_name": component_info.function_name,
+        "component_type": component_info.component_type.value,
+        "component_source": code_context.target_code,
+        "props_interface": react_context.props_interface or "",
+        "hooks_used": [h.name for h in react_context.hooks_used],
+        "child_components": react_context.child_components,
+        "context_subscriptions": react_context.context_subscriptions,
+        "is_memoized": component_info.is_memoized,
+        "optimization_opportunities": [
+            {"type": o.type.value, "line": o.line, "description": o.description}
+            for o in react_context.optimization_opportunities
+        ],
+        "read_only_context": code_context.read_only_context,
+        "imports": code_context.imports,
+    }
+
+
+def generate_rerender_test_template(component_name: str, props_interface: str | None = None) -> str:
+    """Generate a template test that counts re-renders for a component.
+
+    This template uses @testing-library/react's render + rerender to verify
+    that same props don't cause unnecessary re-renders.
+    """
+    props_example = "{ /* same props */ }" if not props_interface else "{ /* fill in props matching interface */ }"
+
+    return f"""\
+import {{ render }} from '@testing-library/react';
+import {{ {component_name} }} from './path-to-component';
+
+describe('{component_name} render efficiency', () => {{
+  it('should not re-render with same props', () => {{
+    let renderCount = 0;
+    const OriginalComponent = {component_name};
+
+    // Wrap to count renders
+    const CountingComponent = (props) => {{
+      renderCount++;
+      return <OriginalComponent {{...props}} />;
+    }};
+
+    const props = {props_example};
+    const {{ rerender }} = render(<CountingComponent {{...props}} />);
+
+    // Initial render
+    expect(renderCount).toBe(1);
+
+    // Re-render with same props
+    rerender(<CountingComponent {{...props}} />);
+
+    // Should not have re-rendered (if properly memoized)
+    // For non-memoized components, renderCount will be 2
+    console.log(`!######REACT_RENDER:{component_name}:rerender_test:0:0:${{renderCount}}######!`);
+  }});
+
+  it('should render correctly with props', () => {{
+    const props = {props_example};
+    const {{ container }} = render(<{component_name} {{...props}} />);
+    expect(container).toBeTruthy();
+  }});
+}});
+"""
+
+
+def post_process_react_tests(test_source: str, component_info: ReactComponentInfo) -> str:
+    """Post-process LLM-generated React tests.
+
+    Ensures:
+    - @testing-library/react imports are present
+    - act() wrapping for state updates
+    - Proper cleanup
+    """
+    result = test_source
+
+    # Ensure testing-library import
+    if "@testing-library/react" not in result:
+        result = "import { render, screen, act } from '@testing-library/react';\n" + result
+
+    # Ensure act import if state updates are detected
+    if "act(" in result and "import" in result and "act" not in result.split("from '@testing-library/react'")[0]:
+        result = result.replace("from '@testing-library/react'", "act, " + "from '@testing-library/react'", 1)
+
+    # Ensure user-event import if user interactions are tested
+    if (
+        "click" in result.lower() or "type" in result.lower() or "userEvent" in result
+    ) and "@testing-library/user-event" not in result:
+        # Add user-event import after testing-library import
+        result = re.sub(
+            r"(import .+ from '@testing-library/react';?\n)",
+            r"\1import userEvent from '@testing-library/user-event';\n",
+            result,
+            count=1,
+        )
+
+    return result
diff --git a/codeflash/languages/javascript/parse.py b/codeflash/languages/javascript/parse.py
index e3eee4831..e7e8a2ad2 100644
--- a/codeflash/languages/javascript/parse.py
+++ b/codeflash/languages/javascript/parse.py
@@ -10,13 +10,15 @@
 import contextlib
 import json
 import re
+from dataclasses import dataclass
 from pathlib import Path
-from typing import TYPE_CHECKING
+from typing import TYPE_CHECKING, Any
 
 from junitparser.xunit2 import JUnitXml
 
 from codeflash.cli_cmds.console import logger
-from codeflash.models.models import FunctionTestInvocation, InvocationId, TestResults, TestType
+from codeflash.models.models import FunctionTestInvocation, InvocationId, TestResults
+from codeflash.models.test_type import TestType
 
 if TYPE_CHECKING:
     import subprocess
@@ -31,8 +33,45 @@
 jest_start_pattern = re.compile(r"!\$######([^:]+):([^:]+):([^:]+):([^:]+):([^#]+)######\$!")
 jest_end_pattern = re.compile(r"!######([^:]+):([^:]+):([^:]+):([^:]+):([^:]+):(\d+)######!")
 
+# React Profiler render marker pattern
+# Format: !######REACT_RENDER:{component}:{phase}:{actualDuration}:{baseDuration}:{renderCount}######!
+REACT_RENDER_MARKER_PATTERN = re.compile(r"!######REACT_RENDER:([^:]+):([^:]+):([^:]+):([^:]+):(\d+)######!")
 
-def _extract_jest_console_output(suite_elem) -> str:
+
+@dataclass(frozen=True)
+class RenderProfile:
+    """Parsed React Profiler render data from a single marker."""
+
+    component_name: str
+    phase: str  # "mount" or "update"
+    actual_duration_ms: float
+    base_duration_ms: float
+    render_count: int
+
+
+def parse_react_render_markers(stdout: str) -> list[RenderProfile]:
+    """Parse React Profiler render markers from test output.
+
+    Returns a list of RenderProfile instances, one per marker found.
+    """
+    profiles: list[RenderProfile] = []
+    for match in REACT_RENDER_MARKER_PATTERN.finditer(stdout):
+        try:
+            profiles.append(
+                RenderProfile(
+                    component_name=match.group(1),
+                    phase=match.group(2),
+                    actual_duration_ms=float(match.group(3)),
+                    base_duration_ms=float(match.group(4)),
+                    render_count=int(match.group(5)),
+                )
+            )
+        except (ValueError, IndexError) as e:
+            logger.debug("Failed to parse React render marker: %s", e)
+    return profiles
+
+
+def _extract_jest_console_output(suite_elem: Any) -> str:
     """Extract console output from Jest's JUnit XML system-out element.
 
     Jest-junit writes console.log output as a JSON array in the testsuite's system-out.
@@ -68,16 +107,16 @@ def _extract_jest_console_output(suite_elem) -> str:
         # Not JSON - return as plain text (fallback for pytest-style output)
         pass
 
-    return raw_content
+    return str(raw_content)
 
 
 def parse_jest_test_xml(
     test_xml_file_path: Path,
     test_files: TestFiles,
     test_config: TestConfig,
-    run_result: subprocess.CompletedProcess | None = None,
-    parse_func=None,
-    resolve_test_file_from_class_path=None,
+    run_result: subprocess.CompletedProcess[Any] | None = None,
+    parse_func: Any = None,
+    resolve_test_file_from_class_path: Any = None,
 ) -> TestResults:
     """Parse Jest JUnit XML test results.
 
@@ -512,7 +551,8 @@ def parse_jest_test_xml(
             f"(found {suite_count} suites, {testcase_count} testcases)"
         )
         if run_result is not None:
-            logger.debug(f"Jest stdout: {run_result.stdout[:1000] if run_result.stdout else 'empty'}")
+            stdout_preview = run_result.stdout[:1000] if run_result.stdout else "empty"
+            logger.debug(f"Jest stdout: {stdout_preview!r}")
     else:
         logger.debug(
             f"Jest XML parsing complete: {len(test_results.test_results)} results "
diff --git a/codeflash/languages/javascript/support.py b/codeflash/languages/javascript/support.py
index e0111c634..4fc1411db 100644
--- a/codeflash/languages/javascript/support.py
+++ b/codeflash/languages/javascript/support.py
@@ -13,18 +13,37 @@
 from typing import TYPE_CHECKING, Any
 
 from codeflash.discovery.functions_to_optimize import FunctionToOptimize
-from codeflash.languages.base import CodeContext, FunctionFilterCriteria, HelperFunction, Language, TestInfo, TestResult
+from codeflash.languages.base import CodeContext, FunctionFilterCriteria, HelperFunction, TestInfo, TestResult
 from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer, TreeSitterLanguage, get_analyzer_for_file
+from codeflash.languages.language_enum import Language
 from codeflash.languages.registry import register_language
-from codeflash.models.models import FunctionParent
+from codeflash.models.function_types import FunctionParent
 
 if TYPE_CHECKING:
     from collections.abc import Sequence
 
     from codeflash.languages.base import ReferenceInfo
+    from codeflash.languages.javascript.frameworks.detector import FrameworkInfo
     from codeflash.languages.javascript.treesitter import TypeDefinition
     from codeflash.models.models import GeneratedTestsList, InvocationId
 
+_PRIMITIVE_TYPES = frozenset(
+    {
+        "number",
+        "string",
+        "boolean",
+        "void",
+        "null",
+        "undefined",
+        "any",
+        "never",
+        "unknown",
+        "object",
+        "symbol",
+        "bigint",
+    }
+)
+
 logger = logging.getLogger(__name__)
 
 
@@ -68,6 +87,22 @@ def comment_prefix(self) -> str:
     def dir_excludes(self) -> frozenset[str]:
         return frozenset({"node_modules", "dist", "build", ".next", ".nuxt", "coverage", ".cache", ".turbo", ".vercel"})
 
+    _cached_framework_info: FrameworkInfo | None = None
+    _cached_framework_root: Path | None = None
+
+    def get_framework_info(self, project_root: Path) -> FrameworkInfo:
+        """Get cached framework info for the project."""
+        if self._cached_framework_root != project_root or self._cached_framework_info is None:
+            from codeflash.languages.javascript.frameworks.detector import detect_framework
+
+            self._cached_framework_info = detect_framework(project_root)
+            self._cached_framework_root = project_root
+        return self._cached_framework_info
+
+    def is_react_project(self, project_root: Path) -> bool:
+        """Check if the project uses React."""
+        return self.get_framework_info(project_root).name == "react"
+
     # === Discovery ===
 
     def discover_functions(
@@ -99,6 +134,29 @@ def discover_functions(
                 source, include_methods=criteria.include_methods, include_arrow_functions=True, require_name=True
             )
 
+            # Build React component lookup if this is a React project
+            react_component_map: dict[str, Any] = {}
+            project_root = file_path.parent  # Will be refined by caller
+            try:
+                from codeflash.languages.javascript.frameworks.react.discovery import classify_component
+
+                for func in tree_functions:
+                    comp_type = classify_component(func, source, analyzer)
+                    if comp_type is not None:
+                        from codeflash.languages.javascript.frameworks.react.discovery import (
+                            _extract_hooks_used,
+                            _is_wrapped_in_memo,
+                        )
+
+                        react_component_map[func.name] = {
+                            "component_type": comp_type.value,
+                            "hooks_used": _extract_hooks_used(func.source_text),
+                            "is_memoized": _is_wrapped_in_memo(func, source),
+                            "is_react_component": True,
+                        }
+            except Exception as e:
+                logger.debug("React detection skipped: %s", e)
+
             functions: list[FunctionToOptimize] = []
             for func in tree_functions:
                 # Check for return statement if required
@@ -122,6 +180,9 @@ def discover_functions(
                 if func.parent_function:
                     parents.append(FunctionParent(name=func.parent_function, type="FunctionDef"))
 
+                # Attach React metadata if this function is a component
+                metadata = react_component_map.get(func.name)
+
                 functions.append(
                     FunctionToOptimize(
                         function_name=func.name,
@@ -135,6 +196,7 @@ def discover_functions(
                         is_method=func.is_method,
                         language=str(self.language),
                         doc_start_line=func.doc_start_line,
+                        metadata=metadata,
                     )
                 )
 
@@ -423,6 +485,28 @@ def extract_code_context(self, function: FunctionToOptimize, project_root: Path,
             else:
                 read_only_context = type_definitions_context
 
+        # Append React-specific context if this is a React component
+        react_context_str = ""
+        if function.metadata and function.metadata.get("is_react_component"):
+            try:
+                from codeflash.languages.javascript.frameworks.react.context import extract_react_context
+                from codeflash.languages.javascript.frameworks.react.discovery import find_react_components
+
+                components = find_react_components(source, function.file_path, analyzer)
+                for comp in components:
+                    if comp.function_name == function.function_name:
+                        react_ctx = extract_react_context(comp, source, analyzer, module_root)
+                        react_context_str = react_ctx.to_prompt_string()
+                        if react_context_str:
+                            react_header = "\n\n// === React Component Context ===\n"
+                            if read_only_context:
+                                read_only_context = read_only_context + react_header + react_context_str
+                            else:
+                                read_only_context = react_context_str
+                        break
+            except Exception as e:
+                logger.debug("React context extraction failed: %s", e)
+
         # Validate that the extracted code is syntactically valid
         # If not, raise an error to fail the optimization early
         if target_code and not self.validate_syntax(target_code):
@@ -440,6 +524,7 @@ def extract_code_context(self, function: FunctionToOptimize, project_root: Path,
             read_only_context=read_only_context,
             imports=import_lines,
             language=Language.JAVASCRIPT,
+            react_context=react_context_str if react_context_str else None,
         )
 
     def _find_class_definition(
@@ -461,7 +546,7 @@ def _find_class_definition(
         source_bytes = source.encode("utf8")
         tree = analyzer.parse(source_bytes)
 
-        def find_class_node(node):
+        def find_class_node(node: Any) -> Any:
             """Recursively find a class declaration with the given name."""
             if node.type in ("class_declaration", "class"):
                 name_node = node.child_by_field_name("name")
@@ -580,7 +665,7 @@ def _find_same_class_helpers(
         class_name: str,
         target_method_name: str,
         helpers: list[HelperFunction],
-        tree_functions: list,
+        tree_functions: list[Any],
         lines: list[str],
     ) -> list[tuple[str, str]]:
         """Find helper methods that belong to the same class as the target method.
@@ -926,30 +1011,24 @@ def _extract_types_from_definition(self, type_source: str, analyzer: TreeSitterA
         tree = analyzer.parse(source_bytes)
         type_names: set[str] = set()
 
-        def walk_for_types(node):
+        # Iterative traversal to avoid recursion and reduce call overhead.
+        # Look for type_identifier nodes (user-defined types)
+        # Skip primitive types
+        stack = [tree.root_node]
+        while stack:
+            node = stack.pop()
             # Look for type_identifier nodes (user-defined types)
             if node.type == "type_identifier":
                 type_name = source_bytes[node.start_byte : node.end_byte].decode("utf8")
                 # Skip primitive types
-                if type_name not in (
-                    "number",
-                    "string",
-                    "boolean",
-                    "void",
-                    "null",
-                    "undefined",
-                    "any",
-                    "never",
-                    "unknown",
-                    "object",
-                    "symbol",
-                    "bigint",
-                ):
+                if type_name not in _PRIMITIVE_TYPES:
                     type_names.add(type_name)
-            for child in node.children:
-                walk_for_types(child)
+            # push children onto the stack
+            # using extend is efficient and keeps the traversal iterative
+            children = node.children
+            if children:
+                stack.extend(children)
 
-        walk_for_types(tree.root_node)
         return type_names
 
     def _find_imported_type_definitions(
@@ -1227,7 +1306,7 @@ def _find_and_extract_body(self, source: str, function_name: str, analyzer: Tree
         source_bytes = source.encode("utf8")
         tree = analyzer.parse(source_bytes)
 
-        def find_function_node(node, target_name: str):
+        def find_function_node(node: Any, target_name: str) -> Any:
             """Recursively find a function/method with the given name."""
             # Check method definitions
             if node.type == "method_definition":
@@ -1304,7 +1383,7 @@ def _replace_function_body(
         tree = analyzer.parse(source_bytes)
 
         # Find the original function node
-        def find_function_at_line(node, target_name: str, target_line: int):
+        def find_function_at_line(node: Any, target_name: str, target_line: int) -> Any:
             """Find a function with matching name and line number."""
             if node.type == "method_definition":
                 name_node = node.child_by_field_name("name")
@@ -1343,6 +1422,9 @@ def find_function_at_line(node, target_name: str, target_line: int):
 
             return None
 
+        if function.starting_line is None:
+            logger.warning("Cannot replace function %s: starting_line is None", function.function_name)
+            return source
         func_node = find_function_at_line(tree.root_node, function.function_name, function.starting_line)
         if not func_node:
             logger.warning("Could not find function %s at line %s", function.function_name, function.starting_line)
@@ -1441,6 +1523,10 @@ def _replace_function_text_based(
             Modified source code with function replaced.
 
         """
+        if function.starting_line is None:
+            logger.warning("Cannot replace function %s: starting_line is None", function.function_name)
+            return source
+
         lines = source.splitlines(keepends=True)
 
         # Handle case where source doesn't end with newline
@@ -1455,7 +1541,7 @@ def _replace_function_text_based(
                 break
 
         # Use doc_start_line if available, otherwise fall back to start_line
-        effective_start = (target_func.doc_start_line if target_func else None) or function.starting_line
+        effective_start: int = (target_func.doc_start_line if target_func else None) or function.starting_line
 
         # Get indentation from original function's first line
         if function.starting_line <= len(lines):
@@ -1864,6 +1950,9 @@ def _build_runtime_map(
         from codeflash.languages.javascript.edit_tests import resolve_js_test_module_path
 
         unique_inv_ids: dict[str, int] = {}
+        # Cache resolved path strings per module path to avoid repeated filesystem resolves
+        _resolved_path_cache: dict[str, str] = {}
+
         for inv_id, runtimes in inv_id_runtimes.items():
             test_qualified_name = (
                 inv_id.test_class_name + "." + inv_id.test_function_name  # type: ignore[operator]
@@ -1872,28 +1961,35 @@ def _build_runtime_map(
             )
             if not test_qualified_name:
                 continue
-            abs_path = resolve_js_test_module_path(inv_id.test_module_path, tests_project_rootdir)
 
-            abs_path_str = str(abs_path.resolve().with_suffix(""))
+            module_path_key = inv_id.test_module_path
+            abs_path_str = _resolved_path_cache.get(module_path_key)
+            if abs_path_str is None:
+                abs_path = resolve_js_test_module_path(module_path_key, tests_project_rootdir)
+                try:
+                    abs_path_str = str(abs_path.resolve().with_suffix(""))
+                except Exception:
+                    # Fallback in case resolve() fails for any reason; preserve behavior
+                    abs_path_str = str(abs_path.with_suffix(""))
+                _resolved_path_cache[module_path_key] = abs_path_str
+
             if "__unit_test_" not in abs_path_str and "__perf_test_" not in abs_path_str:
                 continue
 
             key = test_qualified_name + "#" + abs_path_str
-            parts = inv_id.iteration_id.split("_").__len__()  # type: ignore[union-attr]
-            cur_invid = (
-                inv_id.iteration_id.split("_")[0] if parts < 3 else "_".join(inv_id.iteration_id.split("_")[:-1])
-            )  # type: ignore[union-attr]
+            iteration_id = inv_id.iteration_id or ""
+            parts = iteration_id.split("_")
+            parts_len = len(parts)
+            cur_invid = parts[0] if parts_len < 3 else "_".join(parts[:-1])
             match_key = key + "#" + cur_invid
-            if match_key not in unique_inv_ids:
-                unique_inv_ids[match_key] = 0
-            unique_inv_ids[match_key] += min(runtimes)
+            unique_inv_ids[match_key] = unique_inv_ids.get(match_key, 0) + min(runtimes)
         return unique_inv_ids
 
     # === Test Result Comparison ===
 
     def compare_test_results(
         self, original_results_path: Path, candidate_results_path: Path, project_root: Path | None = None
-    ) -> tuple[bool, list]:
+    ) -> tuple[bool, list[Any]]:
         """Compare test results between original and candidate code.
 
         Args:
@@ -2010,8 +2106,8 @@ def get_module_path(self, source_file: Path, project_root: Path, tests_root: Pat
             return rel_path
         except ValueError:
             # Fallback if paths are on different drives (Windows)
-            rel_path = source_file.relative_to(project_root)
-            return "../" + rel_path.with_suffix("").as_posix()
+            fallback_path = source_file.relative_to(project_root)
+            return "../" + fallback_path.with_suffix("").as_posix()
 
     def verify_requirements(self, project_root: Path, test_framework: str = "jest") -> tuple[bool, list[str]]:
         """Verify that all JavaScript requirements are met.
@@ -2179,7 +2275,7 @@ def instrument_source_for_line_profiler(
             logger.warning("Failed to instrument source for line profiling: %s", e)
             return False
 
-    def parse_line_profile_results(self, line_profiler_output_file: Path) -> dict:
+    def parse_line_profile_results(self, line_profiler_output_file: Path) -> dict[str, Any]:
         from codeflash.languages.javascript.line_profiler import JavaScriptLineProfiler
 
         if line_profiler_output_file.exists():
@@ -2191,28 +2287,45 @@ def parse_line_profile_results(self, line_profiler_output_file: Path) -> dict:
         logger.warning("No line profiler output file found at %s", line_profiler_output_file)
         return {"timings": {}, "unit": 0, "str_out": ""}
 
-    def _format_js_line_profile_output(self, parsed_results: dict) -> str:
+    def _format_js_line_profile_output(self, parsed_results: dict[str, Any]) -> str:
         """Format JavaScript line profiler results for display."""
         if not parsed_results.get("timings"):
             return ""
 
         lines = ["Line Profile Results:"]
-        for file_path, line_data in parsed_results.get("timings", {}).items():
+        timings = parsed_results.get("timings", {})
+
+        # Pre-build format strings outside the loop
+        header_format = "{:>6}  {:>8}  {:>12}  {:>8}  {}"
+        data_format = "{:>6}  {:>8}  {:>12.3f}  {:>7.1f}%  {}"
+        separator = "-" * 80
+
+        for file_path, line_data in timings.items():
             lines.append(f"\nFile: {file_path}")
-            lines.append("-" * 80)
-            lines.append(f"{'Line':>6}  {'Hits':>8}  {'Time (ms)':>12}  {'% Time':>8}  {'Content'}")
-            lines.append("-" * 80)
+            lines.append(separator)
+            lines.append(header_format.format("Line", "Hits", "Time (ms)", "% Time", "Content"))
+            lines.append(separator)
+
+            # Calculate total time using direct access instead of .get() in generator
+            total_time_ms = sum(data["time_ms"] for data in line_data.values() if "time_ms" in data)
+
+            # Pre-compute reciprocal to avoid division in loop
+            time_factor = 100.0 / total_time_ms if total_time_ms > 0 else 0.0
 
-            total_time_ms = sum(data.get("time_ms", 0) for data in line_data.values())
             for line_num, data in sorted(line_data.items()):
                 hits = data.get("hits", 0)
                 time_ms = data.get("time_ms", 0)
-                pct = (time_ms / total_time_ms * 100) if total_time_ms > 0 else 0
                 content = data.get("content", "")
+                # Truncate long lines for display
+
+                # Calculate percentage using multiplication instead of division
+                pct = time_ms * time_factor
+
                 # Truncate long lines for display
                 if len(content) > 50:
                     content = content[:47] + "..."
-                lines.append(f"{line_num:>6}  {hits:>8}  {time_ms:>12.3f}  {pct:>7.1f}%  {content}")
+
+                lines.append(data_format.format(line_num, hits, time_ms, pct, content))
 
         return "\n".join(lines)
 
diff --git a/codeflash/languages/javascript/treesitter.py b/codeflash/languages/javascript/treesitter.py
index c00cb228e..b0508b388 100644
--- a/codeflash/languages/javascript/treesitter.py
+++ b/codeflash/languages/javascript/treesitter.py
@@ -162,8 +162,10 @@ def parse(self, source: str | bytes) -> Tree:
 
         """
         if isinstance(source, str):
-            source = source.encode("utf8")
-        return self.parser.parse(source)
+            source_bytes = source.encode("utf8")
+        else:
+            source_bytes = source
+        return self.parser.parse(source_bytes)
 
     def get_node_text(self, node: Node, source: bytes) -> str:
         """Extract the source text for a tree-sitter node.
diff --git a/codeflash/languages/javascript/treesitter_utils.py b/codeflash/languages/javascript/treesitter_utils.py
new file mode 100644
index 000000000..f38a6833d
--- /dev/null
+++ b/codeflash/languages/javascript/treesitter_utils.py
@@ -0,0 +1,1619 @@
+"""Tree-sitter utilities for cross-language code analysis.
+
+This module provides a unified interface for parsing and analyzing code
+across multiple languages using tree-sitter.
+"""
+
+from __future__ import annotations
+
+import logging
+from dataclasses import dataclass
+from enum import Enum
+from typing import TYPE_CHECKING
+
+from tree_sitter import Language, Parser
+
+if TYPE_CHECKING:
+    from pathlib import Path
+
+    from tree_sitter import Node, Tree
+
+_FUNCTION_BODY_TYPES = frozenset(
+    {
+        "function_declaration",
+        "method_definition",
+        "arrow_function",
+        "function_expression",
+        "function",  # Generic function in some grammars
+    }
+)
+
+logger = logging.getLogger(__name__)
+
+
+class TreeSitterLanguage(Enum):
+    """Supported tree-sitter languages."""
+
+    JAVASCRIPT = "javascript"
+    TYPESCRIPT = "typescript"
+    TSX = "tsx"
+
+
+# Lazy-loaded language instances
+_LANGUAGE_CACHE: dict[TreeSitterLanguage, Language] = {}
+
+
+def _get_language(lang: TreeSitterLanguage) -> Language:
+    """Get a tree-sitter Language instance, with lazy loading."""
+    if lang not in _LANGUAGE_CACHE:
+        if lang == TreeSitterLanguage.JAVASCRIPT:
+            import tree_sitter_javascript
+
+            _LANGUAGE_CACHE[lang] = Language(tree_sitter_javascript.language())
+        elif lang == TreeSitterLanguage.TYPESCRIPT:
+            import tree_sitter_typescript
+
+            _LANGUAGE_CACHE[lang] = Language(tree_sitter_typescript.language_typescript())
+        elif lang == TreeSitterLanguage.TSX:
+            import tree_sitter_typescript
+
+            _LANGUAGE_CACHE[lang] = Language(tree_sitter_typescript.language_tsx())
+    return _LANGUAGE_CACHE[lang]
+
+
+@dataclass
+class FunctionNode:
+    """Represents a function found by tree-sitter analysis."""
+
+    name: str
+    node: Node
+    start_line: int
+    end_line: int
+    start_col: int
+    end_col: int
+    is_async: bool
+    is_method: bool
+    is_arrow: bool
+    is_generator: bool
+    class_name: str | None
+    parent_function: str | None
+    source_text: str
+    doc_start_line: int | None = None  # Line where JSDoc comment starts (or None if no JSDoc)
+
+
+@dataclass
+class ImportInfo:
+    """Represents an import statement."""
+
+    module_path: str  # The path being imported from
+    default_import: str | None  # Default import name (import X from ...)
+    named_imports: list[tuple[str, str | None]]  # [(name, alias), ...]
+    namespace_import: str | None  # Namespace import (import * as X from ...)
+    is_type_only: bool  # TypeScript type-only import
+    start_line: int
+    end_line: int
+
+
+@dataclass
+class ExportInfo:
+    """Represents an export statement."""
+
+    exported_names: list[tuple[str, str | None]]  # [(name, alias), ...] for named exports
+    default_export: str | None  # Name of default exported function/class/value
+    is_reexport: bool  # Whether this is a re-export (export { x } from './other')
+    reexport_source: str | None  # Module path for re-exports
+    start_line: int
+    end_line: int
+
+
+@dataclass
+class ModuleLevelDeclaration:
+    """Represents a module-level (global) variable or constant declaration."""
+
+    name: str  # Variable/constant name
+    declaration_type: str  # "const", "let", "var", "class", "enum", "type", "interface"
+    source_code: str  # Full declaration source code
+    start_line: int
+    end_line: int
+    is_exported: bool  # Whether the declaration is exported
+
+
+@dataclass
+class TypeDefinition:
+    """Represents a type definition (interface, type alias, class, or enum)."""
+
+    name: str  # Type name
+    definition_type: str  # "interface", "type", "class", "enum"
+    source_code: str  # Full definition source code
+    start_line: int
+    end_line: int
+    is_exported: bool  # Whether the definition is exported
+    file_path: Path | None = None  # File where the type is defined
+
+
+class TreeSitterAnalyzer:
+    """Cross-language code analysis using tree-sitter.
+
+    This class provides methods to parse and analyze JavaScript/TypeScript code,
+    finding functions, imports, and other code structures.
+    """
+
+    def __init__(self, language: TreeSitterLanguage | str) -> None:
+        """Initialize the analyzer for a specific language.
+
+        Args:
+            language: The language to analyze (TreeSitterLanguage enum or string).
+
+        """
+        if isinstance(language, str):
+            language = TreeSitterLanguage(language)
+        self.language = language
+        self._parser: Parser | None = None
+
+        # Cache for function type sets keyed by (include_methods, include_arrow_functions)
+        self._function_types_cache: dict[tuple[bool, bool], set[str]] = {}
+        # Cache for exports to avoid repeated parsing
+        self._exports_cache: dict[str, list[ExportInfo]] = {}
+
+    @property
+    def parser(self) -> Parser:
+        """Get the parser, creating it lazily."""
+        if self._parser is None:
+            self._parser = Parser(_get_language(self.language))
+        return self._parser
+
+    def parse(self, source: str | bytes) -> Tree:
+        """Parse source code into a tree-sitter tree.
+
+        Args:
+            source: Source code as string or bytes.
+
+        Returns:
+            The parsed tree.
+
+        """
+        if isinstance(source, str):
+            source = source.encode("utf8")
+        parser = self.parser
+        return parser.parse(source)
+
+    def get_node_text(self, node: Node, source: bytes) -> str:
+        """Extract the source text for a tree-sitter node.
+
+        Args:
+            node: The tree-sitter node.
+            source: The source code as bytes.
+
+        Returns:
+            The text content of the node.
+
+        """
+        return source[node.start_byte : node.end_byte].decode("utf8")
+
+    def find_functions(
+        self, source: str, include_methods: bool = True, include_arrow_functions: bool = True, require_name: bool = True
+    ) -> list[FunctionNode]:
+        """Find all function definitions in source code.
+
+        Args:
+            source: The source code to analyze.
+            include_methods: Whether to include class methods.
+            include_arrow_functions: Whether to include arrow functions.
+            require_name: Whether to require functions to have names.
+
+        Returns:
+            List of FunctionNode objects describing found functions.
+
+        """
+        source_bytes = source.encode("utf8")
+        tree = self.parse(source_bytes)
+        functions: list[FunctionNode] = []
+
+        self._walk_tree_for_functions(
+            tree.root_node,
+            source_bytes,
+            functions,
+            include_methods=include_methods,
+            include_arrow_functions=include_arrow_functions,
+            require_name=require_name,
+            current_class=None,
+            current_function=None,
+        )
+
+        return functions
+
+    def _walk_tree_for_functions(
+        self,
+        node: Node,
+        source_bytes: bytes,
+        functions: list[FunctionNode],
+        include_methods: bool,
+        include_arrow_functions: bool,
+        require_name: bool,
+        current_class: str | None,
+        current_function: str | None,
+    ) -> None:
+        """Recursively walk the tree to find function definitions."""
+        # Function types in JavaScript/TypeScript
+        # Use a cached set to avoid rebuilding on every node visit
+        key = (include_methods, include_arrow_functions)
+        function_types = self._function_types_cache.get(key)
+        if function_types is None:
+            ft = {"function_declaration", "function_expression", "generator_function_declaration", "generator_function"}
+            if include_arrow_functions:
+                ft.add("arrow_function")
+            if include_methods:
+                ft.add("method_definition")
+            self._function_types_cache[key] = ft
+            function_types = ft
+
+        # Iterative DFS using an explicit stack to avoid Python recursion overhead.
+        # Each stack entry: (node, current_class, current_function)
+        stack: list[tuple[Node, str | None, str | None]] = [(node, current_class, current_function)]
+
+        while stack:
+            node, curr_class, curr_func = stack.pop()
+            n_type = node.type
+
+            new_class = curr_class
+            new_function = curr_func
+
+            if n_type in {"class_declaration", "class"}:
+                # Get class name
+                name_node = node.child_by_field_name("name")
+                if name_node:
+                    new_class = self.get_node_text(name_node, source_bytes)
+
+            if n_type in function_types:
+                func_info = self._extract_function_info(node, source_bytes, curr_class, curr_func)
+
+                if func_info:
+                    # Check if we should include this function
+                    should_include = True
+
+                    if require_name and not func_info.name:
+                        should_include = False
+
+                    if func_info.is_method and not include_methods:
+                        should_include = False
+
+                    if func_info.is_arrow and not include_arrow_functions:
+                        should_include = False
+
+                    # Skip arrow functions that are object properties (e.g., { foo: () => {} })
+                    # These are not standalone functions - they're values in object literals
+                    parent = node.parent
+                    if func_info.is_arrow and parent and parent.type == "pair":
+                        should_include = False
+
+                    if should_include:
+                        functions.append(func_info)
+
+                    # Track as current function for nested functions
+                    if func_info.name:
+                        new_function = func_info.name
+
+            # Recurse into children (push in reversed order to preserve original left-to-right traversal)
+            children = node.children
+            if children:
+                # If this node is a function type, nested children should see new_function; otherwise preserve curr_func
+                child_func_to_pass = new_function if n_type in function_types else curr_func
+                child_class_to_pass = new_class
+                for child in reversed(children):
+                    stack.append((child, child_class_to_pass, child_func_to_pass))
+
+    def _extract_function_info(
+        self, node: Node, source_bytes: bytes, current_class: str | None, current_function: str | None
+    ) -> FunctionNode | None:
+        """Extract function information from a tree-sitter node."""
+        name = ""
+        is_async = False
+        is_generator = False
+        is_method = False
+        is_arrow = node.type == "arrow_function"
+
+        # Check for async modifier
+        for child in node.children:
+            if child.type == "async":
+                is_async = True
+                break
+
+        # Check for generator
+        if "generator" in node.type:
+            is_generator = True
+
+        # Get function name based on node type
+        if node.type in ("function_declaration", "generator_function_declaration"):
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                name = self.get_node_text(name_node, source_bytes)
+            else:
+                # Fallback: search for identifier child (some tree-sitter versions)
+                for child in node.children:
+                    if child.type == "identifier":
+                        name = self.get_node_text(child, source_bytes)
+                        break
+        elif node.type == "method_definition":
+            is_method = True
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                name = self.get_node_text(name_node, source_bytes)
+        elif node.type in ("function_expression", "generator_function"):
+            # Check if assigned to a variable
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                name = self.get_node_text(name_node, source_bytes)
+            else:
+                # Try to get name from parent assignment
+                name = self._get_name_from_assignment(node, source_bytes)
+        elif node.type == "arrow_function":
+            # Arrow functions get names from variable declarations
+            name = self._get_name_from_assignment(node, source_bytes)
+
+        # Get source text
+        source_text = self.get_node_text(node, source_bytes)
+
+        # Find preceding JSDoc comment
+        doc_start_line = self._find_preceding_jsdoc(node, source_bytes)
+
+        return FunctionNode(
+            name=name,
+            node=node,
+            start_line=node.start_point[0] + 1,  # Convert to 1-indexed
+            end_line=node.end_point[0] + 1,
+            start_col=node.start_point[1],
+            end_col=node.end_point[1],
+            is_async=is_async,
+            is_method=is_method,
+            is_arrow=is_arrow,
+            is_generator=is_generator,
+            class_name=current_class if is_method else None,
+            parent_function=current_function,
+            source_text=source_text,
+            doc_start_line=doc_start_line,
+        )
+
+    def _find_preceding_jsdoc(self, node: Node, source_bytes: bytes) -> int | None:
+        """Find JSDoc comment immediately preceding a function node.
+
+        For regular functions, looks at the previous sibling of the function node.
+        For arrow functions assigned to variables, looks at the previous sibling
+        of the variable declaration.
+
+        Args:
+            node: The function node to find JSDoc for.
+            source_bytes: The source code as bytes.
+
+        Returns:
+            The start line (1-indexed) of the JSDoc, or None if no JSDoc found.
+
+        """
+        target_node = node
+
+        # For arrow functions, look at parent variable declaration
+        if node.type == "arrow_function":
+            parent = node.parent
+            if parent and parent.type == "variable_declarator":
+                grandparent = parent.parent
+                if grandparent and grandparent.type in ("lexical_declaration", "variable_declaration"):
+                    target_node = grandparent
+
+        # For function expressions assigned to variables, also look at parent
+        if node.type in ("function_expression", "generator_function"):
+            parent = node.parent
+            if parent and parent.type == "variable_declarator":
+                grandparent = parent.parent
+                if grandparent and grandparent.type in ("lexical_declaration", "variable_declaration"):
+                    target_node = grandparent
+
+        # Get the previous sibling node
+        prev_sibling = target_node.prev_named_sibling
+
+        # Check if it's a comment node with JSDoc pattern
+        if prev_sibling and prev_sibling.type == "comment":
+            comment_text = self.get_node_text(prev_sibling, source_bytes)
+            if comment_text.strip().startswith("/**"):
+                # Verify it's immediately preceding (no blank lines between)
+                comment_end_line = prev_sibling.end_point[0]
+                function_start_line = target_node.start_point[0]
+                if function_start_line - comment_end_line <= 1:
+                    return prev_sibling.start_point[0] + 1  # 1-indexed
+
+        return None
+
+    def _get_name_from_assignment(self, node: Node, source_bytes: bytes) -> str:
+        """Try to extract function name from parent variable declaration or assignment.
+
+        Handles patterns like:
+        - const foo = () => {}
+        - const foo = function() {}
+        - let bar = function() {}
+        - obj.method = () => {}
+        """
+        parent = node.parent
+        if parent is None:
+            return ""
+
+        # Check for variable declarator: const foo = ...
+        if parent.type == "variable_declarator":
+            name_node = parent.child_by_field_name("name")
+            if name_node:
+                return self.get_node_text(name_node, source_bytes)
+
+        # Check for assignment expression: foo = ...
+        if parent.type == "assignment_expression":
+            left_node = parent.child_by_field_name("left")
+            if left_node:
+                if left_node.type == "identifier":
+                    return self.get_node_text(left_node, source_bytes)
+                if left_node.type == "member_expression":
+                    # For obj.method = ..., get the property name
+                    prop_node = left_node.child_by_field_name("property")
+                    if prop_node:
+                        return self.get_node_text(prop_node, source_bytes)
+
+        # Check for property in object: { foo: () => {} }
+        if parent.type == "pair":
+            key_node = parent.child_by_field_name("key")
+            if key_node:
+                return self.get_node_text(key_node, source_bytes)
+
+        return ""
+
+    def find_imports(self, source: str) -> list[ImportInfo]:
+        """Find all import statements in source code.
+
+        Args:
+            source: The source code to analyze.
+
+        Returns:
+            List of ImportInfo objects describing imports.
+
+        """
+        source_bytes = source.encode("utf8")
+        tree = self.parse(source_bytes)
+        imports: list[ImportInfo] = []
+
+        self._walk_tree_for_imports(tree.root_node, source_bytes, imports)
+
+        return imports
+
+    def _walk_tree_for_imports(
+        self, node: Node, source_bytes: bytes, imports: list[ImportInfo], in_function: bool = False
+    ) -> None:
+        """Recursively walk the tree to find import statements.
+
+        Args:
+            node: Current node to check.
+            source_bytes: Source code bytes.
+            imports: List to append found imports to.
+            in_function: Whether we're currently inside a function/method body.
+
+        """
+        # Track when we enter function/method bodies
+        # These node types contain function/method bodies where require() should not be treated as imports
+        node_type = node.type
+
+        if node_type == "import_statement":
+            import_info = self._extract_import_info(node, source_bytes)
+            if import_info:
+                imports.append(import_info)
+        # Also handle require() calls for CommonJS, but only at module level
+        # require() inside functions is a dynamic import, not a module import
+        elif node_type == "call_expression" and not in_function:
+            func_node = node.child_by_field_name("function")
+            if func_node and self.get_node_text(func_node, source_bytes) == "require":
+                import_info = self._extract_require_info(node, source_bytes)
+                if import_info:
+                    imports.append(import_info)
+
+        # Update in_function flag for children
+        child_in_function = in_function or node_type in _FUNCTION_BODY_TYPES
+
+        for child in node.children:
+            self._walk_tree_for_imports(child, source_bytes, imports, child_in_function)
+
+    def _extract_import_info(self, node: Node, source_bytes: bytes) -> ImportInfo | None:
+        """Extract import information from an import statement node."""
+        module_path = ""
+        default_import = None
+        named_imports: list[tuple[str, str | None]] = []
+        namespace_import = None
+        is_type_only = False
+
+        # Decode once for performance
+        source_text = source_bytes.decode("utf8")
+
+        # Get the module path (source)
+        source_node = node.child_by_field_name("source")
+        if source_node:
+            # Remove quotes from string
+            module_path = source_text[source_node.start_byte : source_node.end_byte].strip("'\"")
+
+        # Check for type-only import (TypeScript)
+        for child in node.children:
+            if child.type == "type" or source_text[child.start_byte : child.end_byte] == "type":
+                is_type_only = True
+                break
+
+        # Process import clause
+        for child in node.children:
+            if child.type == "import_clause":
+                self._process_import_clause(child, source_bytes, default_import, named_imports, namespace_import)
+                # Re-extract after processing
+                for clause_child in child.children:
+                    if clause_child.type == "identifier":
+                        default_import = source_text[clause_child.start_byte : clause_child.end_byte]
+                    elif clause_child.type == "named_imports":
+                        for spec in clause_child.children:
+                            if spec.type == "import_specifier":
+                                name_node = spec.child_by_field_name("name")
+                                alias_node = spec.child_by_field_name("alias")
+                                if name_node:
+                                    name = source_text[name_node.start_byte : name_node.end_byte]
+                                    alias = (
+                                        source_text[alias_node.start_byte : alias_node.end_byte] if alias_node else None
+                                    )
+                                    named_imports.append((name, alias))
+                    elif clause_child.type == "namespace_import":
+                        # import * as X
+                        for ns_child in clause_child.children:
+                            if ns_child.type == "identifier":
+                                namespace_import = source_text[ns_child.start_byte : ns_child.end_byte]
+
+        if not module_path:
+            return None
+
+        return ImportInfo(
+            module_path=module_path,
+            default_import=default_import,
+            named_imports=named_imports,
+            namespace_import=namespace_import,
+            is_type_only=is_type_only,
+            start_line=node.start_point[0] + 1,
+            end_line=node.end_point[0] + 1,
+        )
+
+    def _process_import_clause(
+        self,
+        node: Node,
+        source_bytes: bytes,
+        default_import: str | None,
+        named_imports: list[tuple[str, str | None]],
+        namespace_import: str | None,
+    ) -> None:
+        """Process an import clause to extract imports."""
+        # This is a helper that modifies the lists in place
+        # Processing is done inline in _extract_import_info
+
+    def _extract_require_info(self, node: Node, source_bytes: bytes) -> ImportInfo | None:
+        """Extract import information from a require() call.
+
+        Handles various CommonJS require patterns:
+        - const foo = require('./module')           -> default import
+        - const { a, b } = require('./module')      -> named imports
+        - const { a: aliasA } = require('./module') -> named imports with alias
+        - const foo = require('./module').bar       -> property access (named import)
+        - require('./module')                       -> side effect import
+        """
+        # Handle require().property pattern - the call_expression is inside member_expression
+        actual_require_node = node
+        property_access = None
+
+        # Check if this require is part of a member_expression like require('./m').foo
+        if node.parent and node.parent.type == "member_expression":
+            member_node = node.parent
+            prop_node = member_node.child_by_field_name("property")
+            if prop_node:
+                property_access = self.get_node_text(prop_node, source_bytes)
+            # Use the member expression's parent for variable assignment lookup
+            node = member_node
+
+        args_node = actual_require_node.child_by_field_name("arguments")
+        if not args_node:
+            return None
+
+        # Get the first argument (module path)
+        module_path = ""
+        for child in args_node.children:
+            if child.type == "string":
+                module_path = self.get_node_text(child, source_bytes).strip("'\"")
+                break
+
+        if not module_path:
+            return None
+
+        # Try to get the variable name from assignment
+        default_import = None
+        named_imports: list[tuple[str, str | None]] = []
+
+        parent = node.parent
+        if parent and parent.type == "variable_declarator":
+            name_node = parent.child_by_field_name("name")
+            if name_node:
+                if name_node.type == "identifier":
+                    var_name = self.get_node_text(name_node, source_bytes)
+                    if property_access:
+                        # const foo = require('./module').bar
+                        # This imports 'bar' from the module and assigns to 'foo'
+                        named_imports.append((property_access, var_name if var_name != property_access else None))
+                    else:
+                        # const foo = require('./module')
+                        default_import = var_name
+                elif name_node.type == "object_pattern":
+                    # Destructuring: const { a, b } = require('...')
+                    named_imports = self._extract_object_pattern_names(name_node, source_bytes)
+        elif property_access:
+            # require('./module').foo without assignment - still track the property access
+            named_imports.append((property_access, None))
+
+        return ImportInfo(
+            module_path=module_path,
+            default_import=default_import,
+            named_imports=named_imports,
+            namespace_import=None,
+            is_type_only=False,
+            start_line=actual_require_node.start_point[0] + 1,
+            end_line=actual_require_node.end_point[0] + 1,
+        )
+
+    def _extract_object_pattern_names(self, node: Node, source_bytes: bytes) -> list[tuple[str, str | None]]:
+        """Extract names from an object pattern (destructuring).
+
+        Handles patterns like:
+        - { a, b }         -> [('a', None), ('b', None)]
+        - { a: aliasA }    -> [('a', 'aliasA')]
+        - { a, b: aliasB } -> [('a', None), ('b', 'aliasB')]
+        """
+        names: list[tuple[str, str | None]] = []
+
+        for child in node.children:
+            if child.type == "shorthand_property_identifier_pattern":
+                # { a } - shorthand, name equals value
+                name = self.get_node_text(child, source_bytes)
+                names.append((name, None))
+            elif child.type == "pair_pattern":
+                # { a: aliasA } - renamed import
+                key_node = child.child_by_field_name("key")
+                value_node = child.child_by_field_name("value")
+                if key_node and value_node:
+                    original_name = self.get_node_text(key_node, source_bytes)
+                    alias = self.get_node_text(value_node, source_bytes)
+                    names.append((original_name, alias))
+
+        return names
+
+    def find_exports(self, source: str) -> list[ExportInfo]:
+        """Find all export statements in source code.
+
+        Args:
+            source: The source code to analyze.
+
+        Returns:
+            List of ExportInfo objects describing exports.
+
+        """
+        if source in self._exports_cache:
+            return self._exports_cache[source]
+
+        source_bytes = source.encode("utf8")
+        tree = self.parse(source_bytes)
+        exports: list[ExportInfo] = []
+
+        self._walk_tree_for_exports(tree.root_node, source_bytes, exports)
+
+        self._exports_cache[source] = exports
+        return exports
+
+    def _walk_tree_for_exports(self, node: Node, source_bytes: bytes, exports: list[ExportInfo]) -> None:
+        """Recursively walk the tree to find export statements."""
+        # Handle ES module export statements
+        if node.type == "export_statement":
+            export_info = self._extract_export_info(node, source_bytes)
+            if export_info:
+                exports.append(export_info)
+
+        # Handle CommonJS exports: module.exports = ... or exports.foo = ...
+        if node.type == "assignment_expression":
+            export_info = self._extract_commonjs_export(node, source_bytes)
+            if export_info:
+                exports.append(export_info)
+
+        for child in node.children:
+            self._walk_tree_for_exports(child, source_bytes, exports)
+
+    def _extract_export_info(self, node: Node, source_bytes: bytes) -> ExportInfo | None:
+        """Extract export information from an export statement node."""
+        exported_names: list[tuple[str, str | None]] = []
+        default_export: str | None = None
+        is_reexport = False
+        reexport_source: str | None = None
+
+        # Check for re-export source (export { x } from './other')
+        source_node = node.child_by_field_name("source")
+        if source_node:
+            is_reexport = True
+            reexport_source = self.get_node_text(source_node, source_bytes).strip("'\"")
+
+        for child in node.children:
+            # Handle 'export default'
+            if child.type == "default":
+                # Find what's being exported as default
+                for sibling in node.children:
+                    if sibling.type in {"function_declaration", "class_declaration"}:
+                        name_node = sibling.child_by_field_name("name")
+                        default_export = self.get_node_text(name_node, source_bytes) if name_node else "default"
+                    elif sibling.type == "identifier":
+                        default_export = self.get_node_text(sibling, source_bytes)
+                    elif sibling.type in ("arrow_function", "function_expression", "object", "array"):
+                        default_export = "default"
+                break
+
+            # Handle named exports: export { a, b as c }
+            if child.type == "export_clause":
+                for spec in child.children:
+                    if spec.type == "export_specifier":
+                        name_node = spec.child_by_field_name("name")
+                        alias_node = spec.child_by_field_name("alias")
+                        if name_node:
+                            name = self.get_node_text(name_node, source_bytes)
+                            alias = self.get_node_text(alias_node, source_bytes) if alias_node else None
+                            exported_names.append((name, alias))
+
+            # Handle direct exports: export function foo() {}
+            if child.type == "function_declaration":
+                name_node = child.child_by_field_name("name")
+                if name_node:
+                    name = self.get_node_text(name_node, source_bytes)
+                    exported_names.append((name, None))
+
+            # Handle direct class exports: export class Foo {}
+            if child.type == "class_declaration":
+                name_node = child.child_by_field_name("name")
+                if name_node:
+                    name = self.get_node_text(name_node, source_bytes)
+                    exported_names.append((name, None))
+
+            # Handle variable exports: export const foo = ...
+            if child.type == "lexical_declaration":
+                for decl in child.children:
+                    if decl.type == "variable_declarator":
+                        name_node = decl.child_by_field_name("name")
+                        if name_node and name_node.type == "identifier":
+                            name = self.get_node_text(name_node, source_bytes)
+                            exported_names.append((name, None))
+
+        # Skip if no exports found
+        if not exported_names and not default_export:
+            return None
+
+        return ExportInfo(
+            exported_names=exported_names,
+            default_export=default_export,
+            is_reexport=is_reexport,
+            reexport_source=reexport_source,
+            start_line=node.start_point[0] + 1,
+            end_line=node.end_point[0] + 1,
+        )
+
+    def _extract_commonjs_export(self, node: Node, source_bytes: bytes) -> ExportInfo | None:
+        """Extract export information from CommonJS module.exports or exports.* patterns.
+
+        Handles patterns like:
+        - module.exports = function() {}       -> default export
+        - module.exports = { foo, bar }        -> named exports
+        - module.exports.foo = function() {}   -> named export 'foo'
+        - exports.foo = function() {}          -> named export 'foo'
+        - module.exports = require('./other')  -> re-export
+        """
+        left_node = node.child_by_field_name("left")
+        right_node = node.child_by_field_name("right")
+
+        if not left_node or not right_node:
+            return None
+
+        # Check if this is a module.exports or exports.* pattern
+        if left_node.type != "member_expression":
+            return None
+
+        left_text = self.get_node_text(left_node, source_bytes)
+
+        exported_names: list[tuple[str, str | None]] = []
+        default_export: str | None = None
+        is_reexport = False
+        reexport_source: str | None = None
+
+        if left_text == "module.exports":
+            # module.exports = something
+            if right_node.type in {"function_expression", "arrow_function"}:
+                # module.exports = function foo() {} or module.exports = () => {}
+                name_node = right_node.child_by_field_name("name")
+                default_export = self.get_node_text(name_node, source_bytes) if name_node else "default"
+            elif right_node.type == "identifier":
+                # module.exports = someFunction
+                default_export = self.get_node_text(right_node, source_bytes)
+            elif right_node.type == "object":
+                # module.exports = { foo, bar, baz: qux }
+                for child in right_node.children:
+                    if child.type == "shorthand_property_identifier":
+                        # { foo } - exports function named foo
+                        name = self.get_node_text(child, source_bytes)
+                        exported_names.append((name, None))
+                    elif child.type == "pair":
+                        # { baz: qux } - exports qux as baz
+                        key_node = child.child_by_field_name("key")
+                        value_node = child.child_by_field_name("value")
+                        if key_node and value_node:
+                            export_name = self.get_node_text(key_node, source_bytes)
+                            local_name = self.get_node_text(value_node, source_bytes)
+                            # In CommonJS { baz: qux }, baz is the exported name, qux is local
+                            exported_names.append((local_name, export_name))
+            elif right_node.type == "call_expression":
+                # module.exports = require('./other') - re-export
+                func_node = right_node.child_by_field_name("function")
+                if func_node and self.get_node_text(func_node, source_bytes) == "require":
+                    is_reexport = True
+                    args_node = right_node.child_by_field_name("arguments")
+                    if args_node:
+                        for arg in args_node.children:
+                            if arg.type == "string":
+                                reexport_source = self.get_node_text(arg, source_bytes).strip("'\"")
+                                break
+                    default_export = "default"
+            else:
+                # module.exports = something else (class, etc.)
+                default_export = "default"
+
+        elif left_text.startswith("module.exports."):
+            # module.exports.foo = something
+            prop_name = left_text.split(".", 2)[2]  # Get 'foo' from 'module.exports.foo'
+            exported_names.append((prop_name, None))
+
+        elif left_text.startswith("exports."):
+            # exports.foo = something
+            prop_name = left_text.split(".", 1)[1]  # Get 'foo' from 'exports.foo'
+            exported_names.append((prop_name, None))
+
+        else:
+            # Not a CommonJS export pattern
+            return None
+
+        # Skip if no exports found
+        if not exported_names and not default_export:
+            return None
+
+        return ExportInfo(
+            exported_names=exported_names,
+            default_export=default_export,
+            is_reexport=is_reexport,
+            reexport_source=reexport_source,
+            start_line=node.start_point[0] + 1,
+            end_line=node.end_point[0] + 1,
+        )
+
+    def is_function_exported(
+        self, source: str, function_name: str, class_name: str | None = None
+    ) -> tuple[bool, str | None]:
+        """Check if a function is exported and get its export name.
+
+        For class methods, also checks if the containing class is exported.
+
+        Args:
+            source: The source code to analyze.
+            function_name: The name of the function to check.
+            class_name: For class methods, the name of the containing class.
+
+        Returns:
+            Tuple of (is_exported, export_name). export_name may differ from
+            function_name if exported with an alias. For class methods,
+            returns the class export name.
+
+        """
+        exports = self.find_exports(source)
+
+        # First, check if the function itself is directly exported
+        for export in exports:
+            # Check default export
+            if export.default_export == function_name:
+                return (True, "default")
+
+            # Check named exports
+            for name, alias in export.exported_names:
+                if name == function_name:
+                    return (True, alias or name)
+
+        # For class methods, check if the containing class is exported
+        if class_name:
+            for export in exports:
+                # Check if class is default export
+                if export.default_export == class_name:
+                    return (True, class_name)
+
+                # Check if class is in named exports
+                for name, alias in export.exported_names:
+                    if name == class_name:
+                        return (True, alias or name)
+
+        return (False, None)
+
+    def find_function_calls(self, source: str, within_function: FunctionNode) -> list[str]:
+        """Find all function calls within a specific function's body.
+
+        Args:
+            source: The full source code.
+            within_function: The function to search within.
+
+        Returns:
+            List of function names that are called.
+
+        """
+        calls: list[str] = []
+        source_bytes = source.encode("utf8")
+
+        # Get the body of the function
+        body_node = within_function.node.child_by_field_name("body")
+        if body_node is None:
+            # For arrow functions, the body might be the last child
+            for child in within_function.node.children:
+                if child.type in ("statement_block", "expression_statement") or (
+                    child.type not in ("identifier", "formal_parameters", "async", "=>")
+                ):
+                    body_node = child
+                    break
+
+        if body_node:
+            self._walk_tree_for_calls(body_node, source_bytes, calls)
+
+        return list(set(calls))  # Remove duplicates
+
+    def _walk_tree_for_calls(self, node: Node, source_bytes: bytes, calls: list[str]) -> None:
+        """Recursively find function calls in a subtree."""
+        if node.type == "call_expression":
+            func_node = node.child_by_field_name("function")
+            if func_node:
+                if func_node.type == "identifier":
+                    calls.append(self.get_node_text(func_node, source_bytes))
+                elif func_node.type == "member_expression":
+                    # For method calls like obj.method(), get the method name
+                    prop_node = func_node.child_by_field_name("property")
+                    if prop_node:
+                        calls.append(self.get_node_text(prop_node, source_bytes))
+
+        for child in node.children:
+            self._walk_tree_for_calls(child, source_bytes, calls)
+
+    def find_module_level_declarations(self, source: str) -> list[ModuleLevelDeclaration]:
+        """Find all module-level variable/constant declarations.
+
+        This finds global variables, constants, classes, enums, type aliases,
+        and interfaces defined at the top level of the module (not inside functions).
+
+        Args:
+            source: The source code to analyze.
+
+        Returns:
+            List of ModuleLevelDeclaration objects.
+
+        """
+        source_bytes = source.encode("utf8")
+        tree = self.parse(source_bytes)
+        declarations: list[ModuleLevelDeclaration] = []
+
+        # Only look at direct children of the program/module node (top-level)
+        for child in tree.root_node.children:
+            self._extract_module_level_declaration(child, source_bytes, declarations)
+
+        return declarations
+
+    def _extract_module_level_declaration(
+        self, node: Node, source_bytes: bytes, declarations: list[ModuleLevelDeclaration]
+    ) -> None:
+        """Extract module-level declarations from a node."""
+        is_exported = False
+
+        # Handle export statements - unwrap to get the actual declaration
+        if node.type == "export_statement":
+            is_exported = True
+            # Find the actual declaration inside the export
+            for child in node.children:
+                if child.type in ("lexical_declaration", "variable_declaration"):
+                    self._extract_declaration(child, source_bytes, declarations, is_exported, node)
+                    return
+                if child.type == "class_declaration":
+                    name_node = child.child_by_field_name("name")
+                    if name_node:
+                        declarations.append(
+                            ModuleLevelDeclaration(
+                                name=self.get_node_text(name_node, source_bytes),
+                                declaration_type="class",
+                                source_code=self.get_node_text(node, source_bytes),
+                                start_line=node.start_point[0] + 1,
+                                end_line=node.end_point[0] + 1,
+                                is_exported=is_exported,
+                            )
+                        )
+                    return
+                if child.type in ("type_alias_declaration", "interface_declaration", "enum_declaration"):
+                    name_node = child.child_by_field_name("name")
+                    if name_node:
+                        decl_type = child.type.replace("_declaration", "").replace("_alias", "")
+                        declarations.append(
+                            ModuleLevelDeclaration(
+                                name=self.get_node_text(name_node, source_bytes),
+                                declaration_type=decl_type,
+                                source_code=self.get_node_text(node, source_bytes),
+                                start_line=node.start_point[0] + 1,
+                                end_line=node.end_point[0] + 1,
+                                is_exported=is_exported,
+                            )
+                        )
+                    return
+            return
+
+        # Handle non-exported declarations
+        if node.type in (
+            "lexical_declaration",  # const/let
+            "variable_declaration",  # var
+        ):
+            self._extract_declaration(node, source_bytes, declarations, is_exported, node)
+        elif node.type == "class_declaration":
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                declarations.append(
+                    ModuleLevelDeclaration(
+                        name=self.get_node_text(name_node, source_bytes),
+                        declaration_type="class",
+                        source_code=self.get_node_text(node, source_bytes),
+                        start_line=node.start_point[0] + 1,
+                        end_line=node.end_point[0] + 1,
+                        is_exported=is_exported,
+                    )
+                )
+        elif node.type in ("type_alias_declaration", "interface_declaration", "enum_declaration"):
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                decl_type = node.type.replace("_declaration", "").replace("_alias", "")
+                declarations.append(
+                    ModuleLevelDeclaration(
+                        name=self.get_node_text(name_node, source_bytes),
+                        declaration_type=decl_type,
+                        source_code=self.get_node_text(node, source_bytes),
+                        start_line=node.start_point[0] + 1,
+                        end_line=node.end_point[0] + 1,
+                        is_exported=is_exported,
+                    )
+                )
+
+    def _extract_declaration(
+        self,
+        node: Node,
+        source_bytes: bytes,
+        declarations: list[ModuleLevelDeclaration],
+        is_exported: bool,
+        source_node: Node,
+    ) -> None:
+        """Extract variable declarations (const/let/var)."""
+        # Determine declaration type (const, let, var)
+        decl_type = "var"
+        for child in node.children:
+            if child.type in ("const", "let", "var"):
+                decl_type = child.type
+                break
+
+        # Find variable declarators
+        for child in node.children:
+            if child.type == "variable_declarator":
+                name_node = child.child_by_field_name("name")
+                if name_node:
+                    # Handle destructuring patterns
+                    if name_node.type == "identifier":
+                        declarations.append(
+                            ModuleLevelDeclaration(
+                                name=self.get_node_text(name_node, source_bytes),
+                                declaration_type=decl_type,
+                                source_code=self.get_node_text(source_node, source_bytes),
+                                start_line=source_node.start_point[0] + 1,
+                                end_line=source_node.end_point[0] + 1,
+                                is_exported=is_exported,
+                            )
+                        )
+                    elif name_node.type in ("object_pattern", "array_pattern"):
+                        # For destructuring, extract all bound identifiers
+                        identifiers = self._extract_pattern_identifiers(name_node, source_bytes)
+                        for ident in identifiers:
+                            declarations.append(
+                                ModuleLevelDeclaration(
+                                    name=ident,
+                                    declaration_type=decl_type,
+                                    source_code=self.get_node_text(source_node, source_bytes),
+                                    start_line=source_node.start_point[0] + 1,
+                                    end_line=source_node.end_point[0] + 1,
+                                    is_exported=is_exported,
+                                )
+                            )
+
+    def _extract_pattern_identifiers(self, pattern_node: Node, source_bytes: bytes) -> list[str]:
+        """Extract all identifier names from a destructuring pattern."""
+        identifiers: list[str] = []
+
+        def walk(n: Node) -> None:
+            if n.type in {"identifier", "shorthand_property_identifier_pattern"}:
+                identifiers.append(self.get_node_text(n, source_bytes))
+            for child in n.children:
+                walk(child)
+
+        walk(pattern_node)
+        return identifiers
+
+    def find_referenced_identifiers(self, source: str) -> set[str]:
+        """Find all identifiers referenced in the source code.
+
+        This finds all identifier references, excluding:
+        - Declaration names (left side of assignments)
+        - Property names in object literals
+        - Function/class names at definition site
+
+        Args:
+            source: The source code to analyze.
+
+        Returns:
+            Set of referenced identifier names.
+
+        """
+        source_bytes = source.encode("utf8")
+        tree = self.parse(source_bytes)
+        references: set[str] = set()
+
+        self._walk_tree_for_references(tree.root_node, source_bytes, references)
+
+        return references
+
+    def _walk_tree_for_references(self, node: Node, source_bytes: bytes, references: set[str]) -> None:
+        """Walk tree to collect identifier references."""
+        if node.type == "identifier":
+            # Check if this identifier is a reference (not a declaration)
+            parent = node.parent
+            if parent is None:
+                return
+
+            # Skip function/class/method names at definition
+            if parent.type in ("function_declaration", "class_declaration", "method_definition", "function_expression"):
+                if parent.child_by_field_name("name") == node:
+                    # Don't recurse into parent's children - the parent will be visited separately
+                    return
+
+            # Skip variable declarator names (left side of declaration)
+            if parent.type == "variable_declarator" and parent.child_by_field_name("name") == node:
+                # Don't recurse - the value will be visited when we visit the declarator
+                return
+
+            # Skip property names in object literals (keys)
+            if parent.type == "pair" and parent.child_by_field_name("key") == node:
+                # Don't recurse - the value will be visited when we visit the pair
+                return
+
+            # Skip property access property names (obj.property - skip 'property')
+            if parent.type == "member_expression" and parent.child_by_field_name("property") == node:
+                # Don't recurse - the object will be visited when we visit the member_expression
+                return
+
+            # Skip import specifier names
+            if parent.type in ("import_specifier", "import_clause", "namespace_import"):
+                return
+
+            # Skip export specifier names
+            if parent.type == "export_specifier":
+                return
+
+            # Skip parameter names in function definitions (but NOT default values)
+            if parent.type == "formal_parameters":
+                return
+            if parent.type == "required_parameter":
+                # Only skip if this is the parameter name (pattern field), not the default value
+                if parent.child_by_field_name("pattern") == node:
+                    return
+                # If it's the value field (default value), it's a reference - don't skip
+
+            # This is a reference
+            references.add(self.get_node_text(node, source_bytes))
+            return
+
+        # Recurse into children
+        for child in node.children:
+            self._walk_tree_for_references(child, source_bytes, references)
+
+    def has_return_statement(self, function_node: FunctionNode, source: str) -> bool:
+        """Check if a function has a return statement.
+
+        Args:
+            function_node: The function to check.
+            source: The source code.
+
+        Returns:
+            True if the function has a return statement.
+
+        """
+        # Generator functions always implicitly return a Generator/Iterator
+        if function_node.is_generator:
+            return True
+
+        # For arrow functions with expression body, there's an implicit return
+        if function_node.is_arrow:
+            body_node = function_node.node.child_by_field_name("body")
+            if body_node and body_node.type != "statement_block":
+                # Expression body (implicit return)
+                return True
+
+        return self._node_has_return(function_node.node)
+
+    def _node_has_return(self, node: Node) -> bool:
+        """Recursively check if a node contains a return statement."""
+        # Use an explicit stack to avoid recursion overhead while preserving traversal order.
+        func_types = ("function_declaration", "function_expression", "arrow_function", "method_definition")
+        stack = [node]
+        while stack:
+            current = stack.pop()
+            # Direct return statement check
+            if current.type == "return_statement":
+                return True
+
+            # If this node is a function-like node, only traverse its body children
+            if current.type in func_types:
+                body_node = current.child_by_field_name("body")
+                if body_node:
+                    # Push children in reverse so they are processed in original order
+                    children = body_node.children
+                    if children:
+                        stack.extend(reversed(children))
+                # Do not traverse other parts of the function node
+                continue
+
+            # General case: traverse all children
+            children = current.children
+            if children:
+                stack.extend(reversed(children))
+
+        return False
+
+    def extract_type_annotations(self, source: str, function_name: str, function_line: int) -> set[str]:
+        """Extract type annotation names from a function's parameters and return type.
+
+        Finds the function by name and line number, then extracts all user-defined type names
+        from its type annotations (parameters and return type).
+
+        Args:
+            source: The source code to analyze.
+            function_name: Name of the function to find.
+            function_line: Start line of the function (1-indexed).
+
+        Returns:
+            Set of type names found in the function's annotations.
+
+        """
+        source_bytes = source.encode("utf8")
+        tree = self.parse(source_bytes)
+        type_names: set[str] = set()
+
+        # Find the function node
+        func_node = self._find_function_node(tree.root_node, source_bytes, function_name, function_line)
+        if not func_node:
+            return type_names
+
+        # Extract type annotations from parameters
+        params_node = func_node.child_by_field_name("parameters")
+        if params_node:
+            self._extract_type_names_from_node(params_node, source_bytes, type_names)
+
+        # Extract return type annotation
+        return_type_node = func_node.child_by_field_name("return_type")
+        if return_type_node:
+            self._extract_type_names_from_node(return_type_node, source_bytes, type_names)
+
+        return type_names
+
+    def extract_class_field_types(self, source: str, class_name: str) -> set[str]:
+        """Extract type annotation names from class field declarations.
+
+        Args:
+            source: The source code to analyze.
+            class_name: Name of the class to analyze.
+
+        Returns:
+            Set of type names found in class field annotations.
+
+        """
+        source_bytes = source.encode("utf8")
+        tree = self.parse(source_bytes)
+        type_names: set[str] = set()
+
+        # Find the class node
+        class_node = self._find_class_node(tree.root_node, source_bytes, class_name)
+        if not class_node:
+            return type_names
+
+        # Find class body and extract field type annotations
+        body_node = class_node.child_by_field_name("body")
+        if body_node:
+            for child in body_node.children:
+                # Handle public_field_definition (JS/TS class fields)
+                if child.type in ("public_field_definition", "field_definition"):
+                    type_annotation = child.child_by_field_name("type")
+                    if type_annotation:
+                        self._extract_type_names_from_node(type_annotation, source_bytes, type_names)
+
+        return type_names
+
+    def _find_function_node(
+        self, node: Node, source_bytes: bytes, function_name: str, function_line: int
+    ) -> Node | None:
+        """Find a function/method node by name and line number."""
+        if node.type in (
+            "function_declaration",
+            "method_definition",
+            "function_expression",
+            "generator_function_declaration",
+        ):
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                name = self.get_node_text(name_node, source_bytes)
+                # Line is 1-indexed, tree-sitter is 0-indexed
+                if name == function_name and (node.start_point[0] + 1) == function_line:
+                    return node
+
+        # Check arrow functions assigned to variables
+        if node.type == "lexical_declaration":
+            for child in node.children:
+                if child.type == "variable_declarator":
+                    name_node = child.child_by_field_name("name")
+                    value_node = child.child_by_field_name("value")
+                    if name_node and value_node and value_node.type == "arrow_function":
+                        name = self.get_node_text(name_node, source_bytes)
+                        if name == function_name and (node.start_point[0] + 1) == function_line:
+                            return value_node
+
+        # Recurse into children
+        for child in node.children:
+            result = self._find_function_node(child, source_bytes, function_name, function_line)
+            if result:
+                return result
+
+        return None
+
+    def _find_class_node(self, node: Node, source_bytes: bytes, class_name: str) -> Node | None:
+        """Find a class node by name."""
+        if node.type in ("class_declaration", "class"):
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                name = self.get_node_text(name_node, source_bytes)
+                if name == class_name:
+                    return node
+
+        for child in node.children:
+            result = self._find_class_node(child, source_bytes, class_name)
+            if result:
+                return result
+
+        return None
+
+    def _extract_type_names_from_node(self, node: Node, source_bytes: bytes, type_names: set[str]) -> None:
+        """Recursively extract type names from a type annotation node.
+
+        Handles various TypeScript type annotation patterns:
+        - Simple types: number, string, Point
+        - Generic types: Array<T>, Promise<T>
+        - Union types: A | B
+        - Intersection types: A & B
+        - Array types: T[]
+        - Tuple types: [A, B]
+        - Object/mapped types: { key: Type }
+
+        Args:
+            node: Tree-sitter node to analyze.
+            source_bytes: Source code as bytes.
+            type_names: Set to add found type names to.
+
+        """
+        # Handle type identifiers (the actual type name references)
+        if node.type == "type_identifier":
+            type_name = self.get_node_text(node, source_bytes)
+            # Skip primitive types
+            if type_name not in (
+                "number",
+                "string",
+                "boolean",
+                "void",
+                "null",
+                "undefined",
+                "any",
+                "never",
+                "unknown",
+                "object",
+                "symbol",
+                "bigint",
+            ):
+                type_names.add(type_name)
+            return
+
+        # Handle regular identifiers in type position (can happen in some contexts)
+        if node.type == "identifier" and node.parent and node.parent.type in ("type_annotation", "generic_type"):
+            type_name = self.get_node_text(node, source_bytes)
+            if type_name not in (
+                "number",
+                "string",
+                "boolean",
+                "void",
+                "null",
+                "undefined",
+                "any",
+                "never",
+                "unknown",
+                "object",
+                "symbol",
+                "bigint",
+            ):
+                type_names.add(type_name)
+            return
+
+        # Handle nested_type_identifier (e.g., Namespace.Type)
+        if node.type == "nested_type_identifier":
+            # Get the full qualified name
+            type_name = self.get_node_text(node, source_bytes)
+            # Add both the full name and the first part (namespace)
+            type_names.add(type_name)
+            # Also extract the module/namespace part
+            module_node = node.child_by_field_name("module")
+            if module_node:
+                type_names.add(self.get_node_text(module_node, source_bytes))
+            return
+
+        # Recurse into all children for compound types
+        for child in node.children:
+            self._extract_type_names_from_node(child, source_bytes, type_names)
+
+    def find_type_definitions(self, source: str) -> list[TypeDefinition]:
+        """Find all type definitions (interface, type, class, enum) in source code.
+
+        Args:
+            source: The source code to analyze.
+
+        Returns:
+            List of TypeDefinition objects.
+
+        """
+        source_bytes = source.encode("utf8")
+        tree = self.parse(source_bytes)
+        definitions: list[TypeDefinition] = []
+
+        # Walk through top-level nodes
+        for child in tree.root_node.children:
+            self._extract_type_definition(child, source_bytes, definitions)
+
+        return definitions
+
+    def _extract_type_definition(
+        self, node: Node, source_bytes: bytes, definitions: list[TypeDefinition], is_exported: bool = False
+    ) -> None:
+        """Extract type definitions from a node."""
+        # Handle export statements - unwrap to get the actual definition
+        if node.type == "export_statement":
+            for child in node.children:
+                if child.type in (
+                    "interface_declaration",
+                    "type_alias_declaration",
+                    "class_declaration",
+                    "enum_declaration",
+                ):
+                    self._extract_type_definition(child, source_bytes, definitions, is_exported=True)
+            return
+
+        # Extract interface definitions
+        if node.type == "interface_declaration":
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                # Look for preceding JSDoc comment
+                jsdoc = ""
+                prev_sibling = node.prev_named_sibling
+                if prev_sibling and prev_sibling.type == "comment":
+                    comment_text = self.get_node_text(prev_sibling, source_bytes)
+                    if comment_text.strip().startswith("/**"):
+                        jsdoc = comment_text + "\n"
+
+                definitions.append(
+                    TypeDefinition(
+                        name=self.get_node_text(name_node, source_bytes),
+                        definition_type="interface",
+                        source_code=jsdoc + self.get_node_text(node, source_bytes),
+                        start_line=node.start_point[0] + 1,
+                        end_line=node.end_point[0] + 1,
+                        is_exported=is_exported,
+                    )
+                )
+
+        # Extract type alias definitions
+        elif node.type == "type_alias_declaration":
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                # Look for preceding JSDoc comment
+                jsdoc = ""
+                prev_sibling = node.prev_named_sibling
+                if prev_sibling and prev_sibling.type == "comment":
+                    comment_text = self.get_node_text(prev_sibling, source_bytes)
+                    if comment_text.strip().startswith("/**"):
+                        jsdoc = comment_text + "\n"
+
+                definitions.append(
+                    TypeDefinition(
+                        name=self.get_node_text(name_node, source_bytes),
+                        definition_type="type",
+                        source_code=jsdoc + self.get_node_text(node, source_bytes),
+                        start_line=node.start_point[0] + 1,
+                        end_line=node.end_point[0] + 1,
+                        is_exported=is_exported,
+                    )
+                )
+
+        # Extract enum definitions
+        elif node.type == "enum_declaration":
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                # Look for preceding JSDoc comment
+                jsdoc = ""
+                prev_sibling = node.prev_named_sibling
+                if prev_sibling and prev_sibling.type == "comment":
+                    comment_text = self.get_node_text(prev_sibling, source_bytes)
+                    if comment_text.strip().startswith("/**"):
+                        jsdoc = comment_text + "\n"
+
+                definitions.append(
+                    TypeDefinition(
+                        name=self.get_node_text(name_node, source_bytes),
+                        definition_type="enum",
+                        source_code=jsdoc + self.get_node_text(node, source_bytes),
+                        start_line=node.start_point[0] + 1,
+                        end_line=node.end_point[0] + 1,
+                        is_exported=is_exported,
+                    )
+                )
+
+        # Extract class definitions (as types)
+        elif node.type == "class_declaration":
+            name_node = node.child_by_field_name("name")
+            if name_node:
+                # Look for preceding JSDoc comment
+                jsdoc = ""
+                prev_sibling = node.prev_named_sibling
+                if prev_sibling and prev_sibling.type == "comment":
+                    comment_text = self.get_node_text(prev_sibling, source_bytes)
+                    if comment_text.strip().startswith("/**"):
+                        jsdoc = comment_text + "\n"
+
+                definitions.append(
+                    TypeDefinition(
+                        name=self.get_node_text(name_node, source_bytes),
+                        definition_type="class",
+                        source_code=jsdoc + self.get_node_text(node, source_bytes),
+                        start_line=node.start_point[0] + 1,
+                        end_line=node.end_point[0] + 1,
+                        is_exported=is_exported,
+                    )
+                )
+
+
+def get_analyzer_for_file(file_path: Path) -> TreeSitterAnalyzer:
+    """Get the appropriate TreeSitterAnalyzer for a file based on its extension.
+
+    Args:
+        file_path: Path to the file.
+
+    Returns:
+        TreeSitterAnalyzer configured for the file's language.
+
+    """
+    suffix = file_path.suffix.lower()
+
+    if suffix == ".ts":
+        return TreeSitterAnalyzer(TreeSitterLanguage.TYPESCRIPT)
+    if suffix == ".tsx":
+        return TreeSitterAnalyzer(TreeSitterLanguage.TSX)
+    # Default to JavaScript for .js, .jsx, .mjs, .cjs
+    return TreeSitterAnalyzer(TreeSitterLanguage.JAVASCRIPT)
diff --git a/codeflash/models/function_types.py b/codeflash/models/function_types.py
index bea6672b0..dc51aaa92 100644
--- a/codeflash/models/function_types.py
+++ b/codeflash/models/function_types.py
@@ -7,7 +7,7 @@
 from __future__ import annotations
 
 from pathlib import Path
-from typing import Optional
+from typing import Any, Optional
 
 from pydantic import Field
 from pydantic.dataclasses import dataclass
@@ -61,6 +61,7 @@ class FunctionToOptimize:
     is_method: bool = False
     language: str = "python"
     doc_start_line: Optional[int] = None
+    metadata: Optional[dict[str, Any]] = Field(default=None)
 
     @property
     def top_level_parent_name(self) -> str:
diff --git a/codeflash/result/critic.py b/codeflash/result/critic.py
index 600c4a537..e04f01d50 100644
--- a/codeflash/result/critic.py
+++ b/codeflash/result/critic.py
@@ -21,6 +21,7 @@ class AcceptanceReason(Enum):
     RUNTIME = "runtime"
     THROUGHPUT = "throughput"
     CONCURRENCY = "concurrency"
+    RENDER_COUNT = "render_count"
     NONE = "none"
 
 
@@ -208,3 +209,40 @@ def coverage_critic(original_code_coverage: CoverageData | None) -> bool:
     if original_code_coverage:
         return original_code_coverage.coverage >= COVERAGE_THRESHOLD
     return False
+
+
+# Minimum render count reduction percentage to accept a React optimization
+MIN_RENDER_COUNT_REDUCTION_PCT = 0.20  # 20%
+
+
+def render_efficiency_critic(
+    original_render_count: int,
+    optimized_render_count: int,
+    original_render_duration: float,
+    optimized_render_duration: float,
+    best_render_count_until_now: int | None = None,
+) -> bool:
+    """Evaluate whether a React optimization reduces re-renders or render time sufficiently.
+
+    Accepts if:
+    - Render count is reduced by >= 20%
+    - OR render duration is reduced by >= MIN_IMPROVEMENT_THRESHOLD
+    - AND the candidate is the best seen so far
+    """
+    if original_render_count == 0:
+        return False
+
+    # Check render count reduction
+    count_reduction = (original_render_count - optimized_render_count) / original_render_count
+    count_improved = count_reduction >= MIN_RENDER_COUNT_REDUCTION_PCT
+
+    # Check render duration reduction
+    duration_improved = False
+    if original_render_duration > 0:
+        duration_gain = (original_render_duration - optimized_render_duration) / original_render_duration
+        duration_improved = duration_gain > MIN_IMPROVEMENT_THRESHOLD
+
+    # Check if this is the best candidate so far
+    is_best = best_render_count_until_now is None or optimized_render_count <= best_render_count_until_now
+
+    return (count_improved or duration_improved) and is_best
diff --git a/codeflash/result/explanation.py b/codeflash/result/explanation.py
index f0aff73d0..55e0f31f7 100644
--- a/codeflash/result/explanation.py
+++ b/codeflash/result/explanation.py
@@ -30,6 +30,7 @@ class Explanation:
     original_concurrency_metrics: Optional[ConcurrencyMetrics] = None
     best_concurrency_metrics: Optional[ConcurrencyMetrics] = None
     acceptance_reason: AcceptanceReason = AcceptanceReason.RUNTIME
+    render_benchmark_markdown: Optional[str] = None
 
     @property
     def perf_improvement_line(self) -> str:
@@ -37,6 +38,7 @@ def perf_improvement_line(self) -> str:
             AcceptanceReason.RUNTIME: "runtime",
             AcceptanceReason.THROUGHPUT: "throughput",
             AcceptanceReason.CONCURRENCY: "concurrency",
+            AcceptanceReason.RENDER_COUNT: "render count",
             AcceptanceReason.NONE: "",
         }.get(self.acceptance_reason, "")
 
@@ -144,10 +146,16 @@ def __str__(self) -> str:
         else:
             performance_description = f"Runtime went down from {original_runtime_human} to {best_runtime_human} \n\n"
 
+        # Include React render benchmark if available
+        render_info = ""
+        if self.render_benchmark_markdown:
+            render_info = self.render_benchmark_markdown + "\n\n"
+
         return (
             f"Optimized {self.function_name} in {self.file_path}\n"
             f"{self.perf_improvement_line}\n"
             + performance_description
+            + render_info
             + (benchmark_info if benchmark_info else "")
             + self.raw_explanation_message
             + " \n\n"
diff --git a/codeflash/version.py b/codeflash/version.py
index 5c0c09b55..57668e5ec 100644
--- a/codeflash/version.py
+++ b/codeflash/version.py
@@ -1,2 +1,2 @@
 # These version placeholders will be replaced by uv-dynamic-versioning during build.
-__version__ = "0.20.1"
+__version__ = "0.20.1.post141.dev0+80380063"
diff --git a/tests/integration/test_react_e2e.py b/tests/integration/test_react_e2e.py
new file mode 100644
index 000000000..3addedb4b
--- /dev/null
+++ b/tests/integration/test_react_e2e.py
@@ -0,0 +1,160 @@
+"""End-to-end integration test for the React optimization pipeline.
+
+Tests the full flow: framework detection → component discovery → context extraction
+→ profiler marker parsing → benchmarking → critic evaluation.
+
+Note: This does not invoke the LLM or run actual Jest tests. It validates the
+pipeline wiring by running each stage on fixture files and verifying outputs.
+"""
+
+from __future__ import annotations
+
+import json
+from pathlib import Path
+
+import pytest
+
+FIXTURES_DIR = Path(__file__).parent.parent / "react" / "fixtures"
+
+
+@pytest.fixture(autouse=True)
+def clear_framework_cache():
+    from codeflash.languages.javascript.frameworks.detector import detect_framework
+
+    detect_framework.cache_clear()
+    yield
+    detect_framework.cache_clear()
+
+
+class TestReactPipelineE2E:
+    def test_framework_detection_from_fixture(self):
+        from codeflash.languages.javascript.frameworks.detector import detect_framework
+
+        info = detect_framework(FIXTURES_DIR)
+        assert info.name == "react"
+        assert info.react_version_major == 18
+        assert info.has_testing_library is True
+
+    def test_component_discovery(self):
+        from codeflash.languages.javascript.frameworks.react.discovery import find_react_components
+        from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer
+
+        analyzer = TreeSitterAnalyzer("tsx")
+
+        # Counter.tsx — should find 1 function component
+        source = FIXTURES_DIR.joinpath("Counter.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "Counter.tsx", analyzer)
+        assert any(c.function_name == "Counter" for c in components)
+
+        # ServerComponent.tsx — should be skipped (use server)
+        source = FIXTURES_DIR.joinpath("ServerComponent.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "ServerComponent.tsx", analyzer)
+        assert components == []
+
+        # useDebounce.ts — should be detected as hook, not component
+        ts_analyzer = TreeSitterAnalyzer("typescript")
+        source = FIXTURES_DIR.joinpath("useDebounce.ts").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "useDebounce.ts", ts_analyzer)
+        hooks = [c for c in components if c.component_type.value == "hook"]
+        assert len(hooks) == 1
+        assert hooks[0].function_name == "useDebounce"
+
+    def test_optimization_opportunity_detection(self):
+        from codeflash.languages.javascript.frameworks.react.analyzer import (
+            OpportunityType,
+            detect_optimization_opportunities,
+        )
+        from codeflash.languages.javascript.frameworks.react.discovery import (
+            ComponentType,
+            ReactComponentInfo,
+            find_react_components,
+        )
+        from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer
+
+        analyzer = TreeSitterAnalyzer("tsx")
+
+        # DataTable has expensive operations without useMemo
+        source = FIXTURES_DIR.joinpath("DataTable.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "DataTable.tsx", analyzer)
+        data_table = [c for c in components if c.function_name == "DataTable"][0]
+        opps = detect_optimization_opportunities(source, data_table)
+        opp_types = [o.type for o in opps]
+        assert OpportunityType.MISSING_USEMEMO in opp_types
+
+        # UserCard has inline objects in JSX
+        source = FIXTURES_DIR.joinpath("UserCard.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "UserCard.tsx", analyzer)
+        user_card = [c for c in components if c.function_name == "UserCard"][0]
+        opps = detect_optimization_opportunities(source, user_card)
+        opp_types = [o.type for o in opps]
+        assert OpportunityType.INLINE_OBJECT_PROP in opp_types
+
+    def test_context_extraction(self):
+        from codeflash.languages.javascript.frameworks.react.context import extract_react_context
+        from codeflash.languages.javascript.frameworks.react.discovery import find_react_components
+        from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer
+
+        analyzer = TreeSitterAnalyzer("tsx")
+        source = FIXTURES_DIR.joinpath("TaskList.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "TaskList.tsx", analyzer)
+        task_list = [c for c in components if c.function_name == "TaskList"][0]
+
+        context = extract_react_context(task_list, source, analyzer, FIXTURES_DIR)
+        assert len(context.hooks_used) > 0
+        assert len(context.optimization_opportunities) > 0
+
+        prompt = context.to_prompt_string()
+        assert "useState" in prompt or "Hooks used" in prompt
+
+    def test_profiler_marker_parsing(self):
+        from codeflash.languages.javascript.parse import parse_react_render_markers
+
+        stdout = (
+            "PASS src/TaskList.test.tsx\n"
+            "!######REACT_RENDER:TaskList:mount:25.3:40.1:1######!\n"
+            "!######REACT_RENDER:TaskList:update:5.2:40.1:5######!\n"
+            "!######REACT_RENDER:TaskList:update:4.8:40.1:10######!\n"
+        )
+        profiles = parse_react_render_markers(stdout)
+        assert len(profiles) == 3
+        assert profiles[0].component_name == "TaskList"
+        assert profiles[2].render_count == 10
+
+    def test_benchmarking_and_critic(self):
+        from codeflash.languages.javascript.frameworks.react.benchmarking import (
+            compare_render_benchmarks,
+            format_render_benchmark_for_pr,
+        )
+        from codeflash.languages.javascript.parse import RenderProfile
+        from codeflash.result.critic import render_efficiency_critic
+
+        original = [
+            RenderProfile("TaskList", "mount", 25.0, 40.0, 1),
+            RenderProfile("TaskList", "update", 5.0, 40.0, 25),
+            RenderProfile("TaskList", "update", 4.5, 40.0, 47),
+        ]
+        optimized = [
+            RenderProfile("TaskList", "mount", 20.0, 35.0, 1),
+            RenderProfile("TaskList", "update", 2.0, 35.0, 3),
+        ]
+
+        benchmark = compare_render_benchmarks(original, optimized)
+        assert benchmark is not None
+        assert benchmark.original_render_count == 47
+        assert benchmark.optimized_render_count == 3
+        assert benchmark.render_count_reduction_pct > 90
+
+        # Critic should accept this optimization
+        accepted = render_efficiency_critic(
+            original_render_count=benchmark.original_render_count,
+            optimized_render_count=benchmark.optimized_render_count,
+            original_render_duration=benchmark.original_avg_duration_ms,
+            optimized_render_duration=benchmark.optimized_avg_duration_ms,
+        )
+        assert accepted is True
+
+        # PR formatting
+        pr_output = format_render_benchmark_for_pr(benchmark)
+        assert "47" in pr_output
+        assert "3" in pr_output
+        assert "React Render Performance" in pr_output
\ No newline at end of file
diff --git a/tests/react/__init__.py b/tests/react/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/react/fixtures/Counter.tsx b/tests/react/fixtures/Counter.tsx
new file mode 100644
index 000000000..0d9b5941d
--- /dev/null
+++ b/tests/react/fixtures/Counter.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+
+interface CounterProps {
+  initialCount?: number;
+  label?: string;
+}
+
+export function Counter({ initialCount = 0, label = 'Count' }: CounterProps) {
+  const [count, setCount] = useState(initialCount);
+
+  const increment = () => setCount(c => c + 1);
+  const decrement = () => setCount(c => c - 1);
+
+  return (
+    <div>
+      <span>{label}: {count}</span>
+      <button onClick={increment}>+</button>
+      <button onClick={decrement}>-</button>
+    </div>
+  );
+}
diff --git a/tests/react/fixtures/DataTable.tsx b/tests/react/fixtures/DataTable.tsx
new file mode 100644
index 000000000..4fdb273f7
--- /dev/null
+++ b/tests/react/fixtures/DataTable.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface DataTableProps {
+  items: Array<{ id: number; name: string; value: number }>;
+  filterText: string;
+  sortBy: 'name' | 'value';
+}
+
+export function DataTable({ items, filterText, sortBy }: DataTableProps) {
+  // These expensive operations run on every render - should use useMemo
+  const filteredItems = items.filter(item =>
+    item.name.toLowerCase().includes(filterText.toLowerCase())
+  );
+
+  const sortedItems = filteredItems.sort((a, b) => {
+    if (sortBy === 'name') return a.name.localeCompare(b.name);
+    return a.value - b.value;
+  });
+
+  const total = sortedItems.reduce((sum, item) => sum + item.value, 0);
+
+  return (
+    <div>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {sortedItems.map(item => (
+            <tr key={item.id}>
+              <td>{item.name}</td>
+              <td>{item.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div>Total: {total}</div>
+    </div>
+  );
+}
diff --git a/tests/react/fixtures/MemoizedList.tsx b/tests/react/fixtures/MemoizedList.tsx
new file mode 100644
index 000000000..8de7234d4
--- /dev/null
+++ b/tests/react/fixtures/MemoizedList.tsx
@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+
+interface ListItemProps {
+  text: string;
+  isSelected: boolean;
+}
+
+const ListItem = memo(function ListItem({ text, isSelected }: ListItemProps) {
+  return (
+    <li className={isSelected ? 'selected' : ''}>
+      {text}
+    </li>
+  );
+});
+
+interface MemoizedListProps {
+  items: string[];
+  selectedIndex: number;
+}
+
+export const MemoizedList = memo(function MemoizedList({ items, selectedIndex }: MemoizedListProps) {
+  return (
+    <ul>
+      {items.map((item, index) => (
+        <ListItem key={index} text={item} isSelected={index === selectedIndex} />
+      ))}
+    </ul>
+  );
+});
diff --git a/tests/react/fixtures/ServerComponent.tsx b/tests/react/fixtures/ServerComponent.tsx
new file mode 100644
index 000000000..180da48f1
--- /dev/null
+++ b/tests/react/fixtures/ServerComponent.tsx
@@ -0,0 +1,17 @@
+"use server";
+
+interface ServerPageProps {
+  id: string;
+}
+
+export async function ServerPage({ id }: ServerPageProps) {
+  const data = await fetch(`/api/data/${id}`);
+  const json = await data.json();
+
+  return (
+    <div>
+      <h1>{json.title}</h1>
+      <p>{json.description}</p>
+    </div>
+  );
+}
diff --git a/tests/react/fixtures/TaskList.tsx b/tests/react/fixtures/TaskList.tsx
new file mode 100644
index 000000000..65d337534
--- /dev/null
+++ b/tests/react/fixtures/TaskList.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useContext, useCallback } from 'react';
+
+interface Task {
+  id: number;
+  title: string;
+  completed: boolean;
+  priority: 'low' | 'medium' | 'high';
+}
+
+interface TaskListProps {
+  tasks: Task[];
+  onToggle: (id: number) => void;
+  onDelete: (id: number) => void;
+  filter: 'all' | 'active' | 'completed';
+}
+
+export function TaskList({ tasks, onToggle, onDelete, filter }: TaskListProps) {
+  const [sortBy, setSortBy] = useState<'title' | 'priority'>('title');
+
+  // Inline filtering and sorting without useMemo
+  const filteredTasks = tasks.filter(task => {
+    if (filter === 'active') return !task.completed;
+    if (filter === 'completed') return task.completed;
+    return true;
+  });
+
+  const sortedTasks = filteredTasks.sort((a, b) => {
+    if (sortBy === 'title') return a.title.localeCompare(b.title);
+    const priority = { low: 0, medium: 1, high: 2 };
+    return priority[b.priority] - priority[a.priority];
+  });
+
+  // Inline function defined in render body
+  const handleToggle = (id: number) => {
+    onToggle(id);
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
+        <button onClick={() => setSortBy('title')}>Sort by Title</button>
+        <button onClick={() => setSortBy('priority')}>Sort by Priority</button>
+      </div>
+      <ul>
+        {sortedTasks.map(task => (
+          <li
+            key={task.id}
+            style={{
+              textDecoration: task.completed ? 'line-through' : 'none',
+              color: task.priority === 'high' ? 'red' : 'inherit',
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={task.completed}
+              onChange={() => handleToggle(task.id)}
+            />
+            <span>{task.title}</span>
+            <button onClick={() => onDelete(task.id)}>Delete</button>
+          </li>
+        ))}
+      </ul>
+      <div>Total: {sortedTasks.length} tasks</div>
+    </div>
+  );
+}
diff --git a/tests/react/fixtures/UserCard.tsx b/tests/react/fixtures/UserCard.tsx
new file mode 100644
index 000000000..3e4bf08b8
--- /dev/null
+++ b/tests/react/fixtures/UserCard.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface UserCardProps {
+  name: string;
+  email: string;
+  role: string;
+  onEdit: (email: string) => void;
+}
+
+export function UserCard({ name, email, role, onEdit }: UserCardProps) {
+  return (
+    <div
+      style={{ padding: '16px', border: '1px solid #ccc', borderRadius: '8px' }}
+      className="user-card"
+    >
+      <h3 style={{ margin: 0 }}>{name}</h3>
+      <p>{email}</p>
+      <span style={{ color: role === 'admin' ? 'red' : 'blue' }}>{role}</span>
+      <button onClick={() => onEdit(email)}>Edit</button>
+    </div>
+  );
+}
diff --git a/tests/react/fixtures/__init__.py b/tests/react/fixtures/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/react/fixtures/package.json b/tests/react/fixtures/package.json
new file mode 100644
index 000000000..76bea756d
--- /dev/null
+++ b/tests/react/fixtures/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "test-react-project",
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "typescript": "^5.0.0",
+    "jest": "^29.0.0",
+    "@types/react": "^18.0.0"
+  }
+}
diff --git a/tests/react/fixtures/useDebounce.ts b/tests/react/fixtures/useDebounce.ts
new file mode 100644
index 000000000..0a45ef2ef
--- /dev/null
+++ b/tests/react/fixtures/useDebounce.ts
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
diff --git a/tests/react/test_analyzer.py b/tests/react/test_analyzer.py
new file mode 100644
index 000000000..4f9bad026
--- /dev/null
+++ b/tests/react/test_analyzer.py
@@ -0,0 +1,137 @@
+"""Tests for React optimization opportunity detection."""
+
+from __future__ import annotations
+
+from codeflash.languages.javascript.frameworks.react.analyzer import (
+    OpportunitySeverity,
+    OpportunityType,
+    detect_optimization_opportunities,
+)
+from codeflash.languages.javascript.frameworks.react.discovery import (
+    ComponentType,
+    ReactComponentInfo,
+)
+
+
+def _make_component_info(
+    name: str = "TestComponent",
+    start_line: int = 1,
+    end_line: int = 20,
+    is_memoized: bool = False,
+) -> ReactComponentInfo:
+    return ReactComponentInfo(
+        function_name=name,
+        component_type=ComponentType.FUNCTION,
+        returns_jsx=True,
+        is_memoized=is_memoized,
+        start_line=start_line,
+        end_line=end_line,
+    )
+
+
+class TestDetectInlineObjects:
+    def test_inline_style_prop(self):
+        source = 'function TestComponent() {\n  return <div style={{ color: "red" }}>hello</div>;\n}'
+        info = _make_component_info(end_line=3)
+        opps = detect_optimization_opportunities(source, info)
+        types = [o.type for o in opps]
+        assert OpportunityType.INLINE_OBJECT_PROP in types
+
+    def test_inline_array_prop(self):
+        source = "function TestComponent() {\n  return <Select options={['a', 'b']} />;\n}"
+        info = _make_component_info(end_line=3)
+        opps = detect_optimization_opportunities(source, info)
+        types = [o.type for o in opps]
+        assert OpportunityType.INLINE_ARRAY_PROP in types
+
+    def test_no_inline_props(self):
+        source = "function TestComponent() {\n  const style = { color: 'red' };\n  return <div style={style}>hello</div>;\n}"
+        info = _make_component_info(end_line=4)
+        opps = detect_optimization_opportunities(source, info)
+        inline_opps = [o for o in opps if o.type in (OpportunityType.INLINE_OBJECT_PROP, OpportunityType.INLINE_ARRAY_PROP)]
+        assert len(inline_opps) == 0
+
+
+class TestDetectMissingUseCallback:
+    def test_arrow_function_in_render(self):
+        source = "function TestComponent() {\n  const handleClick = () => console.log('click');\n  return <button onClick={handleClick}>Click</button>;\n}"
+        info = _make_component_info(end_line=4)
+        opps = detect_optimization_opportunities(source, info)
+        types = [o.type for o in opps]
+        assert OpportunityType.MISSING_USECALLBACK in types
+
+    def test_function_expression_in_render(self):
+        source = "function TestComponent() {\n  function handleSubmit(e) { e.preventDefault(); }\n  return <form onSubmit={handleSubmit}></form>;\n}"
+        info = _make_component_info(end_line=4)
+        opps = detect_optimization_opportunities(source, info)
+        types = [o.type for o in opps]
+        assert OpportunityType.MISSING_USECALLBACK in types
+
+    def test_usecallback_present_not_flagged(self):
+        source = "function TestComponent() {\n  const handleClick = useCallback(() => console.log('click'), []);\n  return <button onClick={handleClick}>Click</button>;\n}"
+        info = _make_component_info(end_line=4)
+        opps = detect_optimization_opportunities(source, info)
+        callback_opps = [o for o in opps if o.type == OpportunityType.MISSING_USECALLBACK]
+        assert len(callback_opps) == 0
+
+
+class TestDetectMissingUseMemo:
+    def test_filter_in_render(self):
+        source = "function TestComponent({ items }) {\n  const filtered = items.filter(i => i.active);\n  return <ul>{filtered.map(i => <li key={i.id}>{i.name}</li>)}</ul>;\n}"
+        info = _make_component_info(end_line=4)
+        opps = detect_optimization_opportunities(source, info)
+        types = [o.type for o in opps]
+        assert OpportunityType.MISSING_USEMEMO in types
+
+    def test_sort_in_render(self):
+        source = "function TestComponent({ items }) {\n  const sorted = items.sort((a, b) => a.name.localeCompare(b.name));\n  return <ul>{sorted.map(i => <li key={i.id}>{i.name}</li>)}</ul>;\n}"
+        info = _make_component_info(end_line=4)
+        opps = detect_optimization_opportunities(source, info)
+        types = [o.type for o in opps]
+        assert OpportunityType.MISSING_USEMEMO in types
+
+    def test_reduce_in_render(self):
+        source = "function TestComponent({ items }) {\n  const total = items.reduce((sum, i) => sum + i.value, 0);\n  return <div>{total}</div>;\n}"
+        info = _make_component_info(end_line=4)
+        opps = detect_optimization_opportunities(source, info)
+        types = [o.type for o in opps]
+        assert OpportunityType.MISSING_USEMEMO in types
+
+    def test_usememo_present_not_flagged(self):
+        source = "function TestComponent({ items }) {\n  const filtered = useMemo(() => items.filter(i => i.active), [items]);\n  return <div>{filtered.length} items</div>;\n}"
+        info = _make_component_info(end_line=4)
+        opps = detect_optimization_opportunities(source, info)
+        memo_opps = [o for o in opps if o.type == OpportunityType.MISSING_USEMEMO]
+        assert len(memo_opps) == 0
+
+
+class TestDetectMissingReactMemo:
+    def test_non_memoized_component(self):
+        source = "function TestComponent() {\n  return <div>hello</div>;\n}"
+        info = _make_component_info(is_memoized=False, end_line=3)
+        opps = detect_optimization_opportunities(source, info)
+        types = [o.type for o in opps]
+        assert OpportunityType.MISSING_REACT_MEMO in types
+
+    def test_memoized_component_not_flagged(self):
+        source = "function TestComponent() {\n  return <div>hello</div>;\n}"
+        info = _make_component_info(is_memoized=True, end_line=3)
+        opps = detect_optimization_opportunities(source, info)
+        memo_opps = [o for o in opps if o.type == OpportunityType.MISSING_REACT_MEMO]
+        assert len(memo_opps) == 0
+
+
+class TestSeverityLevels:
+    def test_inline_object_is_high(self):
+        source = 'function TestComponent() {\n  return <div style={{ color: "red" }}>hello</div>;\n}'
+        info = _make_component_info(end_line=3)
+        opps = detect_optimization_opportunities(source, info)
+        inline_opps = [o for o in opps if o.type == OpportunityType.INLINE_OBJECT_PROP]
+        assert all(o.severity == OpportunitySeverity.HIGH for o in inline_opps)
+
+    def test_missing_memo_is_medium(self):
+        source = "function TestComponent() {\n  return <div>hello</div>;\n}"
+        info = _make_component_info(is_memoized=False, end_line=3)
+        opps = detect_optimization_opportunities(source, info)
+        memo_opps = [o for o in opps if o.type == OpportunityType.MISSING_REACT_MEMO]
+        assert all(o.severity == OpportunitySeverity.MEDIUM for o in memo_opps)
diff --git a/tests/react/test_benchmarking.py b/tests/react/test_benchmarking.py
new file mode 100644
index 000000000..1828f53e8
--- /dev/null
+++ b/tests/react/test_benchmarking.py
@@ -0,0 +1,173 @@
+"""Tests for React render benchmarking and comparison."""
+
+from __future__ import annotations
+
+from codeflash.languages.javascript.frameworks.react.benchmarking import (
+    RenderBenchmark,
+    compare_render_benchmarks,
+    format_render_benchmark_for_pr,
+)
+from codeflash.languages.javascript.parse import RenderProfile
+from codeflash.result.critic import render_efficiency_critic
+
+
+class TestRenderBenchmark:
+    def test_render_count_reduction_pct(self):
+        b = RenderBenchmark(
+            component_name="Counter",
+            original_render_count=50,
+            optimized_render_count=5,
+            original_avg_duration_ms=10.0,
+            optimized_avg_duration_ms=2.0,
+        )
+        assert b.render_count_reduction_pct == 90.0
+
+    def test_duration_reduction_pct(self):
+        b = RenderBenchmark(
+            component_name="Counter",
+            original_render_count=10,
+            optimized_render_count=5,
+            original_avg_duration_ms=20.0,
+            optimized_avg_duration_ms=5.0,
+        )
+        assert b.duration_reduction_pct == 75.0
+
+    def test_render_speedup(self):
+        b = RenderBenchmark(
+            component_name="Counter",
+            original_render_count=10,
+            optimized_render_count=2,
+            original_avg_duration_ms=100.0,
+            optimized_avg_duration_ms=10.0,
+        )
+        assert b.render_speedup_x == 10.0
+
+    def test_zero_original_render_count(self):
+        b = RenderBenchmark(
+            component_name="Counter",
+            original_render_count=0,
+            optimized_render_count=0,
+            original_avg_duration_ms=0.0,
+            optimized_avg_duration_ms=0.0,
+        )
+        assert b.render_count_reduction_pct == 0.0
+        assert b.duration_reduction_pct == 0.0
+
+    def test_zero_optimized_duration(self):
+        b = RenderBenchmark(
+            component_name="Counter",
+            original_render_count=10,
+            optimized_render_count=1,
+            original_avg_duration_ms=10.0,
+            optimized_avg_duration_ms=0.0,
+        )
+        assert b.render_speedup_x == 0.0
+
+
+class TestCompareRenderBenchmarks:
+    def test_basic_comparison(self):
+        original = [
+            RenderProfile("Counter", "mount", 12.0, 15.0, 1),
+            RenderProfile("Counter", "update", 3.0, 15.0, 5),
+            RenderProfile("Counter", "update", 2.5, 15.0, 10),
+        ]
+        optimized = [
+            RenderProfile("Counter", "mount", 11.0, 14.0, 1),
+            RenderProfile("Counter", "update", 1.5, 14.0, 2),
+        ]
+        benchmark = compare_render_benchmarks(original, optimized)
+        assert benchmark is not None
+        assert benchmark.component_name == "Counter"
+        assert benchmark.original_render_count == 10  # max of [1, 5, 10]
+        assert benchmark.optimized_render_count == 2  # max of [1, 2]
+
+    def test_empty_profiles(self):
+        assert compare_render_benchmarks([], []) is None
+        assert compare_render_benchmarks([RenderProfile("A", "mount", 1.0, 1.0, 1)], []) is None
+        assert compare_render_benchmarks([], [RenderProfile("A", "mount", 1.0, 1.0, 1)]) is None
+
+    def test_avg_duration(self):
+        original = [
+            RenderProfile("Counter", "mount", 10.0, 15.0, 1),
+            RenderProfile("Counter", "update", 6.0, 15.0, 2),
+        ]
+        optimized = [
+            RenderProfile("Counter", "mount", 8.0, 14.0, 1),
+            RenderProfile("Counter", "update", 2.0, 14.0, 2),
+        ]
+        benchmark = compare_render_benchmarks(original, optimized)
+        assert benchmark is not None
+        assert benchmark.original_avg_duration_ms == 8.0  # (10+6)/2
+        assert benchmark.optimized_avg_duration_ms == 5.0  # (8+2)/2
+
+
+class TestFormatRenderBenchmarkForPr:
+    def test_markdown_table(self):
+        b = RenderBenchmark(
+            component_name="TaskList",
+            original_render_count=47,
+            optimized_render_count=3,
+            original_avg_duration_ms=340.0,
+            optimized_avg_duration_ms=12.0,
+        )
+        output = format_render_benchmark_for_pr(b)
+        assert "React Render Performance" in output
+        assert "47" in output
+        assert "3" in output
+        assert "93.6%" in output
+        assert "28.3x" in output
+
+    def test_no_speedup_line_when_not_faster(self):
+        b = RenderBenchmark(
+            component_name="Simple",
+            original_render_count=2,
+            optimized_render_count=2,
+            original_avg_duration_ms=1.0,
+            optimized_avg_duration_ms=1.5,
+        )
+        output = format_render_benchmark_for_pr(b)
+        assert "improved" not in output
+
+
+class TestRenderEfficiencyCritic:
+    def test_accepts_significant_render_reduction(self):
+        assert render_efficiency_critic(
+            original_render_count=50,
+            optimized_render_count=10,
+            original_render_duration=100.0,
+            optimized_render_duration=100.0,
+        ) is True
+
+    def test_rejects_insignificant_reduction(self):
+        assert render_efficiency_critic(
+            original_render_count=10,
+            optimized_render_count=9,
+            original_render_duration=100.0,
+            optimized_render_duration=99.0,
+        ) is False
+
+    def test_accepts_significant_duration_improvement(self):
+        assert render_efficiency_critic(
+            original_render_count=10,
+            optimized_render_count=10,
+            original_render_duration=100.0,
+            optimized_render_duration=10.0,
+        ) is True
+
+    def test_rejects_worse_than_best(self):
+        assert render_efficiency_critic(
+            original_render_count=50,
+            optimized_render_count=10,
+            original_render_duration=100.0,
+            optimized_render_duration=50.0,
+            best_render_count_until_now=5,
+        ) is False
+
+    def test_accepts_better_than_best(self):
+        assert render_efficiency_critic(
+            original_render_count=50,
+            optimized_render_count=3,
+            original_render_duration=100.0,
+            optimized_render_duration=10.0,
+            best_render_count_until_now=5,
+        ) is True
diff --git a/tests/react/test_context.py b/tests/react/test_context.py
new file mode 100644
index 000000000..bae75cb3d
--- /dev/null
+++ b/tests/react/test_context.py
@@ -0,0 +1,157 @@
+"""Tests for React context extraction."""
+
+from __future__ import annotations
+
+from codeflash.languages.javascript.frameworks.react.context import (
+    HookUsage,
+    ReactContext,
+    _extract_child_components,
+    _extract_context_subscriptions,
+    _extract_hook_usages,
+)
+
+
+class TestExtractHookUsages:
+    def test_useState_no_deps(self):
+        source = "const [count, setCount] = useState(0);"
+        hooks = _extract_hook_usages(source)
+        assert len(hooks) == 1
+        assert hooks[0].name == "useState"
+        assert hooks[0].has_dependency_array is False
+
+    def test_useEffect_with_deps(self):
+        source = "useEffect(() => { fetchData(); }, [id, query]);"
+        hooks = _extract_hook_usages(source)
+        assert len(hooks) == 1
+        assert hooks[0].name == "useEffect"
+        assert hooks[0].has_dependency_array is True
+        assert hooks[0].dependency_count == 2
+
+    def test_useEffect_empty_deps(self):
+        source = "useEffect(() => { setup(); }, []);"
+        hooks = _extract_hook_usages(source)
+        assert len(hooks) == 1
+        assert hooks[0].has_dependency_array is True
+        assert hooks[0].dependency_count == 0
+
+    def test_useMemo_with_deps(self):
+        source = "const value = useMemo(() => compute(a, b), [a, b]);"
+        hooks = _extract_hook_usages(source)
+        assert len(hooks) == 1
+        assert hooks[0].name == "useMemo"
+        assert hooks[0].has_dependency_array is True
+        assert hooks[0].dependency_count == 2
+
+    def test_multiple_hooks(self):
+        source = """
+        const [count, setCount] = useState(0);
+        const ref = useRef(null);
+        useEffect(() => {}, [count]);
+        """
+        hooks = _extract_hook_usages(source)
+        names = [h.name for h in hooks]
+        assert "useState" in names
+        assert "useRef" in names
+        assert "useEffect" in names
+
+    def test_custom_hook(self):
+        source = "const debouncedValue = useDebounce(value, 300);"
+        hooks = _extract_hook_usages(source)
+        assert len(hooks) == 1
+        assert hooks[0].name == "useDebounce"
+
+
+class TestExtractChildComponents:
+    def test_finds_child_components(self):
+        source = """
+        return (
+            <div>
+                <Header />
+                <Sidebar items={items} />
+                <MainContent>
+                    <Card title="test" />
+                </MainContent>
+            </div>
+        );
+        """
+        # We pass a dummy analyzer — child extraction uses regex
+        children = _extract_child_components(source, None, source)
+        assert "Header" in children
+        assert "Sidebar" in children
+        assert "MainContent" in children
+        assert "Card" in children
+
+    def test_excludes_react_builtins(self):
+        source = """
+        return (
+            <React.Fragment>
+                <Suspense fallback={<div/>}>
+                    <MyComponent />
+                </Suspense>
+            </React.Fragment>
+        );
+        """
+        children = _extract_child_components(source, None, source)
+        assert "React.Fragment" not in children
+        assert "Fragment" not in children
+        assert "Suspense" not in children
+        assert "MyComponent" in children
+
+    def test_html_elements_excluded(self):
+        source = """
+        return (
+            <div>
+                <span>text</span>
+                <button onClick={fn}>click</button>
+            </div>
+        );
+        """
+        children = _extract_child_components(source, None, source)
+        assert len(children) == 0
+
+
+class TestExtractContextSubscriptions:
+    def test_useContext_call(self):
+        source = "const theme = useContext(ThemeContext);"
+        subs = _extract_context_subscriptions(source)
+        assert subs == ["ThemeContext"]
+
+    def test_multiple_contexts(self):
+        source = """
+        const user = useContext(UserContext);
+        const theme = useContext(ThemeContext);
+        """
+        subs = _extract_context_subscriptions(source)
+        assert "UserContext" in subs
+        assert "ThemeContext" in subs
+
+    def test_no_context(self):
+        source = "const [count, setCount] = useState(0);"
+        subs = _extract_context_subscriptions(source)
+        assert subs == []
+
+
+class TestReactContextPromptString:
+    def test_full_context(self):
+        ctx = ReactContext(
+            props_interface="interface Props { name: string; }",
+            hooks_used=[HookUsage(name="useState", has_dependency_array=False, dependency_count=0)],
+            child_components=["Header", "Footer"],
+            context_subscriptions=["ThemeContext"],
+            is_already_memoized=False,
+        )
+        prompt = ctx.to_prompt_string()
+        assert "Props" in prompt
+        assert "useState" in prompt
+        assert "Header" in prompt
+        assert "ThemeContext" in prompt
+
+    def test_memoized_note(self):
+        ctx = ReactContext(is_already_memoized=True)
+        prompt = ctx.to_prompt_string()
+        assert "React.memo()" in prompt
+
+    def test_empty_context(self):
+        ctx = ReactContext()
+        prompt = ctx.to_prompt_string()
+        assert prompt == ""
diff --git a/tests/react/test_detector.py b/tests/react/test_detector.py
new file mode 100644
index 000000000..fb873c699
--- /dev/null
+++ b/tests/react/test_detector.py
@@ -0,0 +1,158 @@
+"""Tests for framework detection from package.json."""
+
+from __future__ import annotations
+
+import json
+from pathlib import Path
+
+import pytest
+
+from codeflash.languages.javascript.frameworks.detector import (
+    FrameworkInfo,
+    _parse_major_version,
+    _parse_version_string,
+    detect_framework,
+)
+
+
+@pytest.fixture(autouse=True)
+def clear_cache():
+    detect_framework.cache_clear()
+    yield
+    detect_framework.cache_clear()
+
+
+def _write_package_json(tmp_path: Path, data: dict) -> Path:
+    package_json = tmp_path / "package.json"
+    package_json.write_text(json.dumps(data), encoding="utf-8")
+    return tmp_path
+
+
+class TestDetectFramework:
+    def test_react_18_with_testing_library(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "dependencies": {"react": "^18.2.0", "react-dom": "^18.2.0"},
+            "devDependencies": {"@testing-library/react": "^14.0.0", "jest": "^29.0.0"},
+        })
+        info = detect_framework(project)
+        assert info.name == "react"
+        assert info.version == "18.2.0"
+        assert info.react_version_major == 18
+        assert info.has_testing_library is True
+        assert info.has_react_compiler is False
+
+    def test_react_19_detects_compiler(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "dependencies": {"react": "^19.0.0"},
+        })
+        info = detect_framework(project)
+        assert info.name == "react"
+        assert info.react_version_major == 19
+        assert info.has_react_compiler is True
+
+    def test_react_with_babel_compiler_plugin(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "dependencies": {"react": "^18.3.0"},
+            "devDependencies": {"babel-plugin-react-compiler": "^0.1.0"},
+        })
+        info = detect_framework(project)
+        assert info.has_react_compiler is True
+
+    def test_no_react(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "dependencies": {"vue": "^3.0.0"},
+        })
+        info = detect_framework(project)
+        assert info.name == "none"
+        assert info.react_version_major is None
+
+    def test_no_package_json(self, tmp_path):
+        info = detect_framework(tmp_path)
+        assert info.name == "none"
+
+    def test_invalid_json(self, tmp_path):
+        (tmp_path / "package.json").write_text("not json", encoding="utf-8")
+        info = detect_framework(tmp_path)
+        assert info.name == "none"
+
+    def test_react_in_dev_dependencies(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "devDependencies": {"react": "^17.0.2"},
+        })
+        info = detect_framework(project)
+        assert info.name == "react"
+        assert info.react_version_major == 17
+
+    def test_without_testing_library(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "dependencies": {"react": "^18.2.0"},
+        })
+        info = detect_framework(project)
+        assert info.has_testing_library is False
+
+    def test_tilde_version_range(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "dependencies": {"react": "~16.14.0"},
+        })
+        info = detect_framework(project)
+        assert info.version == "16.14.0"
+        assert info.react_version_major == 16
+
+    def test_exact_version(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "dependencies": {"react": "18.2.0"},
+        })
+        info = detect_framework(project)
+        assert info.version == "18.2.0"
+
+    def test_caching(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "dependencies": {"react": "^18.2.0"},
+        })
+        info1 = detect_framework(project)
+        info2 = detect_framework(project)
+        assert info1 is info2
+
+    def test_dev_dependencies_tracked(self, tmp_path):
+        project = _write_package_json(tmp_path, {
+            "dependencies": {"react": "^18.2.0"},
+            "devDependencies": {"jest": "^29.0.0", "typescript": "^5.0.0"},
+        })
+        info = detect_framework(project)
+        assert "jest" in info.dev_dependencies
+        assert "typescript" in info.dev_dependencies
+        assert "react" in info.dev_dependencies
+
+
+class TestParseVersionString:
+    def test_caret_range(self):
+        assert _parse_version_string("^18.2.0") == "18.2.0"
+
+    def test_tilde_range(self):
+        assert _parse_version_string("~17.0.2") == "17.0.2"
+
+    def test_exact(self):
+        assert _parse_version_string("18.2.0") == "18.2.0"
+
+    def test_gte_range(self):
+        assert _parse_version_string(">=16.8.0") == "16.8.0"
+
+    def test_invalid(self):
+        assert _parse_version_string("latest") is None
+
+    def test_empty(self):
+        assert _parse_version_string("") is None
+
+
+class TestParseMajorVersion:
+    def test_standard(self):
+        assert _parse_major_version("18.2.0") == 18
+
+    def test_single_digit(self):
+        assert _parse_major_version("3") == 3
+
+    def test_none(self):
+        assert _parse_major_version(None) is None
+
+    def test_non_numeric(self):
+        assert _parse_major_version("abc") is None
diff --git a/tests/react/test_discovery.py b/tests/react/test_discovery.py
new file mode 100644
index 000000000..b2d7b9ddb
--- /dev/null
+++ b/tests/react/test_discovery.py
@@ -0,0 +1,143 @@
+"""Tests for React component discovery via tree-sitter."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+import pytest
+
+from codeflash.languages.javascript.frameworks.react.discovery import (
+    ComponentType,
+    ReactComponentInfo,
+    _extract_hooks_used,
+    _has_server_directive,
+    find_react_components,
+)
+
+FIXTURES_DIR = Path(__file__).parent / "fixtures"
+
+
+@pytest.fixture
+def analyzer():
+    from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer
+
+    return TreeSitterAnalyzer("tsx")
+
+
+class TestHasServerDirective:
+    def test_use_server_double_quotes(self):
+        assert _has_server_directive('"use server";\n\nexport function foo() {}') is True
+
+    def test_use_server_single_quotes(self):
+        assert _has_server_directive("'use server';\n\nexport function foo() {}") is True
+
+    def test_no_directive(self):
+        assert _has_server_directive("import React from 'react';\n\nexport function Foo() {}") is False
+
+    def test_server_directive_not_at_top(self):
+        assert _has_server_directive('import React from "react";\n"use server";\n') is False
+
+    def test_use_client_is_not_server(self):
+        assert _has_server_directive('"use client";\n\nexport function Foo() {}') is False
+
+    def test_comment_before_directive(self):
+        assert _has_server_directive('// some comment\n"use server";\n') is True
+
+
+class TestExtractHooksUsed:
+    def test_builtin_hooks(self):
+        source = """
+        const [count, setCount] = useState(0);
+        useEffect(() => {}, [count]);
+        const ref = useRef(null);
+        """
+        hooks = _extract_hooks_used(source)
+        assert hooks == ["useState", "useEffect", "useRef"]
+
+    def test_custom_hooks(self):
+        source = "const value = useDebounce(input, 300);"
+        hooks = _extract_hooks_used(source)
+        assert hooks == ["useDebounce"]
+
+    def test_no_hooks(self):
+        source = "const x = 1; const y = 2;"
+        hooks = _extract_hooks_used(source)
+        assert hooks == []
+
+    def test_no_duplicates(self):
+        source = """
+        useState(0);
+        useState(1);
+        """
+        hooks = _extract_hooks_used(source)
+        assert hooks == ["useState"]
+
+
+class TestFindReactComponents:
+    def test_counter_component(self, analyzer):
+        source = FIXTURES_DIR.joinpath("Counter.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "Counter.tsx", analyzer)
+        assert len(components) == 1
+        comp = components[0]
+        assert comp.function_name == "Counter"
+        assert comp.component_type == ComponentType.FUNCTION
+        assert comp.returns_jsx is True
+        assert "useState" in comp.uses_hooks
+
+    def test_hook_detected_as_hook(self, analyzer):
+        source = FIXTURES_DIR.joinpath("useDebounce.ts").read_text(encoding="utf-8")
+        # Need to use .ts analyzer for .ts file
+        ts_analyzer = type(analyzer)("typescript")
+        components = find_react_components(source, FIXTURES_DIR / "useDebounce.ts", ts_analyzer)
+        assert len(components) == 1
+        comp = components[0]
+        assert comp.function_name == "useDebounce"
+        assert comp.component_type == ComponentType.HOOK
+        assert "useState" in comp.uses_hooks
+        assert "useEffect" in comp.uses_hooks
+
+    def test_server_component_skipped(self, analyzer):
+        source = FIXTURES_DIR.joinpath("ServerComponent.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "ServerComponent.tsx", analyzer)
+        assert components == []
+
+    def test_memoized_component_detected(self, analyzer):
+        source = FIXTURES_DIR.joinpath("MemoizedList.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "MemoizedList.tsx", analyzer)
+        memoized_names = [c.function_name for c in components if c.is_memoized]
+        assert len(memoized_names) > 0
+
+    def test_task_list_component(self, analyzer):
+        source = FIXTURES_DIR.joinpath("TaskList.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "TaskList.tsx", analyzer)
+        names = [c.function_name for c in components]
+        assert "TaskList" in names
+
+    def test_data_table_component(self, analyzer):
+        source = FIXTURES_DIR.joinpath("DataTable.tsx").read_text(encoding="utf-8")
+        components = find_react_components(source, FIXTURES_DIR / "DataTable.tsx", analyzer)
+        assert len(components) >= 1
+        comp = [c for c in components if c.function_name == "DataTable"][0]
+        assert comp.returns_jsx is True
+
+    def test_non_component_functions_excluded(self, analyzer):
+        source = """
+        function helperFunction() { return 42; }
+        function anotherHelper(x: number) { return x * 2; }
+        export function MyComponent() { return <div>hello</div>; }
+        """
+        components = find_react_components(source, Path("test.tsx"), analyzer)
+        names = [c.function_name for c in components]
+        assert "helperFunction" not in names
+        assert "anotherHelper" not in names
+        assert "MyComponent" in names
+
+    def test_pascal_case_non_jsx_excluded(self, analyzer):
+        source = """
+        function MyUtil() { return 42; }
+        function MyComponent() { return <div />; }
+        """
+        components = find_react_components(source, Path("test.tsx"), analyzer)
+        names = [c.function_name for c in components]
+        assert "MyUtil" not in names
+        assert "MyComponent" in names
diff --git a/tests/react/test_profiler.py b/tests/react/test_profiler.py
new file mode 100644
index 000000000..f5e728682
--- /dev/null
+++ b/tests/react/test_profiler.py
@@ -0,0 +1,111 @@
+"""Tests for React Profiler instrumentation and marker parsing."""
+
+from __future__ import annotations
+
+import pytest
+
+from codeflash.languages.javascript.frameworks.react.profiler import (
+    MARKER_PREFIX,
+    generate_render_counter_code,
+)
+from codeflash.languages.javascript.parse import (
+    REACT_RENDER_MARKER_PATTERN,
+    RenderProfile,
+    parse_react_render_markers,
+)
+
+
+class TestGenerateRenderCounterCode:
+    def test_generates_counter_variable(self):
+        code = generate_render_counter_code("MyComponent")
+        assert "_codeflash_render_count_MyComponent" in code
+        assert "let " in code
+
+    def test_generates_on_render_callback(self):
+        code = generate_render_counter_code("MyComponent")
+        assert "_codeflashOnRender_MyComponent" in code
+        assert "function " in code
+
+    def test_marker_format_in_output(self):
+        code = generate_render_counter_code("Counter")
+        assert MARKER_PREFIX in code
+        assert "console.log" in code
+
+    def test_special_characters_sanitized(self):
+        code = generate_render_counter_code("My-Component.Inner")
+        assert "_codeflash_render_count_My_Component_Inner" in code
+        assert "_codeflashOnRender_My_Component_Inner" in code
+
+
+class TestReactRenderMarkerPattern:
+    def test_matches_valid_marker(self):
+        marker = "!######REACT_RENDER:Counter:mount:12.5:15.3:1######!"
+        match = REACT_RENDER_MARKER_PATTERN.search(marker)
+        assert match is not None
+        assert match.group(1) == "Counter"
+        assert match.group(2) == "mount"
+        assert match.group(3) == "12.5"
+        assert match.group(4) == "15.3"
+        assert match.group(5) == "1"
+
+    def test_matches_update_phase(self):
+        marker = "!######REACT_RENDER:TaskList:update:3.2:8.1:5######!"
+        match = REACT_RENDER_MARKER_PATTERN.search(marker)
+        assert match is not None
+        assert match.group(2) == "update"
+
+    def test_no_match_for_invalid_marker(self):
+        assert REACT_RENDER_MARKER_PATTERN.search("not a marker") is None
+        assert REACT_RENDER_MARKER_PATTERN.search("!######OTHER:foo:bar######!") is None
+
+
+class TestParseReactRenderMarkers:
+    def test_single_marker(self):
+        stdout = "Some output\n!######REACT_RENDER:Counter:mount:12.5:15.3:1######!\nMore output"
+        profiles = parse_react_render_markers(stdout)
+        assert len(profiles) == 1
+        assert profiles[0] == RenderProfile(
+            component_name="Counter",
+            phase="mount",
+            actual_duration_ms=12.5,
+            base_duration_ms=15.3,
+            render_count=1,
+        )
+
+    def test_multiple_markers(self):
+        stdout = (
+            "!######REACT_RENDER:Counter:mount:12.5:15.3:1######!\n"
+            "!######REACT_RENDER:Counter:update:3.2:15.3:2######!\n"
+            "!######REACT_RENDER:Counter:update:2.8:15.3:3######!\n"
+        )
+        profiles = parse_react_render_markers(stdout)
+        assert len(profiles) == 3
+        assert profiles[0].phase == "mount"
+        assert profiles[1].phase == "update"
+        assert profiles[2].render_count == 3
+
+    def test_no_markers(self):
+        stdout = "Test passed!\nAll good."
+        profiles = parse_react_render_markers(stdout)
+        assert profiles == []
+
+    def test_marker_with_zero_duration(self):
+        stdout = "!######REACT_RENDER:Empty:mount:0:0:1######!"
+        profiles = parse_react_render_markers(stdout)
+        assert len(profiles) == 1
+        assert profiles[0].actual_duration_ms == 0.0
+
+    def test_mixed_output(self):
+        stdout = (
+            "PASS src/Counter.test.tsx\n"
+            "  Counter\n"
+            "    ✓ renders correctly (23ms)\n"
+            "!######REACT_RENDER:Counter:mount:5.4:8.1:1######!\n"
+            "    ✓ increments on click (15ms)\n"
+            "!######REACT_RENDER:Counter:update:2.1:8.1:2######!\n"
+            "Test Suites: 1 passed\n"
+        )
+        profiles = parse_react_render_markers(stdout)
+        assert len(profiles) == 2
+        assert profiles[0].component_name == "Counter"
+        assert profiles[1].render_count == 2
diff --git a/tests/react/test_testgen.py b/tests/react/test_testgen.py
new file mode 100644
index 000000000..16ee49cbb
--- /dev/null
+++ b/tests/react/test_testgen.py
@@ -0,0 +1,64 @@
+"""Tests for React test generation helpers."""
+
+from __future__ import annotations
+
+from codeflash.languages.javascript.frameworks.react.discovery import (
+    ComponentType,
+    ReactComponentInfo,
+)
+from codeflash.languages.javascript.frameworks.react.testgen import (
+    generate_rerender_test_template,
+    post_process_react_tests,
+)
+
+
+class TestGenerateRerenderTestTemplate:
+    def test_basic_template(self):
+        template = generate_rerender_test_template("Counter")
+        assert "Counter" in template
+        assert "render" in template
+        assert "rerender" in template
+        assert "REACT_RENDER" in template
+
+    def test_includes_import(self):
+        template = generate_rerender_test_template("MyComponent")
+        assert "@testing-library/react" in template
+
+    def test_includes_render_count_check(self):
+        template = generate_rerender_test_template("MyComponent")
+        assert "renderCount" in template
+        assert "expect(renderCount).toBe(1)" in template
+
+    def test_props_interface_hint(self):
+        template = generate_rerender_test_template("MyComponent", "MyComponentProps")
+        assert "fill in props matching interface" in template
+
+
+class TestPostProcessReactTests:
+    def test_adds_testing_library_import(self):
+        source = "describe('MyComp', () => { render(<MyComp />); });"
+        result = post_process_react_tests(source, _make_info())
+        assert "@testing-library/react" in result
+
+    def test_skips_if_already_imported(self):
+        source = "import { render } from '@testing-library/react';\ndescribe('MyComp', () => {});"
+        result = post_process_react_tests(source, _make_info())
+        assert result.count("@testing-library/react") == 1
+
+    def test_adds_user_event_for_click(self):
+        source = "import { render } from '@testing-library/react';\ntest('clicks button', () => { click(button); });"
+        result = post_process_react_tests(source, _make_info())
+        assert "@testing-library/user-event" in result
+
+    def test_no_user_event_if_no_interaction(self):
+        source = "import { render } from '@testing-library/react';\ntest('renders', () => { render(<Foo />); });"
+        result = post_process_react_tests(source, _make_info())
+        assert "@testing-library/user-event" not in result
+
+
+def _make_info() -> ReactComponentInfo:
+    return ReactComponentInfo(
+        function_name="MyComp",
+        component_type=ComponentType.FUNCTION,
+        returns_jsx=True,
+    )
diff --git a/uv.lock b/uv.lock
index 05b79c606..b5222447b 100644
--- a/uv.lock
+++ b/uv.lock
@@ -605,7 +605,6 @@ tests = [
 
 [[package]]
 name = "codeflash-benchmark"
-version = "0.3.0"
 source = { editable = "codeflash-benchmark" }
 dependencies = [
     { name = "pytest", version = "8.4.2", source = { registry = "https://pypi.org/simple" }, marker = "python_full_version < '3.10'" },