React Compiler Output

What are these files?

Most .tsx files in src/components/ are React Compiler output — they’ve been processed by React’s optimizing compiler and contain memoization caches ($[N] variables and _c(N) calls).

What it looks like

You’ll see patterns like:

const $ = React.unstable_useMemoCache(5);
let t0 = $[0];
if (t0 === Symbol.for("react.memo_cache_sentinel")) {
  t0 = <Box flexDirection="column">...</Box>;
  $[0] = t0;
}

Rules for editing

Do

• Change string literals and prop values
• Update text content, color values, dimensions
• Modify conditional logic around rendered content

Do NOT

• Change $[N] cache index numbers — these are assigned by the compiler
• Change _c(N) cache sizes — these tell React how many cache slots to allocate
• Duplicate Symbol.for("react.memo_cache_sentinel") checks — these are one-time initializations

Why it matters

The compiler generates these optimizations automatically. If you change cache indices or sizes, the memoization breaks and components will re-render unnecessarily or produce incorrect results.

If you need to make structural changes

For significant component rewrites, it’s best to:

1. Rewrite the component as plain React (remove all $ and _c references)
2. Test thoroughly
3. Re-run the React Compiler if available, or leave as plain React

The compiler output is an optimization, not a requirement. Plain React components work fine in the Ink runtime.