What is the primary purpose of the React Compiler Debugger skill?

It allows developers to see the exact code generated by the React Compiler (babel-plugin-react-compiler), helping them understand how their components are being optimized and why memoization might be failing.

Why am I seeing a 'Cannot find package' error?

This skill requires the full GenesisTools toolkit to be installed via the /genesis-tools:setup command, as the plugin alone does not include the necessary Babel dependencies.

What React versions are supported by this debugger?

The tool supports React target versions 17, 18, and 19, allowing you to see how the transformation differs across library versions.

Can I debug code snippets without creating a file?

Yes, you can use the --code flag to compile and inspect inline code strings directly in your terminal.

What does useMemoCache in the output signify?

useMemoCache is a compiler primitive that stores values and JSX elements. Seeing how it is used helps you understand which parts of your component are successfully cached.

React Compiler Debugger

Name: React Compiler Debugger
Author: genesiscz

bygenesiscz

•

開発者ツール

Inspects and debugs React Compiler output to troubleshoot component memoization and optimization issues.

概要

React Compiler Debugger provides developers with direct visibility into how the babel-plugin-react-compiler transforms React components. It allows users to see the generated code, understand how useMemoCache is being applied, and diagnose why specific components may not be receiving automatic optimizations. This skill is essential for performance tuning and learning the internals of the React Compiler's transformation logic across React versions 17, 18, and 19.

主な機能

2 GitHub stars
Debug memoization failures and cache invalidation triggers
Verbose mode for inspecting internal compiler events and logic
Visualize compiled React output including useMemoCache primitives
Support for both file-based and direct inline code compilation
Configurable compiler options for different React target versions

ユースケース

Learning how the React Compiler handles complex hook dependencies and JSX structures
Diagnosing why a specific React component isn't being automatically optimized by the compiler
Comparing original source code with its compiled counterpart to verify memoization logic

概要

主な機能

2 GitHub stars
Debug memoization failures and cache invalidation triggers
Verbose mode for inspecting internal compiler events and logic
Visualize compiled React output including useMemoCache primitives
Support for both file-based and direct inline code compilation
Configurable compiler options for different React target versions

ユースケース

Learning how the React Compiler handles complex hook dependencies and JSX structures
Diagnosing why a specific React component isn't being automatically optimized by the compiler
Comparing original source code with its compiled counterpart to verify memoization logic