genesis-tools:react-compiler-debug

To debug React Compiler output for memoization issues, use this Skill to inspect the transformed code generated by babel-plugin-react-compiler. It compares your original React component against the compiled output to reveal how useMemoCache is applied.

React components may keep re-rendering if the compiler's memoization output is flawed or bypassed. This Skill inspects the compiled React code to pinpoint why component optimization fails or how useMemoCache is being used.

Inspecting compiled React code requires a full GenesisTools installation with the 'tools' command available in your system PATH. This environment executes babel-plugin-react-compiler to transform and analyze your code.

You can compare original versus compiled React component code by running this Skill on a target file like 'src/MyComponent.tsx'. It displays the direct transformation applied by the React Compiler for optimization analysis.

The best way to analyze useMemoCache usage is to inspect the transformed output of the React Compiler. This Skill allows you to view the compiled code to understand how memoization is automatically applied to your components.

Limitations when debugging React Compiler transformations include strict dependency on a valid GenesisTools installation and the 'tools' PATH command. Without these environment prerequisites, the Skill cannot execute babel-plugin-react-compiler for analysis.