ماهو شرح الخطاف React navigation -- useFocusEffect

في الجزء الأول من الأكواد الخاص ب useEffect من المعروف أن هذا ال hook يتم تنفيذه مرة واحدة فقط عند تحميل المكون و في المثال الذي أرفقته عند تحميل هذا المكون يقوم useEffect بتغيير قيمة خطاف الحالة fetching إلى true ثم يقوم بجلب البيانات الخاصة بالمنتجات عن تطريق الدالة fetchProducts و نقوم بالتقاط أي أخطاء قد تحدث في عملية جلب بيانات المنتجات هذه و نجعل قيمة خطاف الحالة error تأخذ قيمة رسالة الخطأ و هذا يتم باستخدام التابع catch في النهاية بعد أن يتم جلب البيانات الخاصة بالمنتجات بطريقة صحيحة نقوم بتغيير قيمة خطاف الحالة fetching إلى false و هذا الجزء الخاص بالتابع finally.

أما في الجزء الثاني من الأكواد الخاص ب useFocusEffect، فهو يعتبر HOOK خاص ب React Navigation. يستخدم هذا الخطاف في التطبيقات عندما نريد إضافة side-Effect، و هذه التأثيرات الجانبية قد تتضمن أشياء مثل إضافة مستمع أحداث، أو جلب بيانات، ....إلخ.

مثلًا في حالتنا التأثير الجانبي هو إعادة التحميل. Refresh.

و الخطاف useFocusEffect مماثل للخطاف useEffect. الفرق الوحيد بينهما هو أن useFocusEffect يعمل إذا كنا نركز على الصفحة حاليًا.و التأثير سيعمل عندما تتغير الاعتماديات التي يتم تمريرها React.useCallback"خطاف"، مثلًا ستعمل عند عملية ال render الابتدائية (if the screen is focused) و أيضًا إذا تغيرت الاعتماديات.

import { useFocusEffect } from '@react-navigation/native';

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = API.subscribe(userId, user => setUser(user));

      return () => unsubscribe();
    }, [userId])
  );

  return <ProfileContent user={user} />;
}

إذا لم تقم بتغليف التأثير الخاص بك داخل الخطاف React.useCallback، سيم تنفيذ التأثير في كل عملية render عندما تكون الشاشة تحت التركيز.