React Compiler مع Next.js: دليل التحسين التلقائي الشامل

npx create-next-app@latest react-compiler-demo --typescript --tailwind --app --src-dir
cd react-compiler-demo

npm ls react

npm install -D babel-plugin-react-compiler eslint-plugin-react-compiler

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
export default nextConfig;

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: "annotation", // ترجمة المكونات المشتركة فقط
      panicThreshold: "CRITICAL_ERRORS", // فشل البناء عند الأخطاء الحرجة
    },
  },
};

{
  "plugins": ["react-compiler"],
  "rules": {
    "react-compiler/react-compiler": "error"
  }
}

import reactCompiler from "eslint-plugin-react-compiler";
 
export default [
  {
    plugins: {
      "react-compiler": reactCompiler,
    },
    rules: {
      "react-compiler/react-compiler": "error",
    },
  },
];

npx next lint

// components/ProductList.tsx — قبل التحسين
"use client";
 
import { useState } from "react";
 
interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}
 
function ProductCard({ product }: { product: Product }) {
  console.log(`Rendering ProductCard: ${product.name}`);
  return (
    <div className="border rounded-lg p-4">
      <h3 className="font-bold">{product.name}</h3>
      <p className="text-gray-600">${product.price}</p>
    </div>
  );
}
 
function CategoryFilter({
  categories,
  selected,
  onSelect,
}: {
  categories: string[];
  selected: string;
  onSelect: (cat: string) => void;
}) {
  console.log("Rendering CategoryFilter");
  return (
    <div className="flex gap-2 mb-4">
      {categories.map((cat) => (
        <button
          key={cat}
          onClick={() => onSelect(cat)}
          className={selected === cat ? "bg-blue-500 text-white px-3 py-1 rounded" : "bg-gray-200 px-3 py-1 rounded"}
        >
          {cat}
        </button>
      ))}
    </div>
  );
}
 
export default function ProductList({ products }: { products: Product[] }) {
  const [selectedCategory, setSelectedCategory] = useState("All");
  const [searchQuery, setSearchQuery] = useState("");
 
  const categories = ["All", ...new Set(products.map((p) => p.category))];
 
  const filteredProducts = products.filter((p) => {
    const matchesCategory = selectedCategory === "All" || p.category === selectedCategory;
    const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });
 
  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="Search products..."
        className="border rounded px-3 py-2 mb-4 w-full"
      />
      <CategoryFilter
        categories={categories}
        selected={selectedCategory}
        onSelect={setSelectedCategory}
      />
      <div className="grid grid-cols-3 gap-4">
        {filteredProducts.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

// حفظ كل شيء يدوياً — مرهق وعرضة للخطأ
const categories = useMemo(
  () => ["All", ...new Set(products.map((p) => p.category))],
  [products]
);
 
const filteredProducts = useMemo(
  () => products.filter((p) => { /* ... */ }),
  [products, selectedCategory, searchQuery]
);
 
const handleSelect = useCallback(
  (cat: string) => setSelectedCategory(cat),
  []
);
 
// بالإضافة إلى تغليف المكونات الفرعية في React.memo()
const ProductCard = React.memo(function ProductCard({ product }: { product: Product }) {
  // ...
});

# في متصفحك، ثبّت إضافة React DevTools
# ثم افتح DevTools ← تبويب Components

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: {
      // تسجيل نتائج الترجمة
      logger: {
        logEvent(filename, event) {
          console.log(`[React Compiler] ${filename}:`, event);
        },
      },
    },
  },
};

npm run dev

// app/perf-test/page.tsx
"use client";
 
import { useState, useEffect, useRef } from "react";
 
function ExpensiveChild({ value }: { value: number }) {
  // محاكاة تصيير مكلف
  const start = performance.now();
  while (performance.now() - start < 2) {
    // انتظار مشغول لمدة 2 مللي ثانية
  }
  return <div className="p-2 border rounded">{value}</div>;
}
 
export default function PerfTest() {
  const [count, setCount] = useState(0);
  const [unrelated, setUnrelated] = useState(0);
  const renderCount = useRef(0);
  const startTime = useRef(0);
 
  useEffect(() => {
    renderCount.current++;
  });
 
  const items = Array.from({ length: 100 }, (_, i) => i);
 
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">اختبار الأداء</h1>
      <div className="flex gap-4 mb-4">
        <button
          onClick={() => {
            startTime.current = performance.now();
            setCount((c) => c + 1);
          }}
          className="bg-blue-500 text-white px-4 py-2 rounded"
        >
          زيادة المرتبط: {count}
        </button>
        <button
          onClick={() => {
            startTime.current = performance.now();
            setUnrelated((u) => u + 1);
          }}
          className="bg-gray-500 text-white px-4 py-2 rounded"
        >
          زيادة غير المرتبط: {unrelated}
        </button>
      </div>
      <p>عدد مرات التصيير: {renderCount.current}</p>
      <div className="grid grid-cols-10 gap-2">
        {items.map((i) => (
          <ExpensiveChild key={i} value={i + count} />
        ))}
      </div>
    </div>
  );
}

// أضف توجيه "use no memo" لتخطي الترجمة
"use no memo";
 
export default function LegacyComponent() {
  // لن يتم ترجمة هذا المكون
  // مفيد للمكونات التي تعتمد على هوية المرجع
}

// أضف توجيه "use memo" لتفعيل الترجمة
"use memo";
 
export default function OptimizedComponent() {
  // فقط هذا المكون يتم ترجمته
}

// خطأ — المترجم لا يمكنه تحسين هذا
function BadComponent({ items }: { items: string[] }) {
  items.sort(); // تعديل الخصائص!
  return <ul>{items.map((item) => <li key={item}>{item}</li>)}</ul>;
}
 
// صحيح — أنشئ مصفوفة جديدة
function GoodComponent({ items }: { items: string[] }) {
  const sorted = [...items].sort();
  return <ul>{sorted.map((item) => <li key={item}>{item}</li>)}</ul>;
}

// خطأ — يجب استدعاء الخطافات بشكل غير مشروط
function BadComponent({ show }: { show: boolean }) {
  if (show) {
    const [value, setValue] = useState(0); // خطاف مشروط!
  }
}
 
// صحيح — استدعِ الخطافات دائماً في المستوى الأعلى
function GoodComponent({ show }: { show: boolean }) {
  const [value, setValue] = useState(0);
  if (!show) return null;
  return <div>{value}</div>;
}

// خطأ — قراءة المراجع أثناء التصيير تكسر الحفظ
function BadComponent() {
  const ref = useRef(0);
  ref.current++; // تأثير جانبي أثناء التصيير!
  return <div>{ref.current}</div>;
}
 
// صحيح — استخدم المراجع في التأثيرات أو معالجات الأحداث
function GoodComponent() {
  const ref = useRef(0);
  useEffect(() => {
    ref.current++;
  });
  return <div>تحقق من الطرفية</div>;
}

npm install -D eslint-plugin-react-compiler

// next.config.ts
const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: "annotation",
    },
  },
};

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

# ابحث عن جميع حالات الحفظ اليدوي في قاعدة الكود
grep -rn "useMemo\|useCallback\|React.memo" --include="*.tsx" --include="*.ts" src/