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

يعمل React Query على تبسيط التعامل مع حالات التحميل والحالات العامة إلى حد كبير. في الواقع، يتجنب React Query الطلبات المتكررة، وبالتالي تحسين أداء التطبيق.

لنأخذ مثالاً على التعليمات البرمجية التي تنفذ حالة التحميل في تطبيقنا.

حدد رابطًا لجلب قائمة المستخدمين:

export const useUsers = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return response.json();
    },
  });

  return {
    users: data?.slice(0, 4) || [],
    isLoading,
  };
};

هنا، نحضر أربعة مستخدمين باستخدام useQuery. نضيف تأخيرًا لمدة ثانيتين لتوضيح حالة التحميل. ثم نعيد البيانات وقيمة منطقية لحالة التحميل.

من ناحية المكون، لنقم بإنشاء مكون باسم مثال:

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  if (isLoading) {
    return 
Loading...
;
  }

  return (
    

      

        
Users
        

          Add users
        
      
      
  );
};

في هذا المكون، نستخدم الخطاف الخاص بنا لجلب قائمة المستخدمين. قبل تقديم العرض، نقوم بإجراء "عودة مبكرة" مع رسالة تحميل، ثم نعرض العنوان والزر والمستخدمين.

القيود والبدائل

ومع ذلك، يتطلب كل اتصال عبر الشبكة إدارة واضحة لحالة التحميل. إذا لم يتم تحليل الكود، فقد تكون بعض عناصر العرض في انتظار عرضها، مثل العنوان والإجراء.

إليك البديل لتجنب حجب العرض:

import "./App.css";
import UsersList from "./UsersList";
import { useUsers } from "./useUsers";

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      

        
Users
        

          Add users
        
      
      {isLoading ? 
Loading...
 : }
    
  );
};

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

الحل المثالي: مكون تحميل عام

الحل الأكثر إبداعًا هو إنشاء مكون يعرض رسالة التحميل الخاصة بنا أو المكون الرئيسي الخاص بنا بناءً على متغير.

type Props = PropsWithChildren;

const LoadingWrapper = ({ children, isLoading }: Props): JSX.Element => {
  if (isLoading) {
    return 
Loading...
;
  }

  return {children}>;
};

الاستخدام في المكون الخاص بنا

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      ...
      
  );
};

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

اكتشف سحر التشويق

ولكن الآن، إذا أخبرتك أن هذا المكون الذي أنشأناه للتو مدمج بالفعل في React. والأفضل من ذلك، إنه سحري! لا مزيد من الإدارة اليدوية لحالات isLoading!

كيف؟

مع تعليق React (إصدار React >= 16.6)، يصبح كل شيء أبسط وأنظف. يتيح لك Suspense أن تعلن بوضوح لـ React أن أحد المكونات ينتظر بيانات غير متزامنة، وتتولى React إدارة كل شيء من أجلنا.

تنفيذ useSuspenseQuery

فلنستخدم useSuspenseQuery لإدارة حالة التحميل تلقائيًا. وإليك كيفية القيام بذلك:

ربط لجلب المستخدمين

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery(
    ...
  );

  return {
    users: data?.slice(0, 4) || [],
    // Without the isLoading
  };
};

الاستخدام في المكون مع التشويق

الآن، دعنا نقوم بتحديث مكون المثال الخاص بنا لاستخدام Suspense:

const UsersComponent = (): JSX.Element => {
  const { users } = useUsersSuspense();

  return ;
};

const Example = (): JSX.Element => {
  return (
    

      

        
Users
        

          Add users
        
      
      Loading...
}>
        
  );
};

مزايا التشويق

باستخدام Suspense، نقوم بمركزية إدارة حالة التحميل في مكان واحد، مما يجعل الكود أكثر قابلية للقراءة والصيانة. يتم عرض خيار Suspense الاحتياطي تلقائيًا طالما أن البيانات غير متوفرة، مما يلغي الحاجة إلى إدارة حالات isLoading يدويًا.

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

خاتمة

يُحدث استخدام Suspense وuseSuspenseQuery ثورة في إدارة حالات التحميل في تطبيقات React. لا يعمل هذا الأسلوب على تبسيط التعليمات البرمجية فحسب، بل يعزز أيضًا تجربة المستخدم من خلال ضمان العرض السلس والمتسق. يعد الانتقال من useQuery إلى useSuspenseQuery تطورًا طبيعيًا لتطبيقات أنظف وأكثر كفاءة.

بالإضافة إلى ذلك، فإن دمج Suspense يشجع فرق التطوير على تحليل التعليمات البرمجية الخاصة بهم. في الختام، فإن اعتماد Suspense وuseSuspenseQuery ليس مجرد تحسين تقني، ولكنه أيضًا خطوة نحو ممارسات تطوير أكثر صحة وفعالية.

النشرة الإخبارية الخاصة بي :D