React Compiler を Expo に入れて、手書き memo を 41 箇所消しました

// src/dev/RenderCounter.tsx
import { Profiler, type ReactNode } from "react";
 
type Counts = Record<string, { commits: number; totalMs: number }>;
 
const counts: Counts = {};
 
export function RenderCounter({ id, children }: { id: string; children: ReactNode }) {
  if (!__DEV__) return <>{children}</>;
 
  return (
    <Profiler
      id={id}
      onRender={(profileId, phase, actualDuration) => {
        // phase: "mount" | "update" | "nested-update"
        if (phase === "mount") return;
        const entry = counts[profileId] ?? { commits: 0, totalMs: 0 };
        entry.commits += 1;
        entry.totalMs += actualDuration;
        counts[profileId] = entry;
      }}
    >
      {children}
    </Profiler>
  );
}
 
export function dumpRenderCounts(label: string) {
  if (!__DEV__) return;
  const rows = Object.entries(counts)
    .sort((a, b) => b[1].commits - a[1].commits)
    .map(([id, v]) => `${id}\t${v.commits}\t${v.totalMs.toFixed(1)}ms`);
  console.log(`[render:${label}]\n${rows.join("\n")}`);
}
 
export function resetRenderCounts() {
  for (const key of Object.keys(counts)) delete counts[key];
}

// 計測シナリオ: グリッド表示 → 3番目のセルをお気に入り登録 → 解除
resetRenderCounts();
await tapFavorite(2);
await tapFavorite(2);
dumpRenderCounts("favorite-toggle");

// 残した例: useEffect の依存に入る設定オブジェクト
const audioConfig = useMemo(
  () => ({ sampleRate: 44100, channels: 2 }),
  []
);
 
useEffect(() => {
  nativeAudio.configure(audioConfig); // 参照が変わるたびネイティブ側を再構成してしまう
}, [audioConfig]);

npx expo install eslint-plugin-react-hooks@latest

// eslint.config.js
import reactHooks from "eslint-plugin-react-hooks";
 
export default [
  {
    plugins: { "react-hooks": reactHooks },
    rules: {
      // コンパイラが解析を諦める構文パターンを検出する
      "react-hooks/react-compiler": "error",
    },
  },
];

// 諦められていたコード
function TagList({ tags }: { tags: Tag[] }) {
  tags.sort((a, b) => a.order - b.order); // props を破壊している
  return <>{tags.map((t) => <TagChip key={t.id} tag={t} />)}</>;
}
 
// 修正後: 非破壊にするとコンパイラが最適化に踏み込む
function TagList({ tags }: { tags: Tag[] }) {
  const sorted = tags.toSorted((a, b) => a.order - b.order);
  return <>{sorted.map((t) => <TagChip key={t.id} tag={t} />)}</>;
}

# 変換されたコンポーネント数を数える
npx expo export --platform ios --dump-source-map 2>&1 \
  | tee /tmp/expo-export.log
 
# コンパイラが挿入するランタイムフックの出現数を数える
grep -c "useMemoCache" dist/_expo/static/js/ios/*.js

# .github/workflows/react-compiler-guard.yml
name: react-compiler-guard
on: [pull_request]
 
jobs:
  guard:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
 
      # ゲート1: コンパイラが諦める構文を新規に増やさない
      - name: ESLint (react-compiler rule)
        run: npx eslint . --max-warnings=0
 
      # ゲート2: 最適化されたコンポーネント数が減っていないか
      - name: Compiler coverage
        run: |
          npx expo export --platform ios >/dev/null 2>&1
          COUNT=$(grep -oh "useMemoCache" dist/_expo/static/js/ios/*.js | wc -l | tr -d ' ')
          BASELINE=$(cat .compiler-baseline)
          echo "coverage: $COUNT (baseline: $BASELINE)"
          if [ "$COUNT" -lt "$BASELINE" ]; then
            echo "::error::最適化対象が $BASELINE から $COUNT に減少しました"
            exit 1
          fi