‏react-call: کامپوننت‌ت رو مثل تابع async صدا بزن

این مقاله react-call رو معرفی می‌کنه، یه کتابخانه که با تابع createCallable() یه کامپوننت React رو به چیزی تبدیل می‌کنه که می‌تونی مثل یه تابع async صداش بزنی و await کنی تا با یه مقدار جواب بده. به گفتهٔ مستندات، این الگو برای هر UIای که مفهوماً یه مقدار به caller برمی‌گردونه خوبه: دیالوگ تأیید، مودال فرم، toast، نوتیفیکیشن، context menu و picker. خود کتابخانه زیر یک کیلوبایته، بدون وابستگی، و از SSR و React Native پشتیبانی می‌کنه.

راه‌اندازیش سه مرحله‌ست. اول کامپوننت رو با createCallable تعریف می‌کنی؛ به کامپوننتت یه prop ویژه به اسم call می‌رسه که متد end() رو داره و باهاش call رو تموم می‌کنی و یه جواب برمی‌گردونی (مثلاً call.end(true)). state و hookها و بقیهٔ امکانات React هم کاملاً مجازن. مرحلهٔ دوم اینه که خود Callable رو یه جای قابل‌مشاهده (مثلاً تو App.tsx) mount می‌کنی؛ این نقطهٔ mount به همهٔ callها گوش می‌ده و callهای فعال رو رندر می‌کنه. مرحلهٔ سوم صدا‌زدن و await کردنشه:

const accepted = await Confirm.call({ message: 'Continue?' })

نویسنده چند قابلیت پیشرفته رو هم توضیح می‌ده. پرامیسی که از call() برمی‌گرده رو می‌تونی برای پایان‌دادن به call از سمت caller (مثلاً تو یه event subscription) یا برای آپدیت propهای call روی همون پرامیس استفاده کنی. اگه آرگومان پرامیس رو حذف کنی، عملیات روی همهٔ callهای فعال اعمال می‌شه. یه متد upsert() هم هست که وقتی فقط یه نمونه باید فعال باشه (مثل toast یا حالت loading) به کار می‌ره: اگه نمونه‌ای فعال نباشه می‌سازه، وگرنه همون نمونه رو آپدیت می‌کنه و روی callهای معمولی اثر نمی‌ذاره.

برای انیمیشن خروج، کافیه مدت‌زمان انیمیشن رو به‌عنوان آرگومان دوم به createCallable بدی و از بولین call.ended برای اعمال کلاس CSS انیمیشن استفاده کنی. می‌شه propهای جدا از call رو هم از طریق Root پاس داد که توی کامپوننت از طریق call.root در دسترسن؛ مناسب وقتی که می‌خوای یه دادهٔ مشترک رو به همهٔ callها بدی.

برای جریان‌های mutation یه hook به اسم useMutationFlow از react-call/mutation-flow هست که یه call رو به یه action ناهمگام وصل می‌کنه و state مربوط به pending رو خودش مدیریت می‌کنه. نکتهٔ ظریفش اینه که چون بستن call به call.end() صریح نیاز داره، اگه mutationFn به end نرسه دیالوگ باز می‌مونه و کاربر می‌تونه بدون از‌دست‌دادن جاش دوباره تلاش کنه. این mutationFn به‌صورت تایپ شده و payload به‌صورت end-to-end از callsite تا handler تایپ‌سیف می‌مونه. در ضمن createCallable با Fast Refresh سازگاره و با ست‌کردن displayName (یا پلاگین Vite که خودش این خط رو inject می‌کنه) می‌تونی کاری کنی دیالوگ باز موقع ذخیرهٔ سورس خودش باز بمونه.

نکات کلیدی:

• createCallable() یه کامپوننت React رو قابل‌await می‌کنه و با call.end(value) مقدار برمی‌گردونه
• مناسب دیالوگ تأیید، مودال، toast، نوتیفیکیشن و picker؛ زیر ۱ کیلوبایت، بدون وابستگی، با SSR و React Native
• متد upsert() برای UIهای singleton مثل toast و حالت loading
• useMutationFlow جریان mutation رو با مدیریت pending و امکان retry بدون بستن دیالوگ وصل می‌کنه
• با Fast Refresh سازگاره و با displayName دیالوگ باز موقع ذخیره حفظ می‌شه