ما هي دالة use() الجديدة في React 19 وكيف تتعامل مع الـ Promises والـ Context؟

Question

تقدم السؤاللم أبدأقيد المراجعةمتقن

تكرار السؤال: …

Answer 1

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

دالة use() تقبل إما Promise أو Context، وتتميز عن باقي الـ Hooks بإمكانية استدعائها مشروطة داخل جمل if أو حلقات التكرار، وتتكامل تلقائياً مع Suspense.

الشرح

تعتبر use() استثناءً فريداً لقواعد الـ Hooks الكلاسيكية، حيث يمكنك استدعاؤها داخل جمل شرطية. عند تمرير Promise لها، فإنها توقف تصيير المكون حتى يتم حل الـ Promise (معتمدة على Suspense)، وعند تمرير Context فإنها تقرأ قيمته تماماً مثل useContext ولكن بشكل مشروط.

مثال بالكود

import { use } from 'react';

function UserBadge({ userPromise, shouldShow }: { userPromise: Promise<User>; shouldShow: boolean }) {
  if (!shouldShow) return null; // استدعاء مشروط سليم تماماً مع use()

  const user = use(userPromise);
  return <span>{user.name}</span>;
}

أخطاء شائعة

إنشاء الـ Promise داخل جسم المكون في كل render بدلاً من تمريره من خادم أو كاش، مما يسبب حلقة تعليق لا نهائية.

أسئلة متابعة

المصادر

React docs — use