Add script to detect react components the compiler cannot optimize by MichaelBuessemeyer · Pull Request #10090 · scalableminds/webknossos

MichaelBuessemeyer · 2026-09-30T14:27:15Z

Summary

Does what the PR description says.
Maybe I'd add some or all component fixes. Maybe as a stacked pr.

Steps to test:

No need to. Is a dev script and I check that it runs and its code looks ok.

Issues:

https://scm.slack.com/archives/C02A8MN9V/p1790086850412779

(Please delete unneeded items, merge only when none are left open)

~~Added changelog entry (create a $PR_NUMBER.md file in unreleased_changes or use ./tools/create-changelog-entry.py)~~ -> not needed imo as not user facing.

…can't be optimized

coderabbitai · 2026-09-30T14:27:22Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: 0b6f1310-1169-454e-99f1-61c39021cf63

📥 Commits

Reviewing files that changed from the base of the PR and between 331f0c8 and 8858a3f.

📒 Files selected for processing (1)

tools/react-compiler-report.js

💤 Files with no reviewable changes (1)

tools/react-compiler-report.js

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

📝 Walkthrough

Walkthrough

Adds a react-compiler-report command that scans TypeScript and TSX files, analyzes them with the React Compiler, and reports compilation totals, failures, and file-analysis errors in text or JSON.

Changes

React Compiler Report

Layer / File(s)	Summary
CLI setup and file discovery `package.json`, `tools/react-compiler-report.js`	Adds the `react-compiler-report` package script. The CLI sets default scan patterns and exclusions, and accepts path or glob arguments.
Per-file compiler analysis `tools/react-compiler-report.js`	Adds helpers for function names and descriptions. The script records successful compilations and groups compiler errors by function, including reasons and available locations.
Result aggregation and output `tools/react-compiler-report.js`	Aggregates compilation results and per-file analysis errors. Supports JSON output and text output with an optional summary mode.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Suggested reviewers: philippotto

Merge Risk: ⚪ Minimal · up to 8858a

This change adds a development-only script for reporting which React components the compiler cannot optimize. It does not affect production behavior, and no merge-blocking risk was found.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 331f0

The command analyzes files and prints reports without changing application state. No introduced security vulnerability was demonstrated. Caller-supplied patterns can select files beyond the frontend directory, so its exposure depends on who invokes it and where its output is published.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

inferred — Explicit absolute or parent-relative patterns can reach files outside the default frontend tree, subject to the invoking process's filesystem permissions. Report output can contain paths, function names, and compiler diagnostics; no privilege elevation or remote caller was demonstrated.

Trust Boundaries and Controls

observed — ROOT is used to format relative report paths, not to enforce file containment. Selected source is passed to a fixed Babel transformation rather than imported as application code; the script has no explicit network, subprocess, or file-write operation.

Resilience and Maintainability Implications

inferred — Report accumulation is process-local. Per-file analysis exceptions are recorded and scanning continues; the inspected implementation has no durable state transition, reservation, or cleanup obligation that could leave persistent security configuration stranded after interruption.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 1 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: adding a script to detect React components that the compiler cannot optimize.
Description check	✅ Passed	The description explains the script’s purpose, mentions possible follow-up component fixes, and links a related issue.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{A rabbit checks the compiler’s trail,
Counts each success and each detail.
Errors gather, names appear,
JSON and text make results clear.
The bunny hops with logs in tow,
And leaves a tidy report to show.}

_{Comment @coderabbitai help to get the list of available commands.}

MichaelBuessemeyer

example script output:

frontend/javascripts/viewer/view/right_border_tabs/generate_bounding_boxes_modal.tsx
  64  GenerateBoundingBoxesModalInner
    145:7  (BuildHIR::lowerStatement) Handle TryStatement with a finalizer ('finally') clause

frontend/javascripts/viewer/view/right_border_tabs/scrollable_virtualized_tree.tsx
  12  ScrollableVirtualizedTree
    19:5  Expected the first argument to be an inline function expression
      Expected the first argument to be an inline function expression

frontend/javascripts/viewer/view/right_border_tabs/segments_tab/inline_editable_name.tsx
  34  InlineEditableName
    55:3  Cannot access refs during render
      React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during ren…
    57:3  Cannot access refs during render
      React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during ren…

frontend/javascripts/viewer/view/right_border_tabs/sidebar_context_menu.tsx
  8  ContextMenuInner
    17:27  Cannot access refs during render
      React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during ren…

frontend/javascripts/viewer/view/right_border_tabs/skeleton_tab/hooks/use_skeleton_export.ts
  24  useSkeletonExport
    40:7  (BuildHIR::lowerStatement) Handle TryStatement with a finalizer ('finally') clause
    73:5  (BuildHIR::lowerStatement) Handle TryStatement with a finalizer ('finally') clause
    77:15  (BuildHIR::lowerExpression) Handle Import expressions

frontend/javascripts/viewer/view/right_border_tabs/skeleton_tab/skeleton_tab_view.tsx
  30  ExportProgressModal
    35:5  Cannot access refs during render
      React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during ren…
    41:14  Cannot access refs during render
      React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during ren…

frontend/javascripts/viewer/view/statusbar/use_overflow_measurement.ts
  51  useOverflowMeasurement
    61:3  Cannot access refs during render
      React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during ren…

frontend/javascripts/viewer/view/version_list.tsx
  244  InnerVersionList
    355:5  (BuildHIR::lowerStatement) Handle TryStatement without a catch clause

frontend/javascripts/viewer/view/voxel_pipette_tooltip.tsx
  57  VoxelValueTooltip
    162:5  Cannot access refs during render
      React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during ren…

React Compiler: 598 functions compiled, 92 not compiled (786 files analyzed).

Most common reasons:
  25x  (BuildHIR::lowerStatement) Handle TryStatement with a finalizer ('finally') clause
  20x  Cannot access refs during render
  10x  Cannot access variable before it is declared
  9x  (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
  7x  (BuildHIR::lowerExpression) Handle BigIntLiteral expressions
  6x  (BuildHIR::lowerStatement) Support ThrowStatement inside of try/catch
  5x  Existing memoization could not be preserved
  4x  Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
  3x  This value cannot be modified
  2x  (BuildHIR::lowerExpression) Handle UpdateExpression to variables captured within lambdas.

MichaelBuessemeyer · 2026-10-01T10:38:44Z

+const CODE_FILTER =
+  /forwardRef|memo|(?:const|let|var|function)\s+(?:[A-Z]|use[A-Z0-9])|(?:[A-Z]|use[A-Z0-9])[^\s:=(){}[\],;]*\s*(?:\(|[:=]\s*(?:function|\())/;


Maybe we can also leave this optimization out to ensure catching every file? 🤔

do you know the perf difference? as the script isnt run in the CI anyway, I don't care much about it right now 😅

Na not really. The AI says:

The filter skips only 12 of 786 files (0.4% of the code).

The AIs measurements claimed that about 2% speedup is reached -> not worth it. I removed it

philippotto · 2026-10-05T12:59:10Z

+const CODE_FILTER =
+  /forwardRef|memo|(?:const|let|var|function)\s+(?:[A-Z]|use[A-Z0-9])|(?:[A-Z]|use[A-Z0-9])[^\s:=(){}[\],;]*\s*(?:\(|[:=]\s*(?:function|\())/;


do you know the perf difference? as the script isnt run in the CI anyway, I don't care much about it right now 😅

add script to get output from react compiler to see which components …

331f0c8

…can't be optimized

MichaelBuessemeyer self-assigned this Sep 30, 2026

MichaelBuessemeyer added frontend refactoring labels Sep 30, 2026

MichaelBuessemeyer added this pull request to stack #10100 October 1, 2026 08:32

MichaelBuessemeyer commented Oct 1, 2026

View reviewed changes

MichaelBuessemeyer marked this pull request as ready for review October 1, 2026 10:43

MichaelBuessemeyer requested a review from philippotto October 2, 2026 15:59

philippotto approved these changes Oct 5, 2026

View reviewed changes

remove not really pref relevant filter

8858a3f

Navigation Menu

Repository navigation

Add script to detect react components the compiler cannot optimize - #10090

Add script to detect react components the compiler cannot optimize#10090
MichaelBuessemeyer wants to merge 2 commits into
masterfrom
add-component-optimization-test-script

MichaelBuessemeyer commented Sep 30, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Sep 30, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

MichaelBuessemeyer left a comment

Uh oh!

MichaelBuessemeyer Oct 1, 2026

Uh oh!

philippotto Oct 5, 2026

Uh oh!

MichaelBuessemeyer Oct 6, 2026

Uh oh!

philippotto Oct 5, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const CODE_FILTER =
		/forwardRef\|memo\|(?:const\|let\|var\|function)\s+(?:[A-Z]\|use[A-Z0-9])\|(?:[A-Z]\|use[A-Z0-9])[^\s:=(){}[\],;]\s(?:\(\|[:=]\s*(?:function\|\())/;

Conversation

MichaelBuessemeyer commented Sep 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Steps to test:

Issues:

Uh oh!

coderabbitai Bot commented Sep 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Security Architecture Review

❌ Failed checks (1 warning)

Uh oh!

MichaelBuessemeyer left a comment

Choose a reason for hiding this comment

Uh oh!

MichaelBuessemeyer Oct 1, 2026

Choose a reason for hiding this comment

Uh oh!

philippotto Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

MichaelBuessemeyer Oct 6, 2026

Choose a reason for hiding this comment

Uh oh!

philippotto Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MichaelBuessemeyer commented Sep 30, 2026 •

edited

Loading

coderabbitai Bot commented Sep 30, 2026 •

edited

Loading