code-quest: Skill for Claude Code

React Compiler 1.0 — 實際行為與邊界

This project uses React Compiler. 不亂加 useMemo / useCallback 才對，但也不是全部自動。

本 skill 的結論以 babel-plugin-react-compiler 實際編譯輸出為準，不依賴推論。有疑問時用下面的 probe script 跑看。

What Compiler DOES auto-memoize（不要再加 useMemo）

以下所有情境 Compiler 都會插入 cache slots（if ($[0] !== dep) 形式）自動 memo。手動 useMemo 是純冗餘：

1. Component 內部的 JSX / callback / 物件字面值

function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((n) => n + 1);  // auto-memo
  const meta = { count, isZero: count === 0 };     // auto-memo on [count]
  return <Button onClick={increment}>{count}</Button>;  // JSX auto-memo
}

2. Hook 回傳值的 spread

export function useSession() {
  const state = useContext(StateCtx);
  const actions = useContext(ActionsCtx);
  if (!state || !actions) throw new Error('...');
  return { ...state, ...actions };  // auto-memo on [state, actions]
}

3. Hook 內的 filter / map / reduce / sort

export function useVisibleItems() {
  const { items, filter } = useContext(ListContext);
  return items.filter((item) => item.status === filter);  // auto-memo on [items, filter]
}

4. 合併預設值

export function useConfig(overrides?: Partial<Config>) {
  return { ...DEFAULT_CONFIG, ...overrides };  // auto-memo on [overrides]
}

5. Provider value inline object

return <Ctx.Provider value={{ socket }}>{children}</Ctx.Provider>;  // auto-memo on [socket]
// 跟以下寫法編譯後完全一樣：
const value = useMemo(() => ({ socket }), [socket]);
return <Ctx.Provider value={value}>{children}</Ctx.Provider>;

---

What Compiler does NOT do（這 3 件必須手動）

這是架構限制，Compiler 沒辦法替你處理：

邊界 1：Component boundary memoization

Compiler 不會自動把 child component 包成 React.memo。Parent render → child 被呼叫，即使 child 自己 context 沒變。

手動處理時機：

• 渲染成本高的 leaf component（Markdown / syntax highlight / 大型表格 row）
• 深 provider tree 的邊界（memo 一次 short-circuit 整片 subtree）
• 吃 props 但 props 多半穩定的 container

不值得 memo：