לדלג לתוכן

7.2 הוקים מותאמים אישית תרגול

תרגול - הוקים מותאמים אישית - Custom Hooks

תרגיל 1 - הוק useCounter

צרו הוק מותאם אישית לניהול מונה.

דרישות:
- הוק שמקבל ערך התחלתי, ערך מינימלי וערך מקסימלי (אופציונליים)
- מחזיר: count, increment, decrement, reset, setCount
- הפונקציות increment ו-decrement לא חורגות מהגבולות
- צרו קומפוננטה שמשתמשת בהוק ומציגה את המונה עם כפתורים

תרגיל 2 - הוק useForm

צרו הוק לניהול טפסים.

דרישות:
- הוק שמקבל ערכים התחלתיים ופונקציית ולידציה
- מחזיר: values, errors, handleChange, handleSubmit, reset, isValid
- הפונקציה handleChange מעדכנת שדה ספציפי לפי name
- הולידציה רצה על כל שינוי ועל submit
- צרו טופס הרשמה עם שדות: שם (חובה, לפחות 2 תווים), אימייל (חובה, פורמט תקין), סיסמה (חובה, לפחות 6 תווים), אישור סיסמה (חייב להתאים לסיסמה)

תרגיל 3 - הוק useAsync

צרו הוק לניהול פעולות אסינכרוניות.

דרישות:
- הוק שמקבל פונקציה אסינכרונית
- מחזיר: execute, data, loading, error, reset
- הפונקציה execute מריצה את הפעולה האסינכרונית ומנהלת את ה-state
- תמיכה בביטול (אם הקומפוננטה מתפרקת בזמן הטעינה, לא לעדכן state)
- צרו קומפוננטה שמדמה טעינת נתונים עם כפתור לטעינה מחדש

תרגיל 4 - הוק useKeyPress

צרו הוק שמזהה לחיצות מקשים.

דרישות:
- הוק שמקבל מקש (או שילוב מקשים) ופונקציית callback
- תמיכה ב-modifier keys (Ctrl, Shift, Alt)
- אפשרות להגדיר אם ההוק פעיל או לא
- צרו קומפוננטה שמגיבה ל: Escape (סגירת modal), Ctrl+S (שמירה), מקשי חיצים (ניווט)

תרגיל 5 - הוק useIntersectionObserver

צרו הוק שעוטף את Intersection Observer API.

דרישות:
- הוק שמקבל אפשרויות (threshold, rootMargin) ומחזיר ref ו-isIntersecting
- השתמשו בהוק לבניית: רשימה אינסופית (טעינת פריטים נוספים כשמגיעים לסוף), אנימציית כניסה (אלמנטים שמופיעים כשנגללים אליהם)
- הדגימו שימוש בשני המקרים

תרגיל 6 - הוק useWebSocket (מתקדם)

צרו הוק לניהול חיבור WebSocket.

דרישות:
- הוק שמקבל URL ומנהל חיבור WebSocket
- מחזיר: sendMessage, lastMessage, connectionStatus, connect, disconnect
- תמיכה ב-reconnect אוטומטי עם backoff
- ניקוי החיבור כשהקומפוננטה מתפרקת
- צרו קומפוננטת צ'אט פשוטה שמשתמשת בהוק (אפשר לדמות שרת עם console.log)

שאלות

  1. מתי כדאי לחלץ לוגיקה להוק מותאם אישית ומתי עדיף להשאיר אותה בקומפוננטה?
  2. מה קורה כששני instances של אותו הוק רצים באותה קומפוננטה? האם הם חולקים state?
  3. למה חשוב שהשם של הוק מותאם אישית יתחיל ב-use? מה קורה אם לא?
  4. כיצד אפשר לבדוק הוק מותאם אישית שתלוי ב-DOM API (כמו useMediaQuery)?
  5. מה היתרון של החזרת אובייקט מהוק לעומת החזרת מערך? מתי נעדיף כל גישה?