ما هي أحداث دورة حياة الشاشة في React Navigation (useFocusEffect و useIsFocused)؟

الإجابة المختصرة

نظراً لأن الشاشات تظل معلقة في الذاكرة داخل مكدس الـ Stack عند الانتقال للأمام، فإن useEffect العادي لا يعمل عند الرجوع؛ لذلك نستخدم useFocusEffect لتشغيل المنطق في كل مرة تصبح فيها الشاشة نشطة ومعروضة.

الشرح

عندما ينتقل المستخدم من الشاشة A إلى الشاشة B، تظل الشاشة A مركبة في الشجرة (Mounted) دون إزالتها لتسهيل الرجوع الفوري. إذا كنت تريد تحديث البيانات أو إعادة الاستماع لحدث ما بمجرد عودة المستخدم للشاشة، نستخدم useFocusEffect مقترنة بـ useCallback لإعادة تشغيل الكود وتنظيفه فور مغادرة الشاشة.

مثال بالكود

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

function UserProfileScreen() {
  useFocusEffect(
    useCallback(() => {
      // ينفذ فور أن تصبح الشاشة في بؤرة التركيز
      fetchLatestProfileData();

      return () => {
        // دالة تنظيف تنفذ عند فقدان التركيز
        stopPolling();
      };
    }, [])
  );

  return <View>{/* ... */}</View>;
}

أخطاء شائعة

• نسيان تغليف الدالة داخل useFocusEffect بـ useCallback مما يسبب تشغيلها في كل إعادة تصيير بلا توقف.

أسئلة متابعة

• ما هي استراتيجيات تحسين الذاكرة وتجنب تراكم الشاشات في الـ Navigation Stack (Memory Pressure)؟
• ما هو الفرق الجوهري بين Native Stack Navigator و Stack Navigator في React Navigation؟

المصادر

• React Navigation docs — useFocusEffect
• React Navigation docs — Navigation lifecycle