כל UI אמיתי מכיל לפחות 4 מצבים שצריך לטפל בהם: טעינה, שגיאה, ריקות, ותוכן. אפליקציה שמטפלת רק בתוכן ולא בשאר - היא אפליקציה שבורה מחצי הזמן.
הדרך הנפוצה שבה זה נפגשת: developer מוסיף פיצ'ר חדש ובודק שהוא עובד. API מחזיר data, הכל נראה טוב. Production - הspinner לעולם לא מפסיק, או גרוע יותר, מוצג UI ריק בלי הסבר. הסיבה: לא טיפלו בerror state ובempty state.
זה שיעור שחשוב לא לדלג עליו. UI שמציג רק "happy path" הוא UI שנראה פשוט אבל שבור בפועל.
נניח שאתה מושך רשימת קורסים מ-API. מה מוצג:
- בזמן fetch - Spinner
- אם ה-fetch נכשל - הודעת שגיאה עם כפתור retry
- אם הרשימה ריקה - "עדיין אין קורסים"
- אם יש קורסים - הרשימה עצמה
ארבעה מצבים, ארבעה JSXs שונים. Conditional Rendering הוא המנגנון שמחבר ביניהם.