6.8 useEffect תרגול

תרגול - useEffect

תרגיל 1 - כותרת דינמית

צרו קומפוננטה DynamicTitle עם:

• שדה טקסט שמאפשר למשתמש לכתוב טקסט
• ה-effect מעדכן את כותרת הדף (document.title) בכל שינוי בטקסט
• כשהשדה ריק, הכותרת חוזרת ל-"React App"
• הוסיפו cleanup שמחזיר את הכותרת ל-"React App" כשהקומפוננטה נמחקת

תרגיל 2 - שעון דיגיטלי

צרו קומפוננטה DigitalClock שמציגה שעון דיגיטלי:

• הציגו את השעה הנוכחית בפורמט HH:MM:SS
• השתמשו ב-setInterval שמתעדכן כל שנייה
• וודאו שה-interval מנוקה כראוי ב-cleanup
• הוסיפו כפתור "עצור/המשך" שעוצר ומפעיל את השעון

תרגיל 3 - שליפת נתונים

צרו קומפוננטה UserProfile שמקבלת userId כ-prop ומציגה פרטי משתמש:

• שלפו נתונים מ-https://jsonplaceholder.typicode.com/users/{userId}
• הציגו מצב טעינה (Loading...)
• הציגו הודעת שגיאה אם הבקשה נכשלה
• כשה-userId משתנה, שלפו את המשתמש החדש
• הציגו: שם, אימייל, טלפון, שם חברה

צרו קומפוננטת App שמכילה כפתורים לבחירת userId (1-5) ומציגה את UserProfile.

תרגיל 4 - שמירה ב-localStorage

צרו קומפוננטה Notes שמאפשרת לכתוב הערות:

• textarea לכתיבת הערה
• הערך נשמר ב-localStorage בכל שינוי (עם useEffect)
• בטעינה ראשונה, הערך נקרא מ-localStorage (עם lazy initializer)
• כפתור "נקה" שמוחק את ההערה ומנקה את ה-localStorage
• הציגו "נשמר אוטומטית" כשהנתונים נשמרים

תרגיל 5 - חיפוש עם debounce

צרו קומפוננטה DebouncedSearch שמחפשת משתמשים מ-API:

• שדה חיפוש שמפעיל חיפוש 500ms אחרי שהמשתמש הפסיק להקליד
• השתמשו ב-useEffect עם setTimeout ו-cleanup (clearTimeout) כדי ליצור debounce
• שלפו תוצאות מ-https://jsonplaceholder.typicode.com/users?q={searchTerm} (או סננו את כל המשתמשים לפי שם)
• הציגו מצב טעינה ותוצאות
• כשהשדה ריק, אל תשלחו בקשה

תרגיל 6 - מעקב אחרי גודל החלון

צרו קומפוננטה ResponsiveInfo שמציגה מידע על גודל החלון:

• הציגו את הרוחב והגובה הנוכחיים
• הציגו האם המסך "mobile" (מתחת ל-768px), "tablet" (768-1024), או "desktop" (מעל 1024)
• האזינו לאירוע resize עם useEffect ו-cleanup
• הציגו את מספר הפעמים שהמשתמש שינה את גודל החלון

שאלות

1. מה ההבדל בין useEffect(() => {...}) (בלי מערך תלויות) לבין useEffect(() => {...}, []) (מערך ריק)?
2. למה useEffect לא יכול להיות async? איך עוקפים את זה?
3. מה קורה אם שוכחים לנקות setInterval ב-cleanup? תארו את הבעיה.
4. למה צריך AbortController כשה-userId משתנה מהר? מה יכול לקרות בלעדיו?
5. מה זה "stale closure" ואיך עדכון פונקציונלי פותר את הבעיה?