הוקים מותאמים אישית ב-React: איך ליצור ולהשתמש ב-useApi

הוקים מותאמים אישית או custom hooks בעברית מדוברת הם קונספט ידוע למפתחי ריאקט והסביבה. 🚀

העיקרון פשוט - להפריד קוד ולוגיקה חוזרים לחתיכה נפרדת שתהיה ניתנת לשימוש חוזר. ככל שהפרויקט יחודי יותר, והקוד החוזר מורכב יותר ובשימוש תכוף יותר - ככה ההגיון להוציא את הקוד החוזר לhook שיהיה קל לתחזוקה וקיסטום (כיסתום?) הולך ונהיה הכרח. 🦄 ואחד ההוקים הקלילים והנפוצים ביותר (המקבילה של ארטיק קרח ענבים) הוא useApi - שמטרתו לחסוך את הכתיבה החוזרת של משיכת נתונים מהשרת טיפול בשגיאות וחיוון טעינה. כמובן שכאן המקום של כולכם לצרוח בתגובות על react query - אל תפריעו לעצמכם לעשות את זה אני מחכה לזה בקוצר רוח.

היתרונות - 👍

שליטה בכל אספקט של הבקשות לדוגמא הוספת headers באופן דיפולטיבי, baseurl, טיפול בשגיאות ייחודי לפי סטטוס שגיאה, ניהול העלאת קבצים עם חיווי התקדמות העלאה ועוד מליארד רעיונות איך לשדרג את ההוק הבסיסי הזה. אבל העיקרון הוא אם זה עובד אל תנסו לתקן את זה (אני מסתכל עליכם ארטיקים בטעמי במבה מתוקה, רצפה של תחנה מרכזית בית שאן וביגלה מלוח 🍘) ולא להעמיס לוגיקה שאתם לא משתמשים רק למקרה שאולי תצטרכו בעתיד - זה מסוג הדברים שבטווח הארוך יגרמו לכם לתלוש שיערות ולקוד טינופת.

חסרונות - 👎

לשימוש במקרה הספציפי הזה בספריות יעודיות יש יתרון של caching ועוד. אז כמו תמיד - הכל תלוי בנסיבות ובצורך שלכם.

הנחיות כלליות: 🤓

1. השתמשו במילה use בשם הפונקציה לחוות שזה hook. 2. השתמשו בשם שמסביר מה הפונקציה עושה ולא useCreate. 3. כתבו בצורה הכי קלה להבנה ושימוש כדי שתשתמשו בזה באמת באופן גנרי (אהמ אהמ). שאו ברכה 😊