כדי לנהל מידע בצד לקוח באפליקציות, אנחנו יכולים להשתמש בשני כלים בולטים שהם Context API שעובד ב-React.js ו-Redux שהיא סיפריה כללית לניהול state ב-JavaScript. שניהם מספקים גישה ואפשרות לעדכון נתונים, אך כל אחד מציע גישה שונה ועובד באופן שונה. אז בואו נבין איך Context API ו-Redux עובדות באפליקציות, ומתי עדיף להשתמש בכל אחד מהם.
אם אתם לא יודעים מה זה Redux, אתם מוזמנים לקרוא את המאמר שלנו המדריך המלא: Redux Toolkit עם TypeScript.
באפליקציות שבהן יש הרבה מידע (state) שמשותף למספר רב של קומפוננטות (נניח, מעל 30 קומפוננטות), והמידע מתעדכן לעיתים קרובות, שינוי בקומפוננטה אחת יכול לגרום לרינדור של כל הקומפוננטות המשתמשות באותו Context, גם אם המידע ביניהן אינו קשור ישירות (כמו במקרה של `setName` לעומת `setCounter`).
אפשר לנסות לחלק את האפליקציה למספר Contexts כדי שכל עדכון יתבצע רק על Context מסוים, מה שימנע רינדורים מיותרים. אבל הפיצול הזה עלול להוביל למבנה מסובך יותר של האפליקציה ולאבד את הקונספט של 'single source of truth', שבמילים פשוטות מתאר מקום המרכזי והאמין שבו נשמר המידע של האפליקציה.
לעומת זאת, Redux מאפשר לנו לאחסן את כל המידע במקום אחד מרכזי ('single source of truth'), שניתן לחלק אותו לבלוקים קטנים ונפרדים. כל חלק מכיל רק את המידע שקשור אליו ובכך אנחנו יכולים להעביר לקומפוננטות שלנו רק את המידע הרלוונטי להם, ואם יהיה עדכון על בלוק (חלק) מסוים, רק הקומפוננטות שמתמשות באותו חלק יתרנדרו מחדש! זה עוזר לנו לשמור על סדר וביצועים טובים באפליקציה, כי כל עדכון משפיע רק על החלקים הרלוונטיים, מבלי לגרום לרנדורים מיותרים באפליקציה.
עבור אפליקציות קטנות עד בינוניות, עם עץ קומפוננטות שאינו מאוד עמוק או מורכב (לדוגמא, פחות מ-30 קומפוננטות), Context API יהיה בחירה טובה. עבור אפליקציות בינוניות עד גדולות, עם עץ קומפוננטות שגדול ועמוק או מורכב (לדוגמא, מעל מ-30 קומפוננטות) שחולקות מידע משותף, Redux יהיה מתאים יותר.
כאשר הנתונים שלנו אינם רבים והשימוש בהם הוא מוגבל לכמה קומפוננטות בלבד, Context API יכול להיות מספיק טוב ויעיל, כי גם אם חלק או כל הקומפוננטות יתרנדרו, זה לא יכביד יותר מידי על התוכנה שלנו כי מספר הנתונים מצומצם. כאשר יש לנו לא מעט נתונים והשימוש בהם משותף להרבה קומפוננטות, כאן אנחנו כנראה צריכים לתעדף את Redux כדי לשמור על אופטימיזציה טובה.
אם עדכוני הנתונים באפליקציה שלנו אינם תדירים ומורכבים, השימוש ב-Context API יכול להיות פשוט יותר. כי רק מדי פעם נעדכן את הנתונים וזה לא כזה נורא. אבל אם עדכוני הנתונים הם כן תדירים ומורכבים, השימוש ב-Redux יהיה טוב יותר כדי למנוע רנדורים מיותרים, במיוחד באפליקציות שמשותף להם הרבה נתונים.
אז לסיכום, כמו שאתם רואים, אין תשובה אחת נכונה מתי להשתמש ב-Redux ומתי להשתמש ב-Context API. בהתאם להנחיות שאנחנו כתבנו במאמר הזה, אתם צריכים להחליט מה טוב יותר לאפליקציה שלכם.