جلب البيانات الحديث في React: ما وراء useEffect

Majd Muhtaseb11‏/05‏/20257 دقيقة

جلب البيانات الحديث في React: ما وراء `useEffect`

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

قيود `useEffect`

في حين أن useEffect يوفر آلية أساسية لجلب البيانات، فإنه غالبًا ما يتطلب تنفيذًا يدويًا لأنماط جلب البيانات الشائعة:

التخزين المؤقت: يتم إعادة جلب البيانات في كل تركيب للمكون أو تغيير التبعية ما لم يتم تخزينها مؤقتًا يدويًا.
معالجة الأخطاء: يجب إدارة حالات الخطأ يدويًا.
إعادة التحقق: يتطلب تنفيذ إعادة التحقق في الخلفية للبيانات القديمة جهدًا إضافيًا.
حالات السباق: يعد تنظيف العمليات غير المتزامنة أمرًا بالغ الأهمية لتجنب حالات السباق.

تقديم `SWR`

SWR (Stale-While-Revalidate) عبارة عن مكتبة React Hooks طورتها Vercel لجلب البيانات عن بُعد. يبسّط جلب البيانات مع التخزين المؤقت المدمج وإعادة التحقق ومعالجة الأخطاء.

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher)

  if (error) return <div>فشل التحميل</div>
  if (isLoading) return <div>جاري التحميل...</div>

  return <div>مرحباً {data.name}!</div>
}

في هذا المثال، يتعامل useSWR مع جلب البيانات والتخزين المؤقت وإعادة التحقق من نقطة النهاية /api/user. الدالة fetcher عبارة عن غلاف بسيط حول fetch يحلل استجابة JSON. يقوم SWR تلقائيًا بإعادة التحقق من البيانات في الخلفية، مما يضمن بقاء واجهة المستخدم محدثة.

React Query

React Query هي مكتبة شائعة أخرى توفر جلبًا قويًا للبيانات والتخزين المؤقت والمزامنة وتحديث حالة الخادم. يقدم ميزات تتجاوز SWR مثل:

الطفرات (Mutations): طريقة مبسطة للتعامل مع طلبات POST و PUT و DELETE.
الترقيم والتحميل اللانهائي (Pagination & Infinite Loading): مساعدون لجلب وعرض مجموعات بيانات كبيرة بكفاءة.
تحديثات الخلفية: يحافظ على تحديث البيانات حتى عندما لا يستخدم المستخدم التطبيق بنشاط.

import { useQuery } from '@tanstack/react-query'

const fetchTodos = async () => {
  const response = await fetch('/api/todos')
  return response.json()
}

function Todos() {
  const { isLoading, error, data } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })

  if (isLoading) return 'جاري التحميل...'

  if (error) return 'حدث خطأ: ' + error.message

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

هنا، يقوم useQuery من React Query بتبسيط جلب البيانات والتخزين المؤقت ومعالجة الأخطاء لنقطة النهاية /api/todos. مفتاح الاستعلام ضروري لـ React Query لتحديد وإدارة الاستعلام بشكل فريد.

خاتمة

إن تجاوز useEffect واعتماد مكتبات مثل SWR أو React Query يمكن أن يحسن بشكل كبير كفاءة وقابلية صيانة جلب البيانات في تطبيقات React. توفر هذه المكتبات ميزات مدمجة للتخزين المؤقت وإعادة التحقق ومعالجة الأخطاء والمزيد، مما يسمح للمطورين بالتركيز على بناء الميزات بدلاً من إدارة تعقيدات جلب البيانات. اختر المكتبة التي تناسب احتياجات مشروعك وتعقيده. كلاهما يقدمان حلولًا ممتازة لتطوير React الحديث.