العودة للمقالات

جلب البيانات الحديث في React: وداعًا لـ useEffect، مرحبًا بـ React Query/TanStack Query

Majd Muhtaseb28‏/04‏/20258 دقيقة

مشكلة useEffect في جلب البيانات

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

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      setIsLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (error) {
        setError(error);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, [userId]);

  if (isLoading) return <p>جاري التحميل...</p>;
  if (error) return <p>خطأ: {error.message}</p>;
  if (!user) return <p>لم يتم العثور على مستخدم.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>البريد الإلكتروني: {user.email}</p>
    </div>
  );
}

export default UserProfile;

سرعان ما يصبح هذا المثال البسيط غير عملي مع المتطلبات الأكثر تعقيدًا مثل ترقيم الصفحات والتحديثات المتفائلة والعرض من جانب الخادم.

تقديم React Query (TanStack Query)

يوفر React Query (المعروف الآن باسم TanStack Query) حلاً قويًا وأنيقًا لإدارة حالة الخادم في تطبيقات React الخاصة بك. فهو يتعامل مع التخزين المؤقت والتحديثات في الخلفية وإعادة المحاولات والمزيد، مما يقلل بشكل كبير من التعليمات البرمجية القياسية.

مثال بسيط مع React Query

أولاً، قم بتثبيت المكتبة:

npm install @tanstack/react-query

الآن، دعنا نعيد كتابة مكون UserProfile باستخدام TanStack Query:

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

async function fetchUser(userId) {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response.json();
}

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  });

  if (isLoading) return <p>جاري التحميل...</p>;
  if (error) return <p>خطأ: {error.message}</p>;
  if (!user) return <p>لم يتم العثور على مستخدم.</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>البريد الإلكتروني: {user.email}</p>
    </div>
  );
}

export default UserProfile;

التحسينات الرئيسية:

• الإيجاز: الكود أنظف وأسهل للقراءة.
• التخزين المؤقت: يقوم React Query تلقائيًا بتخزين البيانات التي تم جلبها مؤقتًا. سيتم تقديم الطلبات اللاحقة لنفس المستخدم من ذاكرة التخزين المؤقت، مما يحسن الأداء.
• التحديثات في الخلفية: يمكن لـ React Query إعادة جلب البيانات تلقائيًا في الخلفية، مما يضمن أن واجهة المستخدم الخاصة بك محدثة دائمًا.
• التعامل مع الأخطاء: تم تبسيط مركزية معالجة الأخطاء.
• إعادة المحاولات التلقائية: يمكن لـ React Query إعادة محاولة الطلبات الفاشلة تلقائيًا.
• أدوات المطور: يوفر TanStack Query ملحقًا رائعًا لأدوات المطور لفحص الاستعلامات والتغييرات الخاصة بك.

أبعد من الأساسيات

يقدم React Query مجموعة واسعة من الميزات، بما في ذلك:

• التعديلات (Mutations): للتعامل مع التحديثات والإضافات والحذف.
• ترقيم الصفحات والاستعلامات اللانهائية: إدارة مجموعات البيانات الكبيرة بكفاءة.
• التحديثات المتفائلة: تحسين تجربة المستخدم عن طريق تحديث واجهة المستخدم على الفور قبل أن يؤكد الخادم التغيير.
• دعم العرض من جانب الخادم (SSR): تكامل سلس مع أطر عمل SSR.

خاتمة

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