פתחו כל codebase React בן שנה ומעלה ותמצאו את אותם patterns מוכפלים: קוד שקורא ל-localStorage ב-5 components שונים, 3 מקומות שמגדירים loading, error, data state לפני כל fetch, 4 components עם אותו debounce logic לsearch. אף אחד לא ישב וחשב "אני מכפיל קוד" - זה קרה בהדרגה. Custom hooks הם הפתרון.
Custom hooks שינו את האופן שבו מחשבים על reuse ב-React. לפני hooks (עד React 16.8), הדרך לשתף logic הייתה Higher-Order Components או Render Props - שני patterns שיצרו component tree מקונן ומבלבל. Hooks הם פשוטים הרבה יותר: פונקציה שקוראת לhooks ומחזירה ערך. אין JSX, אין wrapper, אין magic.
Custom hook הוא function JavaScript רגילה שמתחילה ב-use ויכולה לקרוא ל-hooks פנימיים. זה כל ההגדרה. ה-power נמצא בפשטות הזו.
Anatomy of a custom hook
use*prefixחובה - מאפשר ל-ESLint plugin לאכוף את כללי ה-hooksfunction bodylogicקורא ל-useState / useEffect / hooks אחרים בtop levelreturnapiערכים, setters או tuple - בדיוק מה ש-component יקבל