كيف تجلب البيانات في React وتتجنب تضارب الاستجابات؟

Question

Accepted Answer

يستخدم الأسلوب الأساسي `useEffect`، لكن عليك التعامل مع **التنظيف** و**الاستجابات غير المرتبة**، وإلا ستحصل على بيانات قديمة وتحذيرات.

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // cancel the in-flight request when id changes/unmounts
  }, [id]);
}
```

## تضارب الاستجابات الذي يمنعه هذا

قل أن `id` يتغير بسرعة من `1` إلى `2`. بدون إلغاء، كلا الطلبين قيد الإرسال. إذا كان الطلب `1` بطيئًا وحل **بعد** الطلب `2`، ستعرض بيانات المستخدم `1` للمستخدم `2`:

```text
fetch(1) ───────────(slow)──────▶ setUser(user1)  ❌ shown last, but wrong
fetch(2) ──(fast)──▶ setUser(user2)
```

إلغاء الطلب السابق (التنظيف) يحل هذا. نمط العلم المنطقي الأقدم (`let active = true; ... if (active) setUser(...)`) يحقق نفس الشيء بتجاهل الاستجابات القديمة.

## في التطبيقات الحقيقية، استخدم مكتبة

جلب البيانات يدويًا يصبح متكررًا ويفتقد التخزين المؤقت/إعادة المحاولة. **React Query (TanStack Query)** أو **SWR** تتعامل مع حالات التحميل/الخطأ والتخزين المؤقت والتحقق من التكرار وإعادة الجلب في الخلفية و stale-while-revalidate بالنسبة لك:

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

مع الأطر مثل Next.js، محملات البيانات على جانب الخادم غالبًا ما تكون مفضلة.