⚡️ Speed up function _extract_child_components by 68% in PR #1571 (codeflash/optimize-pr1561-2026-02-20T03.56.09)

[codeflash-ai]

⚡️ This pull request contains optimizations for PR #1571

If you approve this dependent PR, these changes will be merged into the original PR branch codeflash/optimize-pr1561-2026-02-20T03.56.09.

This PR will be automatically closed if the original PR is merged.

---

📄 68% (0.68x) speedup for _extract_child_components in codeflash/languages/javascript/frameworks/react/context.py

⏱️ Runtime : 1.67 milliseconds → 993 microseconds (best of 250 runs)

📝 Explanation and details

This optimization achieves a 67% runtime improvement (from 1.67ms to 993μs) by replacing an inefficient Python-level iteration pattern with C-optimized regex operations and faster data structures.

Key Optimizations

1. Batch Regex Extraction with findall()

• Original: Used finditer() to create match objects, then called match.group(1) for each match individually
• Optimized: Uses findall() to extract all component names in a single C-optimized operation
• Impact: Line profiler shows the original spent 34.6% of time in finditer() iteration plus 24.5% in match.group(1) calls (59.1% total). The optimized version completes name extraction in just 41.6% of total time with a single findall() call.

2. Frozenset for Built-in Component Checks

• Original: Created a tuple on every function call for membership testing: name not in ("React.Fragment", "Fragment", ...)
• Optimized: Uses a module-level frozenset that's created once and reused across all calls
• Impact: Frozenset membership tests are O(1) and faster than tuple scans. This optimization particularly benefits the large-scale tests, where the test_many_duplicate_components shows 94.4% speedup (328μs → 169μs).

3. Set Comprehension for Filtering

• Original: Manually built a set with children.add(name) in a loop
• Optimized: Uses a set comprehension {name for name in names if name not in _BUILT_IN_COMPONENTS}
• Impact: Set comprehensions execute in optimized C code and avoid repeated Python-level method calls

Performance Characteristics

Based on the annotated tests:

• Small inputs (single components): 31-41% faster
• Medium inputs (10-20 components): 35-47% faster
• Large-scale workloads (100-1000 components): 42-98% faster, with the most dramatic improvements when processing many duplicates or built-in components

The optimization scales particularly well with input size. Tests like test_many_duplicate_components (1000 instances) show 94.4% speedup, and test_performance_very_long_source shows 98.8% speedup, demonstrating that the reduced Python-level overhead compounds significantly at scale.

Impact on Calling Contexts

Looking at the function references in tests/react/test_context.py, this function is used to analyze React component hierarchies and extract child component relationships. The 67% speedup means:

• React codebase analysis becomes substantially faster when processing files with many JSX components
• Large React projects with hundreds of components benefit most from the scaling improvements
• The function maintains identical behavior (same deduplication, sorting, and exclusion logic), so all existing call sites work unchanged

✅ Correctness verification report:

Test	Status
⚙️ Existing Unit Tests	🔘 None Found
🌀 Generated Regression Tests	✅ 48 Passed
⏪ Replay Tests	🔘 None Found
🔎 Concolic Coverage Tests	🔘 None Found
📊 Tests Coverage	100.0%

🌀 Click to see Generated Regression Tests

import pytest  # used for our unit tests
from codeflash.languages.javascript.frameworks.react.context import \
    _extract_child_components
# Import the real TreeSitterAnalyzer class (used only to satisfy the function signature).
from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer

def test_single_child_component():
    # Create a real TreeSitterAnalyzer instance. Passing None is acceptable here
    # because the analyzer parameter is unused by _extract_child_components.
    analyzer = TreeSitterAnalyzer(None)
    # Simple JSX with a single capitalized component tag should be detected.
    src = "<Button>Click me</Button>"
    # full_source argument is not used by the function; pass an empty string.
    codeflash_output = _extract_child_components(src, analyzer, ""); result = codeflash_output # 4.35μs -> 3.32μs (31.1% faster)

def test_multiple_components_dedup_and_sorted():
    analyzer = TreeSitterAnalyzer(None)
    # Include multiple components, with duplicates and out-of-order appearance.
    src = "<Z/><A></A><M/><A></A><Z/>"
    # The function should deduplicate and return a sorted list.
    codeflash_output = _extract_child_components(src, analyzer, ""); result = codeflash_output # 6.32μs -> 4.65μs (36.0% faster)

def test_ignore_react_builtins_and_lowercase_tags():
    analyzer = TreeSitterAnalyzer(None)
    # Include tags that should be ignored (built-ins and lowercase HTML tags),
    # and one valid child component.
    src = (
        "<div></div>"  # lowercase -> should be ignored
        "<React.Fragment><span/></React.Fragment>"  # React.Fragment -> ignored
        "<Fragment></Fragment>"  # Fragment -> ignored
        "<Suspense></Suspense>"  # Suspense -> ignored
        "<React.Suspense></React.Suspense>"  # React.Suspense -> ignored
        "<ChildComp prop={true} />"  # valid component -> should be captured
    )
    codeflash_output = _extract_child_components(src, analyzer, ""); result = codeflash_output # 6.67μs -> 4.92μs (35.7% faster)

def test_empty_source_returns_empty_list():
    analyzer = TreeSitterAnalyzer(None)
    # Empty component source -> no matches
    codeflash_output = _extract_child_components("", analyzer, "") # 2.28μs -> 1.73μs (31.8% faster)

def test_tags_with_attributes_self_closing_numbers_and_namespace():
    analyzer = TreeSitterAnalyzer(None)
    # Namespace and dotted names are allowed by the regex; numbers too.
    # Also include a tag with underscore which should NOT match (underscore not allowed).
    src = (
        "<Namespace.Component someAttr='x'/>"  # should capture "Namespace.Component"
        "<Comp123 disabled/>"  # should capture "Comp123"
        "<My_Component></My_Component>"  # underscore not allowed by regex -> should NOT match
        "<lowercaseTag></lowercaseTag>"  # lowercase -> not a component
    )
    codeflash_output = _extract_child_components(src, analyzer, ""); result = codeflash_output # 6.09μs -> 4.33μs (40.8% faster)

def test_no_match_for_names_starting_with_lowercase():
    analyzer = TreeSitterAnalyzer(None)
    # Tags that start with lowercase should not be treated as components.
    src = "<myComp></myComp><div/><span/>"
    codeflash_output = _extract_child_components(src, analyzer, "") # 3.32μs -> 2.42μs (37.3% faster)

def test_large_number_of_tags_deduplicated_and_sorted():
    analyzer = TreeSitterAnalyzer(None)
    # Create 1000 tags by repeating 500 distinct component names twice.
    unique_count = 500
    names = [f"Comp{i}" for i in range(unique_count)]
    # Build source by adding each name twice and in shuffled order relative to blocks
    parts = []
    for name in names:
        parts.append(f"<{name}/>")  # first occurrence
    for name in reversed(names):
        parts.append(f"<{name}/>")  # second occurrence (reverse order to force sorting)
    src = "".join(parts)
    codeflash_output = _extract_child_components(src, analyzer, ""); result = codeflash_output # 389μs -> 264μs (47.4% faster)
    # The result should contain exactly the unique names sorted lexicographically.
    expected = sorted(names)
# codeflash_output is used to check that the output of the original code is the same as that of the optimized code.

import pytest
from codeflash.languages.javascript.frameworks.react.context import \
    _extract_child_components
from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer

class TestExtractChildComponentsBasic:
    """Basic tests for _extract_child_components - verify fundamental functionality."""

    def test_single_component_extraction(self):
        """Test extracting a single child component from JSX."""
        source = "<Button />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 4.96μs -> 3.52μs (41.0% faster)

    def test_multiple_components_extraction(self):
        """Test extracting multiple different child components."""
        source = "<Button /><Card /><Dialog />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.70μs -> 4.07μs (40.1% faster)

    def test_duplicate_components_deduplicated(self):
        """Test that duplicate component references are deduplicated."""
        source = "<Button /><Button /><Button />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.65μs -> 3.86μs (46.5% faster)

    def test_fragment_excluded(self):
        """Test that React.Fragment is excluded from results."""
        source = "<React.Fragment><Button /></React.Fragment>"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.26μs -> 3.77μs (39.6% faster)

    def test_fragment_short_form_excluded(self):
        """Test that Fragment (short form) is excluded from results."""
        source = "<Fragment><Button /></Fragment>"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.03μs -> 3.65μs (37.9% faster)

    def test_suspense_excluded(self):
        """Test that Suspense component is excluded from results."""
        source = "<Suspense fallback={<Loader />}><Button /></Suspense>"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.91μs -> 4.17μs (41.8% faster)

    def test_react_suspense_excluded(self):
        """Test that React.Suspense is excluded from results."""
        source = "<React.Suspense fallback={<Loader />}><Button /></React.Suspense>"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.68μs -> 4.01μs (41.8% faster)

    def test_capitalized_component_names_only(self):
        """Test that only capitalized component names are recognized (not HTML tags)."""
        source = "<div><Button /><span><Card /></span></div>"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.27μs -> 3.91μs (34.9% faster)

    def test_nested_components(self):
        """Test extracting components from nested JSX."""
        source = "<Outer><Inner><Leaf /></Inner></Outer>"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.63μs -> 3.95μs (42.7% faster)

    def test_components_with_props(self):
        """Test extracting components that have props."""
        source = '<Button onClick={handleClick} disabled={true} /><Card title="Test" />'
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 4.82μs -> 3.58μs (34.7% faster)

    def test_components_with_children_content(self):
        """Test extracting components that have text content."""
        source = "<Button>Click me</Button><Card>Content here</Card>"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.15μs -> 3.71μs (38.9% faster)

class TestExtractChildComponentsEdgeCases:
    """Edge case tests for _extract_child_components - extreme and unusual conditions."""

    def test_empty_string(self):
        """Test with empty component source."""
        source = ""
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 2.44μs -> 1.78μs (36.5% faster)

    def test_no_components(self):
        """Test source with no JSX components."""
        source = "const x = 5;"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 2.35μs -> 1.77μs (32.8% faster)

    def test_only_html_tags(self):
        """Test source with only HTML tags (no React components)."""
        source = "<div><span><p>Hello</p></span></div>"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 3.21μs -> 2.43μs (31.7% faster)

    def test_single_letter_component(self):
        """Test component with single capital letter name."""
        source = "<A /><B /><C />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.32μs -> 3.91μs (36.1% faster)

    def test_component_with_numbers(self):
        """Test component names that include numbers."""
        source = "<Button1 /><Card2 /><Component123 />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.66μs -> 3.97μs (42.6% faster)

    def test_component_with_dots(self):
        """Test namespaced component names with dots."""
        source = "<UI.Button /><Form.Input /><Layout.Container />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.56μs -> 3.99μs (39.5% faster)

    def test_self_closing_tags(self):
        """Test self-closing component tags."""
        source = "<Button /> <Card /> <Dialog />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.47μs -> 3.87μs (41.4% faster)

    def test_components_with_newlines(self):
        """Test components separated by newlines."""
        source = """
        <Button />
        <Card />
        <Dialog />
        """
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.43μs -> 3.93μs (38.3% faster)

    def test_components_with_extra_spaces(self):
        """Test components with extra spaces in opening tag."""
        source = "<Button   /><Card  /><Dialog   />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.30μs -> 3.83μs (38.5% faster)

    def test_lowercase_starting_component_ignored(self):
        """Test that lowercase component names are ignored (they're HTML tags)."""
        source = "<button /><customElement /><myComponent />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 3.23μs -> 2.47μs (30.4% faster)

    def test_all_react_builtins_excluded(self):
        """Test that all React built-in components are properly excluded."""
        source = "<React.Fragment /><Fragment /><Suspense /><React.Suspense /><Button />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 6.31μs -> 4.53μs (39.4% faster)

    def test_mixed_builtin_and_custom_components(self):
        """Test a mix of React built-ins and custom components."""
        source = """
        <Suspense fallback={<Spinner />}>
            <React.Fragment>
                <Header />
                <Fragment>
                    <Content />
                </Fragment>
                <Footer />
            </React.Fragment>
        </Suspense>
        """
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 7.58μs -> 5.39μs (40.7% faster)

    def test_whitespace_only_source(self):
        """Test source containing only whitespace."""
        source = "   \n\n\t\t  "
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 2.42μs -> 1.76μs (37.5% faster)

    def test_special_characters_in_props(self):
        """Test that special characters in props don't break parsing."""
        source = '<Button onClick={() => alert("test!")} /><Card data-test="value<>" />'
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.45μs -> 3.91μs (39.5% faster)

    def test_comment_within_jsx(self):
        """Test JSX with comments inside."""
        source = """
        <Button />
        {/* This is a comment */}
        <Card />
        """
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.28μs -> 3.60μs (46.8% faster)

class TestExtractChildComponentsLargeScale:
    """Large-scale tests for _extract_child_components - performance and scalability."""

    def test_many_unique_components(self):
        """Test extracting a large number of unique components."""
        # Generate 100 unique component references
        components = [f"Component{i}" for i in range(100)]
        source = "".join(f"<{comp} />" for comp in components)
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 49.2μs -> 34.6μs (42.1% faster)
        for comp in components:
            pass

    def test_many_duplicate_components(self):
        """Test with many duplicates of same components."""
        # 1000 instances of 5 unique components
        source = "".join(f"<Button /><Card /><Dialog /><Modal /><Drawer />" for _ in range(200))
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 328μs -> 169μs (94.4% faster)

    def test_deeply_nested_components(self):
        """Test extracting components from deeply nested JSX."""
        # Create 50 levels of nesting
        source = "<A>" * 50 + "<Button />" + "</A>" * 50
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 18.9μs -> 11.2μs (69.3% faster)

    def test_large_component_with_many_props(self):
        """Test component with very large prop object."""
        # Create a component with 100 props
        props = " ".join(f'prop{i}="value{i}"' for i in range(100))
        source = f"<Button {props} /><Card />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 5.44μs -> 4.11μs (32.4% faster)

    def test_many_components_with_dots(self):
        """Test extracting many dotted/namespaced components."""
        # Create 50 namespaced components
        source = "".join(f"<UI.Component{i} />" for i in range(50))
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 26.4μs -> 17.9μs (47.4% faster)
        for i in range(50):
            pass

    def test_performance_very_long_source(self):
        """Test performance with very long source code."""
        # Create 1000 component references with duplicates and built-ins
        source = ""
        for i in range(1000):
            if i % 3 == 0:
                source += "<Button />"
            elif i % 3 == 1:
                source += "<Card />"
            else:
                source += "<Suspense />"
        
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 296μs -> 149μs (98.8% faster)

    def test_mixed_component_scales(self):
        """Test with realistic mix of common components at scale."""
        # Create 500 component instances mixing common patterns
        components = ["Button", "Card", "Dialog", "Modal", "Header", "Footer", "Sidebar", "Main"]
        source = ""
        for i in range(500):
            comp = components[i % len(components)]
            source += f"<{comp} />"
        
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 159μs -> 81.1μs (96.4% faster)
        for comp in components:
            pass

    def test_many_builtins_mixed_with_custom(self):
        """Test performance with many built-in exclusions mixed with custom components."""
        # Create 500 references: mix of built-ins and custom
        source = ""
        for i in range(500):
            if i % 5 == 0:
                source += "<React.Fragment />"
            elif i % 5 == 1:
                source += "<Fragment />"
            elif i % 5 == 2:
                source += "<Suspense />"
            elif i % 5 == 3:
                source += "<React.Suspense />"
            else:
                source += f"<Custom{i} />"
        
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 163μs -> 98.1μs (66.7% faster)

    def test_result_always_sorted(self):
        """Test that results are always sorted, regardless of input order."""
        # Create unsorted component references
        source = "<Zebra /><Apple /><Monkey /><Banana /><Car /><Dog />"
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 7.18μs -> 5.16μs (39.2% faster)

    def test_large_mixed_with_numbers_and_dots(self):
        """Test large scale with complex component names."""
        # Create 100 components with dots and numbers
        source = ""
        for i in range(100):
            source += f"<UI.Component{i} />"
        
        analyzer = TreeSitterAnalyzer("javascript")
        codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 50.9μs -> 34.9μs (45.6% faster)

    def test_return_type_is_list(self):
        """Test that return type is always a list."""
        test_cases = [
            "",
            "<Button />",
            "<Button /><Card />",
            "<React.Fragment />",
            "<Button /><Card /><Dialog />",
        ]
        analyzer = TreeSitterAnalyzer("javascript")
        
        for source in test_cases:
            codeflash_output = _extract_child_components(source, analyzer, source); result = codeflash_output # 11.7μs -> 8.80μs (32.4% faster)
            # Verify all elements are strings
            for elem in result:
                pass
# codeflash_output is used to check that the output of the original code is the same as that of the optimized code.

To edit these changes git checkout codeflash/optimize-pr1571-2026-02-20T04.10.37 and push.

[claude]

PR Review Summary

Prek Checks

✅ All checks passed — no linting or formatting issues found.

Mypy

✅ No type errors found in changed files.

Code Review

✅ No critical issues found.

The optimization is clean and functionally equivalent to the original:

• Moves built-in component names from a per-call tuple to a module-level frozenset for O(1) membership testing
• Replaces finditer() + .group(1) with a single findall() call
• Uses a set comprehension instead of a manual set.add() loop

All three changes preserve identical behavior (same deduplication, sorting, and exclusion logic).

Test Coverage

File	Stmts	Miss	Coverage
codeflash/languages/javascript/frameworks/react/context.py	117	1	99%

This file is new (doesn't exist on main), so no baseline comparison is applicable. 99% coverage is well above the 75% threshold for new files.

Note: 8 pre-existing test failures in tests/test_tracer.py (unrelated to this PR).

---

Last updated: 2026-02-20