تحسين أداء React: useMemo و useCallback و Code Splitting (2024)

مقدمة

كل مطور React يعرف عن useMemo و useCallback و React.memo. لكن عندما ينمو تطبيقك للتعامل مع آلاف العناصر والتحديثات المعقدة في الوقت الفعلي ومتطلبات المؤسسات المتطلبة، هذه الأساسيات ليست كافية.

تغطي هذه المقالة تقنيات التحسين المتقدمة التي طبقتها في لوحات معلومات الرعاية الصحية والبوابات الحكومية وتطبيقات المؤسسات حيث يؤثر الأداء مباشرة على إنتاجية المستخدم.

فهم سلوك React في إعادة التصيير

قبل التحسين، افهم لماذا يعيد React التصيير:

// كل تغيير في الحالة يؤدي إلى تصيير هذا المكون وجميع الأبناء
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState<User | null>(null);

  // المشكلة: ExpensiveChild يُعاد تصييره عند تغيير count،
  // رغم أنه يعتمد فقط على user
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>العدد: {count}</button>
      <ExpensiveChild user={user} />
    </div>
  );
}

التقنية 1: تركيب المكونات بدلاً من الحفظ

غالباً، إعادة هيكلة المكونات تلغي الحاجة للحفظ:

// ❌ النهج الشائع: حفظ الابن
const MemoizedExpensiveChild = React.memo(ExpensiveChild);

// ✅ نهج أفضل: إنزال الحالة أو التركيب
function ParentComponent() {
  const [user, setUser] = useState<User | null>(null);

  return (
    <div>
      <Counter /> {/* حالة العد تعيش هنا الآن */}
      <ExpensiveChild user={user} />
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>العدد: {count}</button>;
}

التقنية 2: الافتراضية للقوائم الكبيرة

تصيير آلاف العناصر قاتل أداء شائع:

import { useVirtual } from '@tanstack/react-virtual';

function VirtualizedList({ items }: { items: DataItem[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtual({
    size: items.length,
    parentRef,
    estimateSize: useCallback(() => 50, []),
    overscan: 5, // تصيير 5 عناصر إضافية فوق/تحت منفذ العرض
  });

  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div style={{ height: virtualizer.totalSize, position: 'relative' }}>
        {virtualizer.virtualItems.map(virtualItem => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              transform: `translateY(${virtualItem.start}px)`,
            }}
          >
            <ListItem item={items[virtualItem.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

التقنية 3: توطين الحالة

احتفظ بالحالة قريبة قدر الإمكان من حيث تُستخدم:

// ❌ حالة عامة لكل شيء
const useGlobalStore = create<GlobalState>((set) => ({
  user: null,
  theme: 'light',
  sidebarOpen: false,
  // ... 20 خاصية إضافية
}));

// ✅ التقسيم إلى مخازن/سياقات مركزة
const useAuthStore = create<AuthState>((set) => ({
  user: null,
  login: async (credentials) => { /* ... */ },
  logout: () => set({ user: null }),
}));

// المكون يشترك فقط فيما يحتاجه
function Sidebar() {
  const sidebarOpen = useUIStore(s => s.sidebarOpen);
  // يُعاد تصييره فقط عند تغيير sidebarOpen
}

التقنية 4: التحديثات المتفائلة

لا تجعل المستخدمين ينتظرون استجابات الخادم:

function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([]);

  const { mutate: toggleTodo } = useOptimisticMutation(
    (todo: Todo) => api.updateTodo({ ...todo, completed: !todo.completed }),
    {
      onMutate: (todo) => {
        const previous = todos;
        setTodos(todos.map(t => 
          t.id === todo.id ? { ...t, completed: !t.completed } : t
        ));
        return previous;
      },
      onError: (error, todo, previousTodos) => {
        if (previousTodos) setTodos(previousTodos);
        toast.error('فشل تحديث المهمة');
      },
    }
  );
}

التقنية 5: تقسيم الكود والتحميل الكسول

حمّل الكود فقط عند الحاجة:

// التقسيم على أساس المسار
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Reports = lazy(() => import('./pages/Reports'));

function App() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/reports" element={<Reports />} />
      </Routes>
    </Suspense>
  );
}

التقنية 6: التأخير والخنق

تحكم في معدل العمليات المكلفة:

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

function SearchComponent() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  // استدعاء API يُطلق فقط بعد توقف المستخدم عن الكتابة لـ 300ms
  const { data } = useQuery(
    ['search', debouncedQuery],
    () => searchApi(debouncedQuery),
    { enabled: debouncedQuery.length > 2 }
  );
}

التنميط والقياس

لا تحسّن عشوائياً - قس أولاً، حدد الاختناقات، ثم طبّق التقنية المناسبة.

الخلاصة

تحسين الأداء يتعلق باتخاذ مقايضات مدروسة:

1. أعد هيكلة المكونات قبل إضافة الحفظ
2. افترض القوائم الكبيرة بدلاً من تحسين العناصر الفردية
3. وطّن الحالة لتقليل نطاق إعادة التصيير
4. استخدم التحديثات المتفائلة لأداء محسوس أفضل
5. قسّم الكود لتقليل حجم الحزمة الأولية
6. أخّر/اخنق العمليات المكلفة

أفضل تحسين غالباً هو الذي لا تحتاجه - الكود البسيط والمنظم عادةً سريع بما فيه الكفاية.