מה זה “Multiple Returns” ולמה זה טוב?

“Multiple Returns” הוא דפוס רינדור שבו מחזירים מוקדם (Early Return) UI שונה בהתאם למצב הנוכחי של הקומפוננטה: טעינה, שגיאה, אין נתונים, הצלחה וכן הלאה. במקום טרינריים עמוקים ו־if / else מקוננים, בודקים מצבים לפי סדר עדיפויות ומחזירים את ה־UI המתאים בשורות קצרות וברורות.

יתרונות מרכזיים

• קריאות מעולה: כל מצב מופרד לבלוק קטן שקל להבין ולתחזק.
• בקרה על הזרימה: עוצרים מוקדם במצבי ביניים/חריגים ולא “סוחבים” לוגיקה מיותרת.
• הפרדת אחריות: ניתן להוציא כל מצב לקומפוננטה קטנה (Loader, Error, Empty).
• התאמה טבעית ל־data fetching: במיוחד עם ספריות כמו React Query או Fetch רגיל.

מתי להשתמש?

• טעינה/שגיאה/ריק/הצלחה בעת הבאת נתונים.
• שערי גישה (Auth): לא מחובר → החזר מסך התחברות, אחרת המשך.
• Feature Flags: אם פיצ׳ר כבוי → החזר גרסה ישנה, אם דולק → החדשה.
• ולידציה של פרמטרים/נתיבים: פרמטר חסר/שבור → הודעה מתאימה.

חוקי זהב

• חוקי Hooks: כל ה־hooks חייבים להיקרא תמיד ובאותו סדר. אל תחזירו לפני שקראתם להוקים הדרושים לרנדר הזה.
• סדר בדיקות מומלץ: Loading → Error → Empty → Success.
• צמצום שכפול UI: אם כמה מצבים משתפים מבנה דומה, הפיקו רכיבי משנה (Loader, ErrorMsg, Empty).
• נגישות/UX: במצבי טעינה ארוכים שקלו Skeleton; במצבי שגיאה ספקו פעולה לתיקון (כמו “טען שוב”).

השוואה קצרה

if (isLoading) return <Loader/>;
if (error)     return <ErrorMsg/>;
if (!data)     return <Empty/>;
return <List data={data}/>;

return isLoading ? <Loader/> :
  error ? <ErrorMsg/> :
  !data ? <Empty/> :
  <List data={data}/>;

הערות ל־Next.js

• Server Components: אין hooks של לקוח, אבל עדיין אפשר “להחזיר מוקדם” (או להשתמש ב־notFound()/redirect()).
• Suspense/Streaming: אם אתם משתמשים ב־<Suspense> לטעינה, ה־fallback מטפל ב־Loading, ועדיין תוכלו להחזיר מוקדם ל־Error/Empty לפי צורך.

1) דוגמה בסיסית (Interactive)

החליפו מצב בעזרת הכפתורים ותראו שהקומפוננטה מחזירה מוקדם את ה-UI המתאים.

2) דוגמה כמו־אמיתית (סימולציית fetch)

מדמים בקשת רשת: תחילה טעינה, אח״כ שגיאה או נתונים. שימו לב לניקוי ה-setTimeout כדי למנוע עדכון state אחרי פירוק הקומפוננטה.