محمدحسین اله‌دادیان
محمدحسین اله‌دادیان
خواندن ۲ دقیقه·۵ سال پیش

React HOC برای داشتن early return در react hooks ها

بعد از اینکه شروع به استفاده از react hook کردم به مشکلی برخوردم و اون این بود که خیلی وقت ها در تابع رندر پیج ها وقتی دیتا اش هنوز از سرور نیومده بود از `return null` استفاده میکردم خب بعد از شروع استفاده از hook ها به مشکلی خوردم و اون این بود که تمام هوک ها و کاستوم هوک ها را باید قبل از کاندیشن اول و `return null` یا به اصطلاح early return استفاده میکردم و خب این مشکلی را برای من بوجود میاورد بعضی وقت ها کاستوم‌هوک ها به اون انتیتی یا ابجکتی که قرار بود از سرور بیاد نیاز داشتن یا بیشتر وقت ها کال‌بک فانکشن هام این انتیتی را احتیاج داشتن و جزو dependency هاشون بود

برای همین شروع کردم به گشتن دنبال یه راه‌حل و خب متاسفانه ری‌اکت هیچ‌گونه راه حلی برا این مسئله ارائه نداده بود و بهترین راه‌حلی که پیدا کردم این بود که تمام محتویات بعد از early return را به یک کامپوننت دیگه منتقل کنیم و دیتا هایی که لازم داره را بصورت پراپز ورودی بگیره مثل این مثال خب با توجه به اینکه این طرز نوشتن کامپوننت ها برای خیلی ها از جمله خودم خیلی ناخوشایند و کثیف بنظر میرسید شروع کردم به نوشتن یکی HOC برای این کار که لینک اش را در پایین با شما به اشتراک میزارم

* خبر خوش برای typescript کار ها اینه که این لایبری به خوبی تایپینگ های کامپوننت را رعایت میکنه


ادرس لایبری در npm :
https://www.npmjs.com/package/with-valued-data

اگه انتقادات یا پیشنهادی داشتید حتما با من در میان بذارید

typescriptreacthook
شاید از این پست‌ها خوشتان بیاید