React Compiler הוא קומפיילר build-time של React שמבצע memoization אוטומטי לקומפוננטות ול-hooks, ומבטל את הצורך ב-useMemo, useCallback ו-React.memo ידניים.
היתרון העיקרי פחות רינדורים מיותרים וביצועים טובים יותר ללא קוד אופטימיזציה ידני וללא תלות בזיכרון של המפתח.
דרישות לשימוש React 19 ואילך, וקוד שעומד בחוקי React (Rules of React). הקומפיילר מדלג בבטחה על קוד שלא עומד בחוקים.
סטטוס נוכחי הקומפיילר משולב ב-React 19 וב-Next.js 15+, ובשימוש בייצור על-ידי Meta (Instagram ו-Facebook) ופלטפורמות גדולות נוספות.
React Compiler במבט כללי
React Compiler הוא קומפיילר build-time של React שמבצע memoization אוטומטי לקומפוננטות ול-hooks. במקום לכתוב useMemo, useCallback ו-React.memo ידנית כדי למנוע רינדורים מיותרים, הקומפיילר מנתח את הקוד בזמן ה-build, מזהה ערכים וחישובים שאפשר לשמור ב-cache, ומחיל את האופטימיזציה אוטומטית - בלי שתצטרכו להתערב.
הוא נקרא גם React Forget - שם הפיתוח המקורי של הפרויקט בתוך Meta - כי הוא מאפשר "לשכוח" את הצורך באופטימיזציות ידניות. הקומפיילר זמין רשמית מ-React 19 ואילך, מובנה ב-Next.js 15+, ונמצא בייצור היום באפליקציות גדולות כמו Instagram ו-Facebook.
איך React Compiler עובד
הקומפיילר מבצע memoization (זיכרון אוטומטי של ערכים מחושבים) על הקוד שלכם בזמן build. ייתכן שאתם כבר מכירים את הקונספט מ-APIs ידניים כמו useMemo, useCallback ו-React.memo - אבל בעוד שאלה דורשים מהמפתח להחליט מתי ואיפה להוסיף אותם, הקומפיילר עושה את זה אוטומטית לאורך כל הקוד.
טכניקות memoization מאפשרות ל-React לזהות שחלקים מסוימים באפליקציה לא צריכים להתעדכן מחדש אם הערכים שלהם לא השתנו, ובכך להפחית את עומס העבודה בעדכונים. הבעיה ההיסטורית: מפתחים רבים שוכחים ליישם memoization, או מיישמים אותו בצורה לא נכונה. התוצאה - רינדורים מחדש מיותרים. דוגמה מוכרת: input שמתרנדר שוב ושוב למרות שהטקסט בתוכו לא השתנה בכלל.
הקומפיילר מנצל את הידע שלו ב-JavaScript ובחוקי React (Rules of React) כדי לבצע memoization של ערכים או קבוצות ערכים בתוך components ו-hooks. הוא פועל ברמת ה-AST (עץ הסינטקס המופשט) של הקוד שלכם, מזהה דפוסים שמותר לעטוף ב-cache, ומוסיף את המנגנון אוטומטית. אם הקומפיילר מזהה שמשהו לא מתנהל לפי החוקים, הוא פשוט מדלג על אותם components ו-hooks וממשיך באופטימיזציה של שאר הקוד - בלי לסכן יציבות.
מה צריך לדעת לפני השימוש ב-React Compiler
כדי שהקומפילר של React יפעל כראוי ויבצע את האופטימיזציות הנדרשות, יש לו כמה דרישות ותנאים בסיסיים שהקוד שלכם חייב לעמוד בהם כדי להבטיח ביצועים אופטימליים:
JavaScript תקני וסמנטי
הכוונה היא שהקוד שלכם צריך להיות כתוב בצורה נכונה לפי כללי התחביר (syntax) הרשמיים של JavaScript, כלומר אין בו שגיאות כמו סוגריים חסרים או שימוש במילות מפתח לא נכונות. במילים פשוטות, זה אומר לוודא שאין בעיות טכניות בקוד.
בנוגע ל-JavaScript סמנטי, בדרך כלל שמדברים על קוד סמנטי, הכוונה היא שהקוד נכתב בצורה שמבהירה את הכוונה שלכם. כלומר, המבנה והסגנון של הקוד תואמים את הפעולה שאתם מנסים להשיג, מה שעוזר להבהיר את המטרה של הקוד ולהימנע מטעויות לוגיות.
טיפול בערכים שעשויים להיות null או undefined
הקומפיילר מניח שהקוד שלכם מטפל בצורה נכונה בערכים שיכולים להיות null או undefined. כלומר, כאשר אתם ניגשים לערך שעלול להיות לא מוגדר, כמו פרופרטי באובייקט, אתם צריכים לבדוק תחילה אם הערך קיים - לדוגמה באמצעות בדיקה מקדימה (if), optional chaining או ערך ברירת מחדל.
אם אתם עובדים עם TypeScript, חשוב להפעיל את האפשרות strictNullChecks ב-tsconfig.json, שמתריעה במקרים שבהם ערך יכול להיות null או undefined, וכך עוזרת לכם לכתוב קוד בטוח ואמין יותר. בנוסף, צוות React מספק תוסף ESLint רשמי בשם eslint-plugin-react-compiler שמסמן בעיות שעלולות למנוע מהקומפיילר לעבוד על הקוד שלכם.
עמידה בחוקי React
הקומפיילר מצפה שהקוד שלכם יפעל בהתאם לחוקי React (Rules of React). הוא יכול לבדוק ולוודא רבים מהחוקים האלו באופן אוטומטי במהלך תהליך האופטימיזציה.
חוק קלאסי שאתם בטוח מכירים: אסור לקרוא ל-hooks מפונקציה רגילה של JavaScript או מתוך תנאי (if/loop). אם ה-hooks נקראים בסדר לא קבוע, React לא תוכל לעקוב אחרי השינויים בצורה נכונה, וזה יוביל לבאגים ברכיב. הכלל המקובל - hooks תמיד נקראים בחלק העליון של ה-component, באותו סדר, בכל רנדר.
חוק חשוב נוסף שהקומפיילר תלוי בו: קומפוננטות ו-hooks חייבים להיות פונקציות טהורות (pure functions). זה אומר שלאותו input הם מחזירים אותו output, ושאין להם side effects ישירים בזמן הרנדר. לרשימה המלאה של חוקי React.
איך מתחילים להשתמש ב-React Compiler
מאז שהקומפיילר עבר לגרסה יציבה הוא כבר לא ניסיוני - אפשר להשתמש בו בייצור. צוות Meta הריץ אותו בפרודקשיין ב-Instagram עוד בשלב ה-RC, ומאז ההטמעה התרחבה לאפליקציות גדולות נוספות. הצעדים העיקריים: לוודא שאתם על React 19 ואילך, לוודא שהקוד עומד בחוקי React (אפשר להריץ את eslint-plugin-react-compiler לבדיקה), ולהוסיף את הקומפיילר ל-build.
אם אתם משתמשים ב-Next.js 15 ואילך, התמיכה מובנית - מפעילים את הדגל בקובץ הקונפיגורציה ויוצאים לדרך. בפרויקטים אחרים, אפשר להוסיף את הקומפיילר כתוסף Babel או Vite לפי ההוראות הרשמיות. אחרי ההפעלה, צוות React ממליץ להסיר בהדרגה את useMemo, useCallback ו-React.memo הקיימים - הקומפיילר מבצע את אותה עבודה אוטומטית. למידע נוסף על התקנת React Compiler.
שאלות נפוצות
האם אני עדיין צריך להשתמש ב-useMemo ו-useCallback אחרי הוספת React Compiler
ברוב המקרים לא. ה-React Compiler מבצע את אותה עבודה אוטומטית. צוות React ממליץ להסיר את useMemo ו-useCallback הקיימים בהדרגה אחרי הפעלת הקומפיילר, אלא אם יש מקרה ספציפי שבו הם עדיין נחוצים. useState, useEffect ו-hooks אחרים נשארים בשימוש כרגיל.
מה ההבדל בין React Compiler ל-React Forget
אין הבדל - React Forget היה שם הפיתוח המקורי של הפרויקט בתוך Meta, על שם הרעיון "לשכוח את הצורך באופטימיזציות ידניות". השם הרשמי שאומץ הוא React Compiler. שני השמות מתייחסים לאותו כלי.
האם React Compiler עובד עם React 18
לא. ה-React Compiler דורש React 19 ואילך. שדרוג ל-React 19 הוא תנאי מקדים, ואחריו ניתן להוסיף את הקומפיילר דרך תוסף ל-Babel או Vite. ב-Next.js 15 ואילך הקומפיילר מובנה ומופעל דרך הגדרה בקובץ הקונפיגורציה.
מה קורה אם הקוד שלי לא עומד בחוקי React
הקומפיילר מדלג על קומפוננטות או hooks שלא עומדים בחוקי React במקום להפעיל אופטימיזציה שעלולה לשבור את הקוד. זאת אומרת שאתה מקבל את האופטימיזציה רק היכן שזה בטוח, וקוד "לא תקני" ימשיך לעבוד כמו שעבד קודם - בלי שיפור ביצועים אבל גם בלי שבירה.
איך אני בודק שה-React Compiler באמת רץ על הקוד שלי
צוות React מספק תוסף ESLint רשמי בשם eslint-plugin-react-compiler שמסמן בעיות שימנעו מהקומפיילר לעבוד. בנוסף, ה-React DevTools מציגים תווית "Memo ✨" לקומפוננטות שעברו אופטימיזציה על-ידי הקומפיילר, כך שאפשר לראות בזמן ריצה אילו קומפוננטות נהנות ממנו.
