הצרה עם בעיות ביצועים היא שהרבה פעמים קשה למצוא את הגורם, וכשכבר מוצאים הרבה פעמים קשה לתקן. עבורי העובדה שב React יש דרך מאוד פשוטה למצוא ולתקן בעיות ביצועים היא אחת הסיבות המרכזיות לבחור ב Framework.

ב React יש לכם בסך הכל שני מקומות לטעות בכל הקשור לביצועים: או שאתם מרנדרים יותר ממה שצריך, או שפעולת render שלכם לוקחת יותר מדי זמן. מאחר וכמעט תמיד מדובר בבעיה הראשונה נתחיל מחיפוש render-ים מיותרים.

1. כמה קריאות render צריך

התוכנית בדוגמא הבאה מציגה בצבע ירוק בהיר את כל המספרים שמתחלקים במספר מסוים (ואפשר למעלה לשנות את המספר):

כמה קריאות ל render אתם מצפים למצוא בעקבות פעולה של שינוי המספר?

כמו שהקוד כתוב כרגע ריאקט צריך להפעיל render על כל אחד מהפקדים, מה שמביא ל 10,000 קריאות ל render. אבל גם קל לראות שהרבה מהקריאות האלה מיותרות: במעבר מ-5 ל-6 לדוגמא, מספר שלא מתחלק ב-5 וגם לא ב-6 יישאר ללא שינוי, ולכן אין טעם להפעיל עליו render.

2. הוספת shouldComponentUpdate

כדי לצמצם קריאות ל render נוכל להוסיף את הפונקציה shouldComponentUpdate. במקרה שלנו נרצה לקרוא ל render רק אם היה שינוי ולכן כך יכול להיראות המימוש:

    shouldComponentUpdate: function(nextProps, nextState) {
    if (!! (nextProps.val % nextProps.divisor) === !!(this.props.val % this.props.divisor) ) {
      return false;
    }

    return true;
  },

והדוגמא בפעולה:

3. ומה ההשפעה על הביצועים?

פתיחת שתי הדוגמאות ב Firefox Developer Tools מציגה שיפור ביצועים ניכר. אצלי על המחשב טיפול באירוע שינוי המספר מ-5 ל-6 בגירסא ללא shouldComponentUpdate לקח כ 1,900 מילי שניות ואילו טיפול באותו אירוע בגירסא המשופרת לקח כ 1,300 מילי שניות.

עיקר השיפור לא היה בפונקציה render עצמה אלא בפונקציות של ריאקט שמשוות את התוצאות של render. וזה ברור, שכן ככל שעץ ה Virtual DOM שריאקט צריך להשוות יותר מורכב כך פעולת ההשוואה תיקח יותר זמן.

מה שיפה כאן שמאוד קל לבנות את הקוד נכון מהתחלה. סגלו לעצמכם הרגל וכתבו את הפונקציה shouldComponentUpdate (או קחו אותה בירושה או ממיקסין) לכל אחד מהפקדים שלכם, והשקיעו עוד רגע במחשבה איזה ערכים היא צריכה להחזיר ומתי.