React Compiler Debug

Inspect what babel-plugin-react-compiler generates from React components.

Prerequisites

This tool requires GenesisTools to be fully installed (not just the plugin).

If you see Cannot find package 'babel-plugin-react-compiler':

# Check if tools command exists
which tools

# If not found, use /genesis-tools:setup to install the full toolkit

The tools command must be in your PATH for this to work. The plugin alone doesn't include the babel dependencies.

Quick Start

# Compile a file and see output
tools react-compiler-debug <file.tsx>

# Compile inline code
tools react-compiler-debug --code "const Foo = ({ x }) => <div>{x}</div>"

# Verbose mode (shows compiler events)
tools react-compiler-debug -v <file.tsx>

# Output to clipboard
tools react-compiler-debug <file.tsx> --clipboard

When to Use

• •Debug memoization: See if/how React Compiler optimizes a component
• •Compare output: Understand the transformation applied
• •Diagnose issues: Find why a component isn't being optimized
• •Learn: Understand what useMemoCache and other compiler primitives do

Compiler Options Reference

Key options from babel-plugin-react-compiler:

Reading the Output

The compiled output uses React Compiler primitives:

• •useMemoCache(n) - Creates a cache with n slots
• •$[0], $[1], etc. - Cache slot access
• •Symbol.for("react.memo_cache_sentinel") - Cache invalidation marker

Example

Input:

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

Output (simplified):

function Greeting(t0) {
  const $ = useMemoCache(2);
  const { name } = t0;
  let t1;
  if ($[0] !== name) {
    t1 = <h1>Hello, {name}!</h1>;
    $[0] = name;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  return t1;
}

The compiler memoizes the JSX based on name prop changes.