React Compiler (Forget): Автоматическая мемоизация и отказ от useMemo

[ Исходный JSX/TSX Код ]
          │
          ▼ (Babel / SWC Parser)
[ Синтаксическое дерево (AST) ]
          │
          ▼ (Построение Control Flow Graph)
[ HIR (High-level Intermediate Representation) ]
          │
          ▼ (Приведение к форме SSA)
[ SSA Form: однозначные переменные v0, v1, v2 ]
          │
          ├───► [ Liveness Analysis (Время жизни переменных) ]
          ├───► [ Escape Analysis (Анализ утечек ссылок) ]
          └───► [ Infer Mutation Ranges (Анализ мутаций) ]
          │
          ▼ (Вычисление границ реактивности)
[ Выделение Reactive Scopes (Реактивных скоупов) ]
          │
          ▼ (Кодогенерация с runtime-кэшем c())
[ Оптимизированный JS: $ = c(slotCount) ]

interface MetricProps {
  label: string;
  value: number;
  threshold: number;
  onAlert: (msg: string) => void;
}

export function MetricCard({ label, value, threshold, onAlert }: MetricProps) {
  const isCritical = value > threshold;
  
  const statusMessage = `Показатель ${label}: ${isCritical ? 'Критический' : 'В норме'}`;

  const handleNotify = () => {
    if (isCritical) {
      onAlert(`Внимание: ${statusMessage}`);
    }
  };

  return (
    <div className={`metric-card ${isCritical ? 'critical' : 'normal'}`}>
      <h3>{label}</h3>
      <p>{value}</p>
      <button onClick={handleNotify}>Проверить статус</button>
    </div>
  );
}

import { c as _c } from "react/compiler-runtime";

export function MetricCard(props: MetricProps) {
  // Компилятор аллоцирует фиксированный блок памяти на 11 слотов для инстанса Fiber
  const $ = _c(11);
  const { label, value, threshold, onAlert } = props;
  const isCritical = value > threshold;

  // Реактивный скоуп 1: Вычисление statusMessage
  let statusMessage: string;
  if ($[0] !== isCritical || $[1] !== label) {
    statusMessage = `Показатель ${label}: ${isCritical ? 'Критический' : 'В норме'}`;
    $[0] = isCritical;
    $[1] = label;
    $[2] = statusMessage;
  } else {
    statusMessage = $[2];
  }

  // Реактивный скоуп 2: Замыкание обработчика handleNotify
  let handleNotify: () => void;
  if ($[3] !== isCritical || $[4] !== onAlert || $[5] !== statusMessage) {
    handleNotify = () => {
      if (isCritical) {
        onAlert(`Внимание: ${statusMessage}`);
      }
    };
    $[3] = isCritical;
    $[4] = onAlert;
    $[5] = statusMessage;
    $[6] = handleNotify;
  } else {
    handleNotify = $[6];
  }

  // Реактивный скоуп 3: Мемоизация самого дерева JSX!
  let jsxContent: JSX.Element;
  if (
    $[7] !== handleNotify ||
    $[8] !== isCritical ||
    $[9] !== label ||
    $[10] !== value
  ) {
    jsxContent = (
      <div className={`metric-card ${isCritical ? 'critical' : 'normal'}`}>
        <h3>{label}</h3>
        <p>{value}</p>
        <button onClick={handleNotify}>Проверить статус</button>
      </div>
    );
    $[7] = handleNotify;
    $[8] = isCritical;
    $[9] = label;
    $[10] = value;
  } else {
    jsxContent = $[7];
  }

  return jsxContent;
}

// Полное отключение компилятора для конкретного компонента с императивными хаками DOM
export function HeavyWebGLCanvas({ contextId }: { contextId: string }) {
  "use no memo";

  // Этот компонент не будет трансформирован в HIR-кэш слотов,
  // что полезно при отладке сторонних библиотек прямой мутации буфера
  return <canvas id={contextId} />;
}

// Принудительное включение в режиме opt-in
export function OptimizedWidget({ data }: { data: string[] }) {
  "use memo";

  return <ul>{data.map(item => <li key={item}>{item}</li>)}</ul>;
}