איך להשתמש ב- Suspense בריאקט

איך עובד Suspense

אז כדי שנבין יותר טוב איך זה עובד צריך להבין איך ריאקט מאחורי הקלעים מרנדרת את הקומפוננטות, ריאקט מרנדרת עץ קומפוננטות שדרכו מיוצר לנו אוביקט של הDOM ,הBrowser מציג לנו את הדף ע"י עיבוד האובייקט.
אבל מה קורה ברגע שאחת הקומפוננטות צריכה להתעדכן כתוצאה מקוד אסינכרוני שעתיד להציג את המידע בקומפוננטה.
אז כאן Suspense נכנס לפעולה ומאפשר לנו לעצור את הרינדור של הקומפוננטה ולהציג לנו מידע חלופי עד שהקוד האסינכרוני יסתיים ובסופו להציג לנו את הקומפוננטה לאחר סיום התהליך.

אופן השימוש

Suspense מתנהג כHOC ועוטף את הקומפוננטה המכילה את הקוד האסינכרוני,
Suspense מקבל props בשם fallback שמכיל קומפוננטה או קטע קוד שירוץ בזמן שאנו מחכים שהפעולה האסינכרונית תסתיים.

<Suspense fallback={<Loading />}>
  <fetchComponent />
</Suspense>

מטרת השימוש

שמדברים על ניהול loading states בריאקט זה יכול להיות עבודה מורכבת ונוטה לגרום לשגיאות,
suspense נוצר כדי לספק חווית משתמש בטעינה דאטה אסינכרונית,
ולספק חווית פיתוח בניהול loading states של דאטה אסינכרונית.

פיצ'רים

React.lazy

lazy - מאפשר לנו לחלק את הקוד באפליקציה לנתחים קטנים (code-spliting)
ולטעון רק את החלקים שאנו עושים בהם שימוש בעת השימוש באפליקציה,
היכולת הזאת מקטינה לנו את כמות הקבצים שאנו זקוקים לטעון בטעינה הראשונית של האפליקציה (bundle), ומספק לנו שיפור ביצועים וחווית משתמש, מתי שאנו נבקש לעבור לדף אחר הוא יטען אותו ויציג לנו אותו.

כלומר אם יש לי דף של About באפליקציה שלי ובטעינה הראשונית אני לא עושה בו שימוש lazy יעזור לי לחסוך את הקוד הזה באתחול האפליקציה ורק לאחר שהמשתמש יבקש את הדף הוא יתרגם אותו ויציג למשתמש.
היכולת הזאת יצאה בגרסה 16.6 של ריאקט ביחד עם Suspense ומשתמשת בו כConvention לניהול הloading states בזמן הרצת הקוד של הדף המבוקש.

import { Suspense } from 'react';
const fetchComponent = lazy(() => import('./fetchComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<Loading />}>
        <fetchComponent />
      </Suspense>
    </div>
  );
}

Error Boundaries

גבולות שגיאה - למדנו שהשימוש של Suspense זה בהמתנה לקוד האסינכרוני שיסתיים
אבל מה קורה שחוזרת שגיאה מהקוד האסינכרוני שהBrowser צריך לעבד?
הUI שלנו ישבר ונקבל דף לבן, כדי להימנע מזה יש לנו את Error Boundaries שתפקידו לשמש כגבול לפני שבירת הUI ויחזיר שגיאה שמאופיינת על ידינו אל המשתמש.

אז איך משתמשים בזה

השימוש של זה בדומה לSuspense כHOC שעוטף את הקומפוננטה שמכילה את הקוד האסינכרוני,
Error Boundaries מקבל props בשם fallback או FallbackComponent שמכילה את מבנה השגיאה שנרצה להחזיר למשתמש,
בדוגמא שלנו נשתמש בספרייה של react-error-boundary.

import { ErrorBoundary } from 'react-error-boundary'
import { Suspense } from 'react'


function App() {
  return(
        <div>
      <h1>Leo's App</h1>
      <ErrorBoundary fallback={<p>something get wrong</p>}>
        <Suspense fallback={<Loading />}>
          <DataFetchingComponent />
        </Suspense>
      </ErrorBoundary>
    </div>
  )
}
export default App

אפשר גם להכניס כמה פיצ'רים בניהול השגיאה, onReset = props שמקבל פונקציה שתופעל בעת לחיצת על כפתור ותרנדר לנו מחדש את הקומפוננטה.

 onReset={(details) => {
    // Reset the state of your app so the error doesn't happen again
  }}

FallbackComponent - שמרנדר קומפוננטה כfallback במקרה שיש שגיאה

  FallbackComponent={Fallback}

לבסוף Suspense יצא כחלק מסדרה של concurrent mode זה סדרה של קומפוננטה שבאו ליעל חלק מהחסרונות ברינדור קומפוננטות בצורה אסינכרונית ולשפר ביצועים בריאקט,
Next.js - עושה שימוש בפיצ'רים האלו built in Suspense - בתצורת קומפוננטה של loading, Error-Boundary - בתצורת קומפוננטה של Error, וCode-spliting built in.