לפני שהקומפילר של React נכנס לתמונה, מפתחי React היו צריכים לבצע אופטימיזציה של הקוד שלהם בעצמם. למשל, שימוש ב-hooks כמו useMemo ו-useCallback היה חיוני כדי להבטיח ביצועים טובים יותר, אבל התהליך הזה היה לעיתים מסובך ודרש תשומת לב למתי ואיפה צריך להכניס אותם.
כתוצאה מכך, מפתחים רבים לא השתמשו נכון ב-hooks האלו, או פשוט שכחו ליישם את האופטימיזציות הנדרשות, מה שהוביל לביצועים פחות טובים ולכתיבת קוד ברמה פחות גבוהה.
כעת, עם השקת הקומפילר החדש בגרסה 19 React, מפתחים יכולים ליהנות מאופטימיזציה אוטומטית של הקוד, בלי הצורך להתעסק בתהליכים ידניים מורכבים כמו שימוש ב-hooks כמו useMemo ו-useCallback.
הקומפילר החדש דואג לבצע את האופטימיזציות האלה באופן אוטומטי. זו גם הסיבה ש-React Compiler גם נקרא React Forget, כי הוא מאפשר לנו לשכוח את הצורך לעשות אופטימיזציות ידניות בקוד.
איך React Compiler עובד
הקומפילר מבצע זיכרון אוטומטי (memoization) של הקוד שלכם כדי לשפר את ביצועי האפליקציה. ייתכן שאתם מכירים את המונח memoization דרך שימוש ב-APIs כמו useMemo, useCallback ו-React.memo.
טכניקות אלו מאפשרות ל-React לזהות שחלקים מסוימים באפליקציה לא צריכים להתעדכן מחדש אם הערכים שלהם לא השתנו, ובכך להפחית את עומס העבודה בעדכונים.
עם זאת, מפתחים רבים לעיתים שוכחים ליישם memoization או מיישמים אותו בצורה לא נכונה, מה שעלול לגרום לעדכונים לא יעילים, בהם React מרנדרת מחדש חלקים מה-UI שלא השתנו בכלל. לדוגמה, input יכול להתעדכן שוב ושוב למרות שהטקסט בתוכו נשאר זהה.
הקומפילר מנצל את הידע שלו ב-JavaScript ובחוקי React כדי לבצע memoization של ערכים או קבוצות ערכים בתוך components ו-hooks. אם הקומפילר מזהה שמשהו לא מתנהל לפי הכללים, הוא פשוט מדלג על אותם components ו-hooks וממשיך באופטימיזציה של שאר הקוד.
מה צריך לדעת לפני השימוש ב-React Compiler
כדי שהקומפילר של React יפעל כראוי ויבצע את האופטימיזציות הנדרשות, יש לו כמה דרישות ותנאים בסיסיים שהקוד שלכם חייב לעמוד בהם כדי להבטיח ביצועים אופטימליים:
JavaScript תקני וסמנטי
הכוונה היא שהקוד שלכם צריך להיות כתוב בצורה נכונה לפי כללי התחביר (syntax) הרשמיים של JavaScript, כלומר אין בו שגיאות כמו סוגריים חסרים או שימוש במילות מפתח לא נכונות. במילים פשוטות, זה אומר לוודא שאין בעיות טכניות בקוד.
בנוגע ל-JavaScript סמנטי, בדרך כלל שמדברים על קוד סמנטי, הכוונה היא שהקוד נכתב בצורה שמבהירה את הכוונה שלכם. כלומר, המבנה והסגנון של הקוד תואמים את הפעולה שאתם מנסים להשיג, מה שעוזר להבהיר את המטרה של הקוד ולהימנע מטעויות לוגיות.
לא בטוחים שאתם יודעים לכתוב JavaScript תקני וסמנטי? יש לנו קורס Clean Code and Refactoring שמלמד איך לכתוב קוד נקי ואיכותי שחברות הייטק וראשי צוותים אוהבים, וכנראה שגם React Compiler 😎
טיפול בערכים שעשויים להיות null או undefined
הקומפילר מניח שהקוד שלכם מטפל בצורה נכונה בערכים שיכולים להיות null או undefined. כלומר, כאשר אתם ניגשים לערך שעלול להיות לא מוגדר, כמו פרופרטי באובייקט, אתם צריכים לבדוק תחילה אם הערך אכן קיים. לדוגמה, בדיקה כמו if (user.profileImage) תוודא שהפרופרטי מוגדר לפני השימוש בו.
אם אתם עובדים עם TypeScript, חשוב להפעיל את האפשרות strictNullChecks ב-tsconfig.json, שמתריעה במקרים שבהם ערך יכול להיות null או undefined, וכך עוזרת לכם לכתוב קוד בטוח ואמין יותר.
עמידה בחוקי React
הקומפילר מצפה שהקוד שלכם יפעל בהתאם לחוקי React. הוא יכול לבדוק ולוודא רבים מהחוקים האלו באופן אוטומטי במהלך תהליך האופטימיזציה.
לדוגמה לחוק שאתם בטוח מכירים זה שאסור לקרוא ל-hooks מפונקציה רגילה של JavaScript, כי זה עלול לשבור את הסדר שבו React מנהלת את ה-state והרינדור של ה-component.
אם ה-hooks נקראים בסדר לא קבוע, React לא תוכל לעקוב אחרי השינויים בצורה נכונה, וזה יוביל לבאגים ברכיב. וזה מוביל אותי לעוד חוק חשוב שגם אותו אתם מכירים שה-hooks צריכים להיקרא תמיד בחלק העליון של ה-component. לרשימה המלאה של חוקי React.
רוצים לנסות את React Compiler?
מממ... עדיין לא הייתי ממהר. הקומפילר עדיין ניסיוני בשלב הזה של המאמר Release Candidate (RC), ולכן הייתי בודק בזמן שאתם קוראים אם הוא כבר יצא או לא לגרסה יציבה (GA).
לפי דעתי, זה אמור לקרות בערך באוקטובר 2024, כי אז גם Next.js 15 תהפוך ל-General Availability (GA) ותהיה זמינה לכל המפתחים והיא תשתמש ב-React Compiler.
חשוב לציין ש-React Compiler כבר עכשיו נמצא בשימוש בפרודקשיין ב-Instagram, אבל כמו שאמרתי, זה עדיין בשלב ניסיוני. אבל אם אתם עדיין רוצים, אתם צריכים ליצור פרויקט חדש בריאקט (אבל React 19) ועוד כמה דברים שאכניס קישור אליהם. הסיבה היא שה-React Compiler עובד רק בגרסה 19 של React. למידע נוסף על התקנת React Compiler.
