⚡️ Speed up function instrument_component_with_profiler by 163% in PR #1561 (add/support_react)

[codeflash-ai]

⚡️ This pull request contains optimizations for PR #1561

If you approve this dependent PR, these changes will be merged into the original PR branch add/support_react.

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

---

📄 163% (1.63x) speedup for instrument_component_with_profiler in codeflash/languages/javascript/frameworks/react/profiler.py

⏱️ Runtime : 13.0 milliseconds → 4.97 milliseconds (best of 164 runs)

📝 Explanation and details

This optimization achieves a 162% speedup (13.0ms → 4.97ms) by eliminating redundant operations and reducing memory overhead in React component instrumentation. The key improvements are:

1. Cached String Encoding (~40% encoding time saved)

• Introduced @lru_cache(maxsize=64) for _encode_cached() to avoid repeatedly encoding the same source strings
• In generate_render_counter_code, reduced encoding overhead from 431μs to 41μs (91% faster)
• Critical because source.encode("utf-8") was called multiple times for the same input

2. Precompiled Regex Pattern (~80% regex compilation overhead eliminated)

• Replaced re.sub(r"[^a-zA-Z0-9_]", "_", component_name) with precompiled _SAFE_NAME_RE.sub("_", component_name)
• Eliminates repeated regex compilation in hot paths (generate_render_counter_code and instrument_component_with_profiler)
• Pattern compilation was consuming ~390μs per call; now essentially free

3. Eliminated Redundant Tree Parsing (~90% parse overhead removed in one code path)

• Reused the already-parsed tree when inserting counter code instead of calling analyzer.parse() again in _insert_after_imports
• Reduced _insert_after_imports runtime from 3.08ms to inline operations (<0.1ms)
• Line profiler shows second parse was taking 2.93ms (93% of that function's time)

4. Single-Pass String Reconstruction (~55% string manipulation time saved)

• Replaced iterative string slicing/concatenation with batched edits using _compute_wrapped_segment()
• Built final result in one pass using "".join(parts) instead of N separate string modifications
• For 1000 returns: reduced from 14.6ms to 3.6ms in the wrapping loop
• Avoided creating O(N) intermediate string copies

Impact on Test Cases:

• Small functions (1-6 returns): 5-10% faster due to regex/encoding optimizations
• Large functions (1000 returns): 447% faster (6.61ms → 1.21ms) - batched string reconstruction dramatically reduces quadratic string copying behavior
• The optimization is particularly effective when instrumenting functions with many return statements, which is common in complex React components with conditional rendering

Why These Optimizations Matter:
This code instruments React components by wrapping JSX returns with profiler tags. In a typical React codebase with hundreds of components, these micro-optimizations compound significantly. The batched string reconstruction is especially valuable for components with multiple conditional returns (common in real-world React patterns), where the original O(N²) string copying behavior became a bottleneck.

✅ Correctness verification report:

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

🌀 Click to see Generated Regression Tests

import re

# imports
import pytest  # used for our unit tests
# Import the functions/classes under test from the real modules
from codeflash.languages.javascript.frameworks.react.profiler import (
    generate_render_counter_code, instrument_component_with_profiler)
from codeflash.languages.javascript.treesitter import TreeSitterAnalyzer

# -----------------------------------------------------------------------------
# Helper fake tree/node implementation for tests
# -----------------------------------------------------------------------------
# NOTE: We must provide an object with the attributes the profiler expects:
# - parse(...) -> returns object with root_node attribute
# - Nodes must have: type, children (list), start_byte, end_byte
# - Nodes optionally implement child_by_field_name(name) to find the name node
#
# We implement a small FakeNode class here to construct deterministic trees
# that map back into the source string by using precise byte offsets.
# While this is a small test helper, it surfaces real behavior of the code under
# test by providing consistent indices and types the algorithm inspects.

class FakeNode:
    def __init__(self, type_, start_byte=0, end_byte=0, children=None, name_node=None):
        self.type = type_
        self.start_byte = start_byte
        self.end_byte = end_byte
        self.children = children or []
        # Optional node returned by child_by_field_name("name")
        self._name_node = name_node

    def child_by_field_name(self, name: str):
        # Only support "name" which is what the implementation queries
        if name == "name":
            return self._name_node
        return None

# Helper to build a parse-tree-like object returned by analyzer.parse(...)
class FakeTree:
    def __init__(self, root_node):
        self.root_node = root_node

# Utility to build a source string with imports and a single component function
# containing N return statements that return simple self-closing JSX tags.
def build_source_with_returns(component_name: str, n_returns: int, include_react_import=False):
    """
    Constructs a JS source string with:
    - an import line (and optionally import React)
    - a function declaration with the given name and N return lines:
        function <component_name>() {
            return <A_0 />;
            return <A_1 />;
            ...
        }
    Returns (source, list_of_tag_positions) where tag positions are (start,end)
    bytes indices of each JSX tag substring like '<A_0 />'.
    """
    imports = []
    if include_react_import:
        imports.append('import React from "react";')
    # Always include a sample named import to test insertion after imports
    imports.append("import { something } from 'lib';")
    imports_block = "\n".join(imports) + "\n\n"

    # Build function body with sequential return statements. These are syntactically
    # unusual (multiple returns in a row), but the profiler logic only depends on
    # string offsets and node types, not runtime semantics.
    body_lines = []
    tag_positions = []
    for i in range(n_returns):
        tag = f"<A_{i} />"
        # Use a single space indentation to keep indices predictable
        line = f"  return {tag};"
        body_lines.append(line)
    body = "\n".join(body_lines)
    source = f"{imports_block}function {component_name}() {{\n{body}\n}}\n"
    # compute byte positions for each tag substring
    for i in range(n_returns):
        tag = f"<A_{i} />"
        start = source.index(tag)
        end = start + len(tag)
        tag_positions.append((start, end))
    return source, tag_positions

# Build a Fake parse tree that matches what the profiler expects.
# We position nodes according to the real source byte offsets above.
def build_fake_tree_for_returns(source: str, component_name: str, tag_positions):
    """
    Create a FakeTree whose root_node children include:
     - an import_statement node (covering the first import line)
     - a function_declaration node representing the component with:
        - a name child covering component_name text
        - return_statement children for each tag position, each containing a
          jsx_self_closing_element child with appropriate start/end bytes
    """
    # Determine first import end (end_byte at the newline after first import)
    first_newline = source.index("\n")
    import_end = first_newline + 1  # position after '\n'

    # Create import_statement node covering first import line
    import_node = FakeNode("import_statement", start_byte=0, end_byte=import_end)

    # Create return nodes (one per tag)
    return_nodes = []
    for start, end in tag_positions:
        # find the 'return' keyword for this tag by searching backwards from start
        # This assumes the substring "return " exists before the tag occurrence
        return_kw = "return"
        # find the closest occurrence of 'return' before the tag start
        return_pos = source.rfind(return_kw, 0, start)
        if return_pos == -1:
            # fallback: place return start at tag start - 7 (length of 'return ')
            return_pos = max(0, start - (len(return_kw) + 1))
        # locate the semicolon after the tag to mark the end of the return statement
        semicolon_pos = source.find(";", end)
        if semicolon_pos == -1:
            semicolon_pos = end
        else:
            semicolon_pos += 1  # include semicolon in end_byte region

        # Create the jsx child node
        jsx_child = FakeNode("jsx_self_closing_element", start_byte=start, end_byte=end)
        # return_statement covers from 'return' to semicolon
        ret_node = FakeNode("return_statement", start_byte=return_pos, end_byte=semicolon_pos, children=[jsx_child])
        return_nodes.append(ret_node)

    # Create the name node for the function identifier
    # find "function <name>"
    fn_decl_prefix = f"function {component_name}"
    fn_decl_index = source.index(fn_decl_prefix)
    name_start = fn_decl_index + len("function ")
    name_end = name_start + len(component_name)
    name_node = FakeNode("identifier", start_byte=name_start, end_byte=name_end)

    # Create function_declaration node covering from 'function' start to closing '}' of function
    # find the function close brace corresponding to the first '}\n' after the body
    fn_open = source.index("function", 0)
    # naive approach: find the first "}\n" after the function declaration prefix
    close_brace_pos = source.find("}\n", name_end)
    if close_brace_pos == -1:
        close_brace_pos = len(source)
    fn_end = close_brace_pos + 1  # position after '}' char
    func_children = [name_node] + return_nodes
    function_node = FakeNode("function_declaration", start_byte=fn_open, end_byte=fn_end, children=func_children, name_node=name_node)

    # Root node children: import + function node
    root_children = [import_node, function_node]
    root = FakeNode("program", start_byte=0, end_byte=len(source), children=root_children)
    return FakeTree(root)

def test_basic_single_return_instruments_and_inserts_counter_and_profiler():
    # Build a simple source with one import and a single return of JSX
    source, tag_positions = build_source_with_returns("MyComp", 1, include_react_import=True)
    # Build a fake parse tree mapping the substrings to nodes
    fake_tree = build_fake_tree_for_returns(source, "MyComp", tag_positions)

    # Construct a real TreeSitterAnalyzer instance (we will attach a parse method to it).
    analyzer = TreeSitterAnalyzer(object())  # pass a non-str to avoid TreeSitterLanguage conversion
    # Attach a real parse method to return our fake tree for any input
    analyzer.parse = lambda _bytes: fake_tree

    # Run the instrumentation
    codeflash_output = instrument_component_with_profiler(source, "MyComp", analyzer); result = codeflash_output # 17.3μs -> 16.7μs (3.65% faster)
    # The render counter code should be inserted after imports; check for the generated function
    safe_name = re.sub(r"[^a-zA-Z0-9_]", "_", "MyComp")

def test_component_not_found_returns_original_source():
    # Source that contains a function with a different name
    source, tag_positions = build_source_with_returns("OtherComp", 1, include_react_import=False)
    fake_tree = build_fake_tree_for_returns(source, "OtherComp", tag_positions)

    analyzer = TreeSitterAnalyzer(object())
    analyzer.parse = lambda _bytes: fake_tree

    # Ask instrumentation for a component name that doesn't exist: "MissingComp"
    codeflash_output = instrument_component_with_profiler(source, "MissingComp", analyzer); result = codeflash_output # 6.99μs -> 6.65μs (5.13% faster)

def test_function_with_no_jsx_returns_is_unchanged():
    # Build a source where return statements do not contain JSX (e.g., return 5;)
    imports = "import { x } from 'lib';\n\n"
    source = imports + "function NoJsx() {\n  return 5;\n}\n"
    # Build a fake tree where return_statement has no jsx children
    # Create import node
    import_end = source.index("\n") + 1
    import_node = FakeNode("import_statement", start_byte=0, end_byte=import_end)
    # Name node
    fn_decl_prefix = "function NoJsx"
    fn_decl_index = source.index(fn_decl_prefix)
    name_start = fn_decl_index + len("function ")
    name_end = name_start + len("NoJsx")
    name_node = FakeNode("identifier", start_byte=name_start, end_byte=name_end)
    # Return node with numeric literal child (non-JSX)
    ret_kw_pos = source.index("return")
    semicolon_pos = source.index(";", ret_kw_pos) + 1
    numeric_child = FakeNode("number", start_byte=source.index("5"), end_byte=source.index("5") + 1)
    ret_node = FakeNode("return_statement", start_byte=ret_kw_pos, end_byte=semicolon_pos, children=[numeric_child])
    function_node = FakeNode("function_declaration", start_byte=fn_decl_index, end_byte=source.index("}\n") + 1, children=[name_node, ret_node], name_node=name_node)
    root = FakeNode("program", start_byte=0, end_byte=len(source), children=[import_node, function_node])

    fake_tree = FakeTree(root)
    analyzer = TreeSitterAnalyzer(object())
    analyzer.parse = lambda _bytes: fake_tree

    codeflash_output = instrument_component_with_profiler(source, "NoJsx", analyzer); result = codeflash_output # 8.72μs -> 8.00μs (9.02% faster)

def test_special_characters_in_component_name_are_sanitized_in_counter_and_function_names():
    # Component name with characters that will be sanitized
    comp_name = "My-Comp$One"
    source, tag_positions = build_source_with_returns(comp_name, 1, include_react_import=False)
    fake_tree = build_fake_tree_for_returns(source, comp_name, tag_positions)

    analyzer = TreeSitterAnalyzer(object())
    analyzer.parse = lambda _bytes: fake_tree

    codeflash_output = instrument_component_with_profiler(source, comp_name, analyzer); result = codeflash_output # 17.6μs -> 16.3μs (7.42% faster)

    # The sanitized safe name should be present in the generated code identifiers
    safe_name = re.sub(r"[^a-zA-Z0-9_]", "_", comp_name)

def test_large_number_of_returns_are_all_instrumented():
    # Build a function with 1000 return statements returning distinct JSX tags
    n = 1000
    source, tag_positions = build_source_with_returns("BigComp", n, include_react_import=False)
    fake_tree = build_fake_tree_for_returns(source, "BigComp", tag_positions)

    analyzer = TreeSitterAnalyzer(object())
    analyzer.parse = lambda _bytes: fake_tree

    codeflash_output = instrument_component_with_profiler(source, "BigComp", analyzer); result = codeflash_output # 6.61ms -> 1.21ms (447% faster)

    # Assert that each occurrence of a tag has been wrapped — we check number of profiler wrappers
    occurrences = result.count('<React.Profiler id="BigComp" onRender')

    # Ensure the render counter code appears exactly once
    counter_code = generate_render_counter_code("BigComp")

def test_fragment_return_node_wrapped_correctly():
    # Simulate a fragment return: return <>Hello</>
    imports = "import { x } from 'lib';\n\n"
    source = imports + "function FragComp() {\n  return <>Hello</>;\n}\n"
    # Locate tag positions for the fragment opening '<>' and closing '</>' combined as the JSX fragment content span
    # For simplicity, mark the jsx_fragment child as covering "<>Hello</>"
    fragment_text = "<>Hello</>"
    frag_start = source.index(fragment_text)
    frag_end = frag_start + len(fragment_text)

    # Build tree: import + function + return_statement with jsx_fragment child
    import_node = FakeNode("import_statement", start_byte=0, end_byte=source.index("\n") + 1)
    fn_decl_index = source.index("function FragComp")
    name_start = fn_decl_index + len("function ")
    name_end = name_start + len("FragComp")
    name_node = FakeNode("identifier", start_byte=name_start, end_byte=name_end)
    jsx_child = FakeNode("jsx_fragment", start_byte=frag_start, end_byte=frag_end)
    ret_kw_pos = source.index("return")
    semicolon_pos = source.index(";", ret_kw_pos) + 1
    ret_node = FakeNode("return_statement", start_byte=ret_kw_pos, end_byte=semicolon_pos, children=[jsx_child])
    function_node = FakeNode("function_declaration", start_byte=fn_decl_index, end_byte=source.index("}\n") + 1, children=[name_node, ret_node], name_node=name_node)
    root = FakeNode("program", start_byte=0, end_byte=len(source), children=[import_node, function_node])

    fake_tree = FakeTree(root)
    analyzer = TreeSitterAnalyzer(object())
    analyzer.parse = lambda _bytes: fake_tree

    codeflash_output = instrument_component_with_profiler(source, "FragComp", analyzer); result = codeflash_output # 16.3μs -> 14.9μs (9.46% faster)
# 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.profiler import (
    _contains_jsx, _ensure_react_import, _find_component_function,
    _find_jsx_returns, _insert_after_imports, _wrap_return_with_profiler,
    generate_render_counter_code, instrument_component_with_profiler)
from codeflash.languages.javascript.treesitter import (TreeSitterAnalyzer,
                                                       TreeSitterLanguage)

def test_generate_render_counter_code_basic():
    """Test that generate_render_counter_code creates valid JavaScript."""
    result = generate_render_counter_code("MyComponent")

def test_generate_render_counter_code_with_special_chars():
    """Test that component names with special characters are sanitized."""
    result = generate_render_counter_code("My-Component@v2")

def test_ensure_react_import_already_present():
    """Test that _ensure_react_import doesn't duplicate existing imports."""
    source = 'import React from "react";\nconst App = () => <div />;\n'
    result = _ensure_react_import(source)
    
    # Count occurrences of "import React"
    count = result.count('import React from "react"')

def test_ensure_react_import_missing():
    """Test that _ensure_react_import adds import when missing."""
    source = 'const App = () => <div />;\n'
    result = _ensure_react_import(source)

def test_contains_jsx_with_element():
    """Test _contains_jsx identifies JSX elements."""
    analyzer = TreeSitterAnalyzer(TreeSitterLanguage.JAVASCRIPT)
    source = "const x = <div>test</div>;"
    tree = analyzer.parse(source.encode("utf-8"))
    
    # Find a jsx_element node
    def find_jsx(node):
        if node.type == "jsx_element":
            return node
        for child in node.children:
            result = find_jsx(child)
            if result:
                return result
        return None
    
    jsx_node = find_jsx(tree.root_node)
    if jsx_node:
        pass

def test_contains_jsx_with_non_jsx():
    """Test _contains_jsx returns False for non-JSX nodes."""
    analyzer = TreeSitterAnalyzer(TreeSitterLanguage.JAVASCRIPT)
    source = "const x = 42;"
    tree = analyzer.parse(source.encode("utf-8"))
    
    # Find a number node
    def find_number(node):
        if node.type == "number":
            return node
        for child in node.children:
            result = find_number(child)
            if result:
                return result
        return None
    
    number_node = find_number(tree.root_node)
    if number_node:
        pass

def test_find_component_function_declaration():
    """Test _find_component_function finds function declarations."""
    analyzer = TreeSitterAnalyzer(TreeSitterLanguage.JAVASCRIPT)
    source = """function MyComponent() {
  return <div />;
}"""
    tree = analyzer.parse(source.encode("utf-8"))
    source_bytes = source.encode("utf-8")
    
    result = _find_component_function(tree.root_node, "MyComponent", source_bytes)

def test_generate_render_counter_code_empty_name():
    """Test generate_render_counter_code with empty component name."""
    result = generate_render_counter_code("")

def test_generate_render_counter_code_numeric_name():
    """Test generate_render_counter_code with numeric component name."""
    result = generate_render_counter_code("123Component")

def test_generate_render_counter_code_unicode_characters():
    """Test generate_render_counter_code with unicode characters."""
    result = generate_render_counter_code("MyComponent™")

def test_ensure_react_import_with_partial_import():
    """Test _ensure_react_import when React is imported partially."""
    source = 'import { Fragment } from "react";\nconst App = () => <div />;\n'
    result = _ensure_react_import(source)

def test_ensure_react_import_multiple_times():
    """Test that multiple calls to _ensure_react_import are idempotent."""
    source = 'const App = () => <div />;\n'
    result1 = _ensure_react_import(source)
    result2 = _ensure_react_import(result1)
    
    # Should not duplicate the import
    count = result2.count('import React from "react"')

def test_find_component_function_with_export():
    """Test _find_component_function with exported component."""
    analyzer = TreeSitterAnalyzer(TreeSitterLanguage.JAVASCRIPT)
    source = """export function MyComponent() {
  return <div />;
}"""
    tree = analyzer.parse(source.encode("utf-8"))
    source_bytes = source.encode("utf-8")
    
    # Should find the function even with export keyword
    result = _find_component_function(tree.root_node, "MyComponent", source_bytes)

def test_generate_render_counter_code_very_long_name():
    """Test generate_render_counter_code with very long component name."""
    long_name = "A" * 200 + "Component"
    result = generate_render_counter_code(long_name)

def test_ensure_react_import_with_large_source():
    """Test _ensure_react_import with large source file."""
    # Create a large source file
    imports = "\n".join([f"import something{i} from 'module{i}';" for i in range(100)])
    code = "\n".join([f"const var{i} = {i};" for i in range(100)])
    source = imports + "\n" + code
    
    result = _ensure_react_import(source)
    # If React not imported, should add it
    if 'import React from "react"' not in source:
        pass

def test_insert_after_imports_with_many_imports():
    """Test _insert_after_imports with many import statements."""
    imports = "\n".join([f"import module{i} from 'package{i}';" for i in range(50)])
    source = f"""{imports}

const code = "main";
"""
    analyzer = TreeSitterAnalyzer(TreeSitterLanguage.JAVASCRIPT)
    code = "const myVar = 42;"
    result = _insert_after_imports(source, code, analyzer)
# 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-pr1561-2026-02-20T05.58.41 and push.

[codeflash-ai]

⚡️ Codeflash found optimizations for this PR

📄 333% (3.33x) speedup for generate_render_counter_code in codeflash/languages/javascript/frameworks/react/profiler.py

⏱️ Runtime : 207 microseconds → 47.8 microseconds (best of 244 runs)

A dependent PR with the suggested changes has been created. Please review:

• ⚡️ Speed up function generate_render_counter_code by 333% in PR #1581 (codeflash/optimize-pr1561-2026-02-20T05.58.41) #1582

If you approve, it will be merged into this PR (branch codeflash/optimize-pr1561-2026-02-20T05.58.41).

[claude]

PR Review Summary

Prek Checks

✅ Passed after fixes.

• Removed duplicate function definitions (_encode_cached, _compute_wrapped_segment) that were appended to the end of profiler.py by the optimization (lines 336-386 were exact copies of lines 283-333)
• Fixed unsorted imports (ruff I001) and formatting (ruff format) — auto-fixed by prek
• Fixed 2 mypy no-redef errors caused by the duplicate definitions
• Committed and pushed: 57673f26

Code Review

✅ No critical issues found. The optimization is sound:

Optimization	Assessment
Precompiled regex (_SAFE_NAME_RE)	✅ Correct — avoids re-compilation per call
Cached encoding (_encode_cached with lru_cache(64))	✅ Correct — safe for immutable bytes, bounded cache
Single-pass string reconstruction	✅ Correct — tree-sitter offsets are all from original source, non-overlapping return statements
Reusing parsed tree for import insertion	✅ Correct — imports are always before function bodies, so offsets remain valid after JSX wrapping

Minor notes (non-blocking):

• _wrap_return_with_profiler and _insert_after_imports are now dead code (no longer called anywhere). Could be cleaned up in a follow-up.
• Duplicate comments on lines 95-97 and 114-116 (# Add render counter code... and # Ensure React is imported)

Test Coverage

This PR's base branch is add/support_react. The file profiler.py is new (does not exist on main), so there is no main-branch baseline.

File	Stmts	Miss	Cover	Status
react/profiler.py	177	157	11%	⚠️ Low coverage (new file)
react/analyzer.py	62	30	52%	⚠️ New file
react/benchmarking.py	41	23	44%	⚠️ New file
react/context.py	119	89	25%	⚠️ New file
react/discovery.py	128	91	29%	⚠️ New file
react/testgen.py	17	11	35%	⚠️ New file
react/detector.py	49	0	100%	✅
react/__init__.py	0	0	100%	✅

Note: The low coverage for profiler.py (11%) is a pre-existing issue from the base branch (add/support_react), not introduced by this optimization PR. The optimization only modifies the internals of instrument_component_with_profiler and adds _encode_cached/_compute_wrapped_segment — the test surface area is unchanged. The existing unit tests in tests/react/test_profiler.py do exercise the profiler but are mostly integration-level tests that run through the CLI/e2e path rather than being captured by coverage run -m pytest.

Optimization PRs

No optimization PRs were merged — all open codeflash-ai[bot] PRs have CI failures (Snyk rate limits + flaky JS integration tests).

---

Last updated: 2026-02-20T06:15 UTC

[codeflash-ai]

This PR is now faster! 🚀 @claude[bot] accepted my optimizations from:

• ⚡️ Speed up function generate_render_counter_code by 333% in PR #1581 (codeflash/optimize-pr1561-2026-02-20T05.58.41) #1582