لقد وجدت طريقة للتخزين المؤقت لأداة الجلب في useSWR باستخدام useCallback في كود مصدر Gitroom.

الصورة أعلاه مأخوذة من Platform-analytics/render.analytics.tsx. دعونا نحاول فهم مقتطف الشفرة هذا.

سنستكشف كيفية تحسين جلب البيانات في تطبيقات React باستخدام خطاف useCallback مع useSWR. سنقوم بتحليل مقتطف الشفرة المقدم، وشرح أهمية التخزين المؤقت لوظيفة الجلب.

فهم الكود

دعونا نتعمق في الكود خطوة بخطوة:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

هنا، نقوم بتعريف تحميل دالة غير متزامنة داخل خطاف useCallback. تقوم هذه الوظيفة بجلب البيانات من نقطة نهاية محددة وتتعامل مع حالة التحميل. يضمن خطاف useCallback حفظ هذه الوظيفة وإعادة إنشائها فقط عندما تتغير التبعيات (التكامل والتاريخ).

بعد ذلك، نستخدم useSWR لإدارة جلب البيانات:

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

هنا، تم تكوين useSWR باستخدام مفتاح (/analytics-${integration?.id}-${date}) ووظيفة التحميل المحفوظة لدينا. تتحكم خيارات التكوين في سلوك إعادة التحقق من صحة البيانات.

كيف يمنع useCallback عمليات إعادة الجلب غير الضرورية

لفهم كيف يمنع useCallback عمليات إعادة الجلب غير الضرورية، نحتاج إلى التعمق في كيفية تعامل React مع مراجع الوظائف وكيفية عمل useSWR.

مراجع الوظائف في React

في React، في كل مرة يُعاد فيها عرض أحد المكونات، يُعاد إنشاء جميع الوظائف المحددة داخله. هذا يعني أنه بدون useCallback، سيتم إنشاء مثيل جديد لوظيفة التحميل الخاصة بك في كل عملية تصيير.

التأثير على استخدام SWR

useSWR هي مكتبة لجلب البيانات لـ React. ويستخدم مفتاحًا لتحديد البيانات ووظيفة الجلب لجلبها. يعتمد useSWR على استقرار مرجع وظيفة الجلب. إذا تغير المرجع، فقد يفسر useSWR ذلك على أنه إشارة إلى أن البيانات تحتاج إلى إعادة جلب، حتى لو لم يتغير المنطق الفعلي لأداة الجلب.

وهذا شرح مفصل:

1. بدون استخدام رد الاتصال:

const load = async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
};

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

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

مع استخدم رد الاتصال:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

من خلال تغليف وظيفة التحميل في useCallback، فإننا نضمن أنه لا يتم إعادة إنشائها إلا عندما تتغير تبعياتها (التكامل والتاريخ). هذا الاستقرار في مرجع الوظيفة يخبر useSWR أن وظيفة الجلب لم تتغير إلا إذا تغير التكامل أو التاريخ، وبالتالي منع عمليات إعادة الجلب غير الضرورية.

هل تريد معرفة كيفية إنشاء shadcn-ui/ui من الصفر؟ راجع الإنشاء من الصفر

ْعَنِّي:

الموقع الإلكتروني: https://ramunarasinga.com/

لينكد إن: https://www.linkedin.com/in/ramu-narasinga-189361128/

جيثب: https://github.com/Ramu-Narasinga

البريد الإلكتروني: [email protected]

إنشاء shadcn-ui/ui من الصفر

مراجع:

1. https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/components/platform-analytics/render.analytics.tsx#L25
2. https://github.com/search?q=repo:gitroomhq/gitroom useSWR&type=code
3. https://swr.vercel.app/docs/getting-started
4. https://react.dev/reference/react/useCallback