The extension runs an LSP server that invokes babel-plugin-react-compiler on each file. The compiler's logger events tell us exactly which functions were compiled, skipped, or rejected. Component classification uses the same logic the React Compiler uses internally — not just naming conventions.
Results are cached by content hash and debounced (200ms default, configurable).
Settings
All settings (18 options)
All settings are under the reactCompilerLens namespace.
Setting
Default
Description
enabled
true
Enable/disable the extension
codeLens.serverComponent
true
Show CodeLens for Server Components
codeLens.clientComponent
true
Show CodeLens for Client Components
codeLens.compilationStatus
true
Show compilation status
codeLens.serverAction
true
Show CodeLens for Server Actions
codeLens.serverOnly
true
Show CodeLens for server-only files
codeLens.reactiveValues
true
Show reactive dependency names
codeLens.reactiveValuesMaxDisplay
3
Max reactive values before truncating
codeLens.importedComponentJsxLens
true
Show labels at JSX usage sites
codeLens.showInheritedSuffix
true
Show "(inherited)" on inherited labels
codeLens.showDefaultSuffix
true
Show "(default)" for implicit Server Components
diagnostics.enabled
true
Show errors in Problems panel
diagnostics.severity
"warning"
Severity: warning, error, or info
diagnostics.showDescription
true
Include extended description
diagnostics.showRelatedLocations
true
Show related source locations
analysis.debounceMs
200
Delay (ms) before re-analyzing (50–2000)
framework
"auto"
Framework detection: auto, nextjs, or none
compiledOutput.viewMode
"side"
Display mode: side or peek
Troubleshooting
CodeLens not appearing?
Ensure your file is .tsx or .jsx — the extension activates on these languages only
Check the Output panel → select "React Compiler Lens" channel for error details
Try the command: React Compiler Lens: Refresh
Extension not activating?
Verify babel-plugin-react-compiler is installed in your project
Check the Extensions panel to confirm React Compiler Lens is enabled
"Not Optimized" on most components?
Click the category badge (e.g., Refs) in the Problems panel for details
Common causes: ref access during render, setState in render, impure function calls
Some patterns are not yet supported by the React Compiler
Wrong framework detection?
Set reactCompilerLens.framework to "nextjs" or "none" manually in settings
Auto-detection looks for next.config.{js,ts,mjs} in your workspace root
