React Compiler (Forget): Автоматична мемоїзація та відмова від useMemo

[ Вихідний код JSX / TSX ]
           │
           ▼ (Парсер Babel / SWC)
[ Синтаксичне дерево (AST) ]
           │
           ▼ (Побудова графа потоку керування)
[ HIR (High-level Intermediate Representation) ]
           │
           ▼ (Зведення до SSA-форми)
[ SSA-форма: Унікальні регістри v0, v1, v2 ]
           │
           ├───► [ Liveness Analysis (Час життя змінних) ]
           ├───► [ Escape Analysis (Аналіз витоків посилань) ]
           └───► [ Infer Mutation Ranges (Аналіз мутацій) ]
           │
           ▼ (Обчислення меж реактивності)
[ Виділення реактивних скоупів (Reactive Scopes) ]
           │
           ▼ (Генерація коду з рантайм-кешем 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-кеш,
  // що необхідно під час взаємодії з низькорівневими WebGL-буферами
  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>;
}