יחד עם זאת, הכנה לראיון עבודה באופן נכון תעזור לכם להוריד את מפלס הלחץ, ועם מעט עבודה, אולי אפילו תאפשר לכם להנות מהתהליך.

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

איך להתכונן לראיון עבודה בחברת הייטק

שלב #1 בהכנה לראיון – למדו על החברה

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

כדי לעשות זאת, אתם חייבים קודם כל להבין מה עושה החברה. 

כלומר, כדי שתוכלו להסביר למי שמראיין אתכם מדוע אתם התאמה מצויינת לחברה, חשוב שתדעו לענות על שאלות כמו:

• אילו מוצרים החברה מוכרת?
• מיהם לקוחות החברה?
• כמה עובדים יש להם?
• אילו סניפים שונים קיימים בארגון? 
• מהו חזון החברה?

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

לאחר שאתם מרגישים שאתם מכירים את החברה קצת יותר טוב, המשיכו לחקור לגבי התפקיד עצמו.

לצפיה בסרטון – איך מתכוננים לראיון עבודה בחברת הייטק:

שלב #2 בהכנה לראיון – למדו על התפקיד עצמו

המטרה שלכם בשלב זה היא להבין מיהו "העובד האידיאלי" בעיני החברה המגייסת.

היופי הוא שרוב המקרים (ובייחוד במשרות הייטק), כל המידע שאתם צריכים כבר קיים בתיאור המשרה. לכם רק נשאר להקדיש כמה דקות כדי לעבור עליו ולדלות ממנו כל מה שתצטרכו לדעת.

מה לבדוק כשמבצעים מחקר לגבי התפקיד:

•  עם אילו טכנולוגיות עובדים? האם ציינו שפות תכנות, Framework מסוים, כלים, מערכות או טכנולוגיות רלוונטיות אליכם?
• איך נראית העבודה היומיומית?
• האם עובדים בצוות או לבד? מול אילו גורמים תעבדו?

אם יש פרטים שלא הצלחתם לגלות רשמו אותם לעצמכם. הם יוכלו לשמש אתכם לצורך החלק האחרון של הראיון שבו אתם מפנים שאלות למראיין שלכם (נפרט על כך בסעיף 6).
 
זה אולי נשמע קצת פשטני אבל לשלב הזה יש 2 יתרונות מרכזיים. 

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

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

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

שלב 3 בהכנה לראיון – תרגלו שאלות נפוצות מראיונות 

לא משנה אם אתם מתראיינים לתפקיד מעצב UX, מנהל אדמיניסטרטיבי או מהנדסת תוכנה, אתם צריכים להיות מוכנים לענות על שאלות כמו:
"ספר/י על עצמך?", "למה בא לך לעבוד פה?" או "מהם החסרונות שלך?" 

למעשה, אלו שאלות שישאלו אתכם תמיד ולכן זה שלב קריטי בהכנה לראיון עבודה.

זכרו שאף אחד לא נולד עם כישרון ייחודי לראיונות כי בסופו של דבר, להתראיין זו מיומנות נרכשת.

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

אין לך מושג מאיפה להתחיל? ריכזנו עבורך 13 שאלות "טריקיות" מראיונות עבודה >> 

4. הכינו את עצמכם לסוגים שונים של ראיונות טכניים

ראיונות טכניים יכולים להיות ראיונות whiteboard, תרגילים בצוות, מטלה ביתית ועוד, אך המטרה של כולם זהה:

לבחון אם הידע והכישורים הטכניים שלכם מתאימים לתפקיד.

ראיונות טכניים בתעשיית ההייטק (לסוגיהם) נועדו כדי לבחון את הידע שלכם, והם בדרך כלל יתמקדו בנושאי System Design, אלגוריתמים ו- Data Structures ועוד (כמובן בהתאם לתחום הספציפי שלכם).

ישנם לא מעט Best Practices להתכונן לשלב זה, ואפילו ספרים ייעודיים למעבר ראיונות טכניים שהמוכר ביותר שבהם הוא Cracking the code interview, שנחשב ל"סטנדרט" בתחום הפיתוח.

בנוסף, יש לא מעט אתרי אינטרנט, כמו למשל Interviewbit, שיאפשרו לכם לתרגל שאלות שונות בכל מיני נושאים. 

5. בצעו Mock Interviews (ראיונות-דמה)

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

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

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

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

כיום יש היצע רחב של כלים שמאפשרים לנהל ראיונות כאלה כמו למשל pramp או interviewing.io.

6. הכינו שאלות למראיין

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

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

לכן, חשוב להקשיב למראיין לאורך הראיון, ולנסות להבין מה באמת הוא מנסה לגלות עליכם. כך תוכלו להרכיב תשובה מצויינת.

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

במקרים רבים, בהמשך הראיון יענו על רוב השאלות שלכם ולכן (אלא אם כן זה ממש "זורם" בשיחה), רצוי להשאיר את השאלות לסוף הראיון.

ההמלצה שלנו היא שתקדישו כמה דקות לחשיבה על שאלות שמעניינות אתכם (ועל הדרך תראו למראיין שלכם ביצעתם מחקר מקדים ואתם לוקחים את התהליך ברצינות).

7. כנסו "לראש הנכון" (State of Mind של הצלחה)

חיפוש העבודה יכול להיות מאוד מפחיד בהתחלה, אך בעזרת תרגול ועבודה ממוקדת אפשר להוריד את מפלס הפחד ואפילו ליהנות מהתהליך עצמו.

כמובן, הפחד הוא טבעי מכיוון שאף אחד לא אוהב להרגיש דחייה. העניין הוא,שברוב המקרים הסטטיסטיקה היא נגדכם.

ברוב המקרים, אתם ככל הנראה לא תתקבלו לעבודה הראשונה שתתמיינו אליה, וגם לא לשניה. יש הרבה מועמדים שמתמודדים מולכם, ולכן זה הגיוני שאתם תיכשלו בחלק גדול מהראיונות שלכם – ככה זה עובד.

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

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

מצד שני, גם יהיו מקרים בהם תרגישו שלא הצלחתם להביא את עצמכם לידי ביטוי, או שאתם עדיין צריכים לתרגל נושאים טכניים מסוימים.  

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

סיכום ומסקנות

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

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

לכן, גם אם אתם לא רואים תוצאות מיד, זכרו את הדבר הבא:

כל העבודה הקשה שלכם תשתלם בעתיד מכיוון שאתם רוכשים כישורים פרקטיים שישמשו אתכם לאורך כל הקריירה.

בהצלחה בראיון!

עוז לוי

מייסד שותף ב- TechMonster. עוזר לא.נשים להתפתח בתעשיית ההייטק.

The post איך להתכונן לראיון עבודה בחברת הייטק? 7 טיפים לראיון עבודה appeared first on TechMonster.

במאמר הזה אעבור על שיטה פשוטה להתמודד עם שאלות טכניות מפתיעות בראיון, שלא התכוננתם אליהן מראש. 

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

במאמר הזה אני הולך להתמקד בשלב הבא של תהליך המיון – ראיון העבודה. או יותר נכון – שלב הראיון הטכני.

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

מודעה

"..הרי אף מעסיק לא יקח אותך בגלל שסיימת איזה קורס..."

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

לצפייה בסרטון – איך להתמודד עם שאלה שלא התכוננת אליה בראיון:

מה חשוב להבין *לפני* ראיון טכני

לפני שנכנס לשיטה שאני הולך ללמד, חשוב לי להבהיר דבר חשוב:

מעבר לתוכן כצמו של התשובות שלכם, ישנה חשיבות עצומה למה שאתם משדרים לאורך תהליך המיון. 

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

אתם לא תאמינו עד כמה להסתכל בעיניים ולהראות נינוחים, יכול לעשות את כל ההבדל.

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

איך מגיבים לשיחת הטלפון הראשונה?

 כבר משלב הראיון הטלפוני, אתם צריכים "לשחק את המשחק". זה אומר שאתם לא מגמגים, ולא אומרים "תודה שהתקשרתם". 

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

כדי לשדר ביטחון אני אפילו ממליץ לפעמים לחלק מהבוגרים שלי להגיד באמצע השיחה "תזכירו לי שוב מאיזה חברה אתם…" רק כדי להראות מחוזרים יותר.

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

לא כדאי לכם לענות תשובה סטנדרטית כמו "בקורס תכנות". זה פשוט לא יעזור להבדיל אתכם ממועמדים אחרים.

איך לענות כששואלים כיצד צברתם ניסיון בתחום?

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

לבוגרים שלי אני מציע להעזר בנוסח הבא: 

"עשיתי סטאז' אחרי הכשרה אינטנסיבית, בליווי של מנהל פיתוח"  

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

כמובן, את התשובה הזאת תוכלו לתת רק אחרי שבאמת עשיתם לפחות 2-3 פרויקטים ברמה גבוהה! 

איך להתמודד עם שאלות מתקילות במהלך ראיון טכני

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

#1 – בפעם הראשונה שהתקילו אתכם במהלך ראיון טכני:

נניח ששאלו אתכם שאלה שאין לכם מושג איך לענות עליה. אני מציע לענות בצורה הבאה:

"אני לא בדיוק זוכר את זה כרגע, אבל אין לי בעיה להשלים את זה תוך כמה שעות – ואני אשמח אם תבחנו אותי גם על זה. אני בטוח ביכולות שלי להשלים את זה." 

זה אולי ישמע מוזר, אבל תזכרו שבתעשייה ככה עובדים – מתכנתים מנוסים לא משננים כמו תוכי, מה שהם באמת צריכים לדעת הוא למצוא מידע וליישם אותו בעולם האמיתי. 

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

 #2 – בפעם השניה שהתקילו אתכם במהלך ראיון טכני:

גם אם שאלו אתכם שאלה נוספת שלא ידעתם לענות אליה, אני מציע לענות תשובה דומה לשאלה הקודמות. למשל:

"גם על זה אני לא סגור, אני מעדיף לתת תשובה שאני בטוח בה – אשלים ואחזיר תשובה תוך זמן קצר"

#3 – פעם שלישית שהתקילו אתכם במהלך ראיון טכני:

אוקי, הפעמיים הראשונות ברורות. השאלה היא, מה קורה בפעם השלישית שמתקילים אתכם? הרי השתמשתם כבר בתשובה הזאת, וזה יהיה מוגזם להחזיר תשובה דומה גם בפעם השלישית. 

אל חשש, גם פה יש פתרון (שאמנם דורש קצת אומץ, אבל עובד מעולה) והוא הולך ככה: אם שאלו אתם פעם שלישית ואתם לא יודעים לענות, הדבר הכי טוב שתוכלו לעשות הוא לקחת יוזמה, ולומר בבטחון (ואפילו עם חיוך):

"טוב אני רואה לאן זה הולך.. ואני רוצה להציע משהו אחר: תנו לי להוכיח את היכולות שלי דרך מטלת בית.. אני מאמין שהתנסות עם הלא-נודע תרשים הרבה יותר משאלה כזו או אחרת… "

בצורה הזאת אנחנו בעצם מעבירים את הכדור לצד השני. 

נכון, זה לא מתאים לכל אחד. לא לכולם נח ליזום ולהעביר את הכדור לצד השני. יחד עם זאת, מי שמסוגל, יכול להרוויח הרבה מכך. 

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

לסיכום ומסקנות אחרונות 

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

גם אם אתם לא יודעים משהו, לא קרה כלום.

אף אחד לא מצפה מכם להיות מושלמים, ואם רק תתקשרו את העניין הזה בצורה הנכונה, יכול מאוד להיות שיתנו לכם צ'אנס להראות את היכולות שלכם בצורה אחרת – במועד מאוחר יותר או במטלת בית. 

ואם אתם מתפדחים או מתביישים וחושבים שזה יכול לפגוע בכם, תדעו שזה בדיוק ההיפך! להיות פרו-אקטיבייים ולהראות יוזמה רק יעזור לכם להתבלט בתור מועמדים (מעבר ליכולות הטכניות שלכם). 

בהצלחה בראיון!

יניב ארד

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

The post איך לענות לשאלה שאתם לא יודעים במהלך ראיון טכני appeared first on TechMonster.

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

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

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

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

לצפייה בסרטון – 5 טיפים לראיון קוד בזום:

#1 – וודאו שהאינטרנט עובד כמו שצריך

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

מומלץ לערוך מבחן מהירות גלישה לפני על מנת לוודא את מצבכם.

#2 – הקפידו על תאורה נכונה

לא מזמן יצא לי לראיין מועמד שישב בחדר חשוך בגלל בעיות חשמל. המועמד היה בחו״ל ולא הצליח למצוא פתרון טוב יותר.

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

#3 – דאגו שיהיה לכם נח

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

#4 – מזערו הסחות דעת

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

 #5 – תהיו שקופים

ומה עושים אם אי אפשר למנוע הסחות דעת? 

נניח שאתם הורים והילד בדיוק חולה. אם זה המצב, כדאי מאוד שתעדכנו את המראיין בתחילת הראיון.  

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

לסיכום, ראיון זה דבר מלחיץ, אז כשמדובר בראיון עבודה בזום – ההצעה שלי היא שקודם כל תדאגו לכל הדברים שנמצאים בשליטה שלכם ושיעזרו לכם להגיע לראיון קצת יותר נינוחים. 

מקווה שהטיפים שנתתי יעזרו בפעם הבאה שיהיה לכם ראיון בזום. בהצלחה!

לקריאה נוספת:

• איך להתכונן לראיון עבודה ב-7 צעדים פשוטים
• 13 שאלות מראיונות עבודה בהייטק (ואיך לענות עליהן)

אבי לואיס

מהנדס תוכנה במטא (לשעבר פייסבוק) שהתחיל לפני כ-4 חודשים לכתוב פוסט יומי בלינקדין על נושאים מגוונים כגון מיתוג עצמי, תארים אקדמים – כדאי או לא?, טיפים לג׳וניורים ועצות לצלוח את ראיונות העבודה.

The post איך להתכונן לראיון עבודה בזום? | 5 טיפים מנצחים לראיונות מרחוק appeared first on TechMonster.

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

*מאמר זה מיועד לבעלי ידע מקדים ב-JS, HTML וריאקט 

#1 – מה זה ריאקט?

ריאקט (React) היא ספריית Open Source בשפת JS ליצירת UI (ממשקי משתמש). ספרייה זו משתמשת בגישה של יצירת ממשקי משתמש אינטראקטיביים, מהירים ומורכבים באמצעות קומפוננטות עצמאיות שמנהלות את ה-state של עצמן.

#2 – כיצד ריאקט עובדת?

ריאקט יוצרת DOM וירטואלי. כאשר ה-state משתנה בקומפוננטה, ריאקט מריצה diffing algorithm אשר מזהה מה השתנה ב-DOM הווירטואלי. בשלב השני מתבצע reconciliation בו ה-DOM מעודכן בתוצאות אלגוריתם ה-diffing.

#3 – מה היתרונות של ריאקט?

-ביצועים משופרים באמצעות השימוש ב-Virtual DOM, שהוא יצוג קל משקל ב-JS של ה-DOM האמיתי. כאשר ה-state משתנה, הריאקט מבצעת השוואה בין ה-VDOM החדש לישן והשינוי ב-DOM האמיתי קורה רק ב-nodes שריאקט מזהה שהשתנו בהשוואה של ה-VDOMS ולא משנה את כל ה-DOM (בהמשך המאמר תמצאו פירוט על ה-VDOM).

-ריאקט בנויה כעץ של קומפוננטות שזרימת הדאטה מתבצעת בו בצורה אחידה מלמעלה למטה – מקומפוננטת אב לקומפוננטת בן (Unidirectional Data Flow in React). פעולות (actions) שנעשות ב-View מעדכנות את ה-state ועדכון זה של ה-state גורם לזרימת דאטה חדשה שמשנה את עץ הקומפוננטות ואת ה-View בהתאם. ה-View הוא התוצר של הסטייט והוא יכול להשתנות רק כאשר action קורה, שמשנה את ה-state וחוזר חלילה.

-השימוש ב-JSX הופך את הקוד לקל לכתיבה ולקריאה. Declarative views הופך את הקוד לצפוי ולקל לדיבוג. כמו כן באמצעות ה-JSX ריאקט מייצרת את ה-VDOM שראינו לעיל את יתרונותיו. 

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

–תמיכה גדולה של הקהילה כתוצאה מכך שזאת ספריית open source והיא כה פופולרית. בכל בעיה, באג או כל דבר אחר, הקהילה העשירה מבטיחה שעזרה תימצא במהרה. 

#4 – מה זה VDOM) Virtual DOM)?

ה-VDOM הוא ייצוג קל משקל של ה-DOM ב-JS. ייצוג זה נשמר בזיכרון על ידי ריאקט ומסונכרן כל העת עם ה-DOM האמיתי. עדכונים ב-VDOM הם מהירים יותר וקלי משקל מאשר שינויים ב-DOM האמיתי.

כאשר ריאקט מוצא הבדלים בין ה-VDOM הנוכחי לקודם, רק אז הוא מבצע את השינויים הנדרשים ב-DOM האמיתי ורק ב-nodes הרלוונטיים. תהליך השינוי הזה נקרא Reconciliation. העקרונות חשובים אשר עומדים בבסיס תהליך זה הם אלגוריתם המעקב אחרי השינויים (Diffing Algorithm) של ריאקט וה-VDOM.

#5 – מה זה JSX?

ראשי תיבות של JavaScript XML. הרחבת סינטקס (syntax extension) ל-JS, שמתארת איך ה-HTML צריך להראות, באמצעות "כתיבת HTML" בתוך JS ושילוב JS בתוך האלמנטים של ה-HTML כביכול.  

ה-JSX הוא "Syntactic sugar" למתודה:

הקוד הזה:

יכול להתקמפל לקוד הזה:

#6 – מה ההבדל בין אלמנט לקומפוננטה?

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

הם מתארים מה צריך להיות בממשק המשתמש ומקבילים לאלמנטים של HTML. אלמנטים בריאקט הם אובייקטים המתארים מה יופיע מבחינת ה-nodes של ה-DOM. יצירת אלמנטים של ראקט היא "זולה" יותר מבחינת משאבים, לעומת יצירת אלמנטים ב-DOM עצמו. אלמנטים בריאקט יקראו בשמות עם אות ראשונה קטנה שזהים לשמות התגיות ב-HTML – כגון <div><button> וכו'. 

קומפוננטות קרויות באות ראשונה גדולה </ Button> או באות ראשונה גדולה ונקודה, dot notation – לדוגמה: </ Menu.Item>. קומפוננטות הן מקטעי קוד קטנים, רב שימושיים, שמקבלות props כמשתנים ומחזירות אלמנטים שירונדרו בדף. קומפוננטה יכולה להיות קלאס, שבאמצעות מתודת render תחזיר אלמנטים או יכולה להיות פונקציה שמחזירה אלמנטים. 

#7 – מה זה פרגמנט?

פרגמנטים בריאקט מאפשרים לקבץ אלמנטים וקומפוננטות בלי להוסיף ל-DOM עוד nodes שאינם נחוצים.

#8 – מה זה props?

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

#9 – מה זה key?

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

מומלץ לא להשתמש באינדקס של הפריט במערך כ-key אם סדר הפריטים עלול להשתנות. זה עלול להשפיע באופן שלילי על הביצועים ויכול לפגוע ב-state של הקומפוננטה. 

במידה ולא נותנים key לפריטים ברשימה, ריאקט יעניק את האינדקס של הפריט במערך באופן אוטומטי.

#10 – מה זה Hooks?

Hooks הם תוספת חדשה שהתווספה בגרסה 16.8 של ריאקט. hooks הם פונקציות אשר מאפשרות לקומפוננטות פונקציונליות להיות בעלות stste ולגשת ל-life cycle features. הם אינם עובדים בקומפוננטות מבוססות קלאסים ובעצם נועדו לאפשר עבודה עם ריאקט ללא קלאסים.

הקונבנציה והבקשה של ריאקט היא שהשם של פונקציות hook יתחיל במילה use. זה מאפשר לריאקט לבדוק באופן אוטומטי אם כל החוקים של hooks נשמרים מאחורי הקלעים, כמו אי שימוש ב-hook בתוך פונקציה אחרת לדוגמה. 

ה-hooks העיקריים הם:

• useState
• useEffect
• useContext
• useReducer
• useRef
• useMemo
• useCallback

ניתן גם לחבר פונקציות hooks מותאמות אישית (custom hooks). הן מאפשרות יצירת לוגיקה עצמאית מבוססת state ו-hooks נוספים, שניתן להתמש בה בצורה רב שימושית ברחבי האפליקציה. חשוב לזכור כי כאשר שתי קומפוננטות משתמשות ב-custom hook הן אינן חולקות את ה-state של ה-custom hook, שכן כל שימוש ב-custom hook, כל ה-state וכל ה-effects מבודדים לחלוטין.

#11 – מה זה state?

ה-state מחזיק אינפורמציה שמנוהלת בתוך הקומפוננטה ויכולה להשתנות במהלך חייה של הקומפוננטה. שינוי האינפורמציה ב-state גורר רנדור מחדש של הקומפוננטה. 

ה-state הוא פרטי לקומפוננטה ונמצא בשליטתה המלאה. את ה-state ניתן להעביר רק למטה, לקומפוננטות בת, באמצעות props. שינויים ב-state יש לבצע רק באמצעות מתודת set שגם ניתן להעביר לקומפוננטות הבת כ-props. 

#12 – מה זה useState?

פונקציית useState היא hook שמאפשר לנהל את ה-state בקומפוננטה פונקציונלית. פונקציה זו מקבלת ערך ראשוני ל-state ומחזירה מערך בעל שני ערכים – ה-state הנוכחי ומתודת set שבאמצעותה ניתן לעדכן את ה-state. במקרים מסויימים ניתן לעדכן את ה-state במתודת ה-set על ידי החלפתו בערך חדש לגמרי אך במקרים בהם יש לעדכן את ה-state בהתבסס על הערך הקודם של ה-state יש להעביר למתודת ה-set פונקציה, בה מעבירים את הערך הקודם של ה-state ומחזירים ממנה את הערך הקודם יחד עם השינויים הנדרשים.

יש לעשות זאת בצורה הזו משום שמתודת ה-set היא אסינכרונית, כלומר ריאקט מרכז את ההוצאה לפועל של השינויים בסטייט מסיבות של ביצועים ושינוי ה-state לא קורה מייד ברגע שמתודת ה-set נקראת. משום כך אין להסתמך על הערך הנוכחי של ה-state בקריאה ל-set, משום שאיננו יכולים לדעת בוודאות מה יהיה הערך באותו הרגע. לכן כאשר מעבירים פונקציה עם הערך הקודם של ה-state כארגומנט, באמצעות מנגנון closure שריאקט מבצעת מובטח שהערך הנכון יועבר.

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

בהינתן יותר מ-state אחד בקומפוננטה, ניתן להשתמש בכמה useStates לכל state ונמנע מריכוז כל ה-state באובייקט אחד כפי שהיה נהוג בקומפוננטות מבוססות קלאסים.

#13 – למה אסור לעדכן את ה-state ישירות?

עדכון ישיר של ה-state לא יגרום לקומפוננטה להתרנדר מחדש ולשקף את השינויים בממשק המשתמש. על ידי שימוש במתודת ה-set לעדכון ה-state, ריאקט יקבע עדכון ל-state שיתבצע בצורה אה סינכרונית וירנדר מחדש את הקומפוננטה ברגע שהשינוי יצא לפועל.

#14 – מהן מתודות life cycle?

בקומפוננטות מבוססות קלאסים יש 3 מתודות life cycle שניתן לקרוא להן כדי שיקראו באחד משלושת שלבי החיים של הקומפוננטה:

• componentDidMount – תקרא מייד כשהקומפוננטה מתווספת ל-DOM.
• componentDidUpdate – תופעל כשהקומפוננטה מתעדכנת. היא לא תיקרא ברינדור הראשוני.
• componentWillUnmount – תיקרא מייד לפני שהקומפוננטה מוסרת מה-DOM.

בקומפוננטות פונקציונליות מתודות אלה אינן קיימות אך יש להן מקבילה על ידי שימוש ב-hook מסוג useEffect. 

כאשר כותבים את ה-hook והארגומנט השני הוא מערך ריק, הדבר מקביל ל-componentDidMount – והקוד בתוך הפונקציה ירוץ רק בעת שהקומפוננטה מתווספת ל-DOM.

כאשר כותבים את ה-hook ומעבירים נתונים בארגומנט השני, במערך, הקוד בתוך הפונקציה ירוץ כאשר הנתונים האלה ישתנו וזה מקביל ל-componentDidUpdate.

כאשר כותבים את ה-hook ובתוך הפונקציה מחזירים פונקציה, היא תיקרא מייד לפני שהקומפוננטה תוסר מה-DOM וזה מקביל ל-componentWillUnmount.

#15 – מהן controlled and uncontrolled components?

ב-controlled component הדאטה של הטופס (form data) מנוהלת על ידי הקומפוננטה באמצעות ה-state. ב-HTML, האלמנטים של הטופס כמו input למשל, מנהלים ה-state של עצמם בהתבסס על הקלט של המשתמש. בריאקט ה-state הוא בלתי ניתן לשינוי וניתן לעדכנו רק באמצעות מתודת set. ב-controlled component ה-state מהווה single source of truth, וכך הקומפוננטה שמרנדרת את הטופס, גם שולטת מה קורה בטופס לאחר שהמשתמש מכניס את הקלט שלו. טופס שהערכים שלו מנוהלים על ידי הקומפוננטה נקרא controlled component.

ב-uncontrolled component הדאטה של הטופס מנוהלת על ידי ה-DOM עצמו. כדי לכתוב uncontrolled component, במקום לכתוב event handler עבור כל שינוי ב-state, ניתן להשתמש ב-ref כדי לקבל את הערך של הטופס מה-DOM.

בנוסף, controlled component היא קומפוננטה שמקבלת הערך הנוכחי שלה דרך props ומיידעת את קומפוננטת האב שלה אודות שינויים בערך המתקבל, באצעות callbacks, כמו onChange. קומפוננטת האב "שולטת" בה באמצעות טיפול ב-callbacks וניהול הסטייט של עצמה והחזרתו הערך החדש בחזרה לקומפוננטת הבן שוב באמצעות ה-props. ניתן גם לקרוא ל-controlled component – קומפוננטה טיפשה (dumb component).

בהתאם לזאת, uncontrolled component, היא קומפוננטה שמאחסנת את ה-state של עצמה בתוכה, ומתממשקת עם ה-DOM באמצעות ref כדי ללמוד אודות הערך הנוכחי שהיא צריכה. זה דומה לדרך בה פועל HTML.

#16 – מה זה קונטקסט (context)?

באפליקציית React טיפוסית, המידע מועבר למטה (מקומפוננטת אב לקומפוננטת ילד) דרך props, אבל עבור מידע שנדרש בהרבה קומפוננטות באפליקציה (כמו לדוגמא העדפות שפה או ערכת נושא של ממשק המשתמש) השימוש ב-props יכול להיות מסורבל ומיותר כאשר מעבירים פרופס מאב לבן, לנכד ולנין. קומפוננטות שלמות שאינן צריכות את המידע מקבלות אותו ללא צורך. דבר זה נקרא props drilling – חלחול props. קונטקסט מספק דרך לשתף מידע כזה בין קומפוננטות בלי להעביר אותו באופן מפורש לכל קומפוננטה. הקונטקסט נועד לשתף מידע שנחשב ״גלובאלי״ לכל הקומפוננטות בעץ, כמו מידע על המשתמש המאומת, ערכת הנושא או השפה המועדפת. בעזרת הקונטקסט, אפשר להמנע מלהעביר את ה-prop דרך רכיבי ביניים. השימוש בקונטקסט נועד בעיקר למצב שבו חלק מהמידע צריך להיות נגיש להרבה קומפוננטות בעומקים שונים.

#17 – כיצד ניתן להעביר data בין קומפוננטות

מאב לבן – באמצעות props. 

מבן לאב – באמצעות callbacks. 

כדי להעביר דאטה באופן גלובלי ישירות לכל קומפוננטה שהיא בעץ – באמצעות context או ספריות ניהול state חיצוניות כגון Redux או MobX.

#18 – מהם החסרונות של ריאקט?

• דוקומנטציה רשמית לוקה בחסר. 
• עקומת למידה רצינית למתחילים.
• השימוש ב-JSX יכול להיות מסובך למתכנתים מתחילים, שכן הוא מערבב בין syntax של HTML ל-syntax של JS. 

#19 – כיצד ניתן לשפר ביצועים בריאקט?

• שימוש ב-React.memo – קומפוננטה מסדר גבוה יותר (higher order component) שתעטוף את הקומפוננטה. המשמעות היא שאם הקומפוננטה תרנדר את אותה תוצאה בהינתן אותם ה-props, ריאקט ידלג על רנדור מחדש של הקומפוננטה ויעשה שימוש בגרסה השמורה של הקומפוננטה (memoizing).

• שימוש בפרגמנטים (React.Fragment) כדי להמנע מהוספת nodes לא נחוצים ל-DOM.

• שימוש ב-React.lazy ו-React.Suspense – טכניקה זו תטען את הקומפוננטה רק כאשר היא תצטרך להיטען. 

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

העיקרון שעומד מאחורי lazy loading של רכיבי React הוא טעינת הקוד המינימלי לדפדפן שמציג את דף. הטעינה היא של חלקים קטנים של קוד לפי הצורך. על ידי טעינת פחות קוד JS לדפדפן, זה יביא לביצועים טובים יותר.

React.lazy עושה את זה ממש פשוט להגיד ל-Webpack ולאפליקציה שלנו שניתן לטעון קבצים מסוימים וקוד מסויים מאוחר יותר באפליקציה.

#12 – מהי קומפוננטה מסדר גבוה יותר (Higher-Order Component)?

קומפוננטה מסדר גבוה יותר היא פונקציה שלוקחת קומפוננטה ומחזירה קומפוננטה אחרת. בשונה מקומפוננטה רגילה שמתרגמת מאפיינים לממשק משתמש, קומפוננטה מסדר גבוה יותר מתרגמת קומפוננטה לקומפוננטה אחרת. קומפוננטה מסדר גבוה יותר שכיחות בספריות צד שלישי של React, כמו למשל ה-connect של Redux וה-createFragmentContainer של Relay.

#21 – מה זה children prop?

זהו prop המאפשר להעביר קומפוננטות לקומפוננטות אחרות כמו כל prop אחר. בעיקרון, children prop זה prop מיוחד, המועבר אוטומטית לכל קומפוננטה, וניתן להשתמש בו כדי להציג את התוכן הכלול בין תגי הפתיחה והסגירה של הקומפוננטה.

בהינתן מצב בו אנו רוצים קומפננטת ImageSlider ורוצים שהיא תרנדר דבר כזה:

כפי שניתן לראות ImageSlider מורכבת מכמה תגיות  </img> שיכולות להתקבל ולהתרנדר באמצעות props.children:

הודות ל-props.children אנחנו יכולים לקנן את התוכן שלנו בתוך קומפוננטה, בדיוק כמו שאנחנו מקננים אלמנטים אחרים.

הערכים ב-props.children יכולים להיות undefined, null, בוליאני, מספר, סטרינג, אלמנט או מערך של כל אחד מהסוגים הללו באופן רקורסיבי. זה יכול להיות גם פונקציה שמחזירה אחד מהסוגים האלה.

יש לשים לב שבהתאם לדוקומנטציה של ריאקט למרות ש-false, null, undefined ו-true הם children prop חוקיים, ריאקט תתעלם מהם והם לא יוצגו.

#22 – מה זה useMemo?

פונקציית useMemo היא hook אשר ניתן לעטוף אותו סביב פונקציה או אובייקט והוא שומר על הרפרנס של הפונקציה או האובייקט ברנדור מחדש אם הערך שמועבר אליה במערך התלויות (dependencies array) אינו משתנה. כאשר היא עוטפת פונקציה, היא מחזירה רק את הערך שהפונקציה מחזירה והפונקציה לא תיווצר מחדש ולא תרוץ אם הערך במערך התלויות לא השתנה. זה שימושי כאשר יש בקומפוננטה פונקציה איטית וכבדה שאין צורך שתרוץ מחדש בכל רנדור אם המשתנה שהיא מקבלת לא השתנה. 

מה שעומד מאחורי זה זה עיקרון ה-memoization – שמירת ערך בקאש כדי שלא יהיה צורך לחשב אותו כל פעם מחדש. 

בדוגמה זו הערך של doubleNumber הוא התוצאה שהפונקציה slowFunction מחזירה ולא הפונקציה עצמה.

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

שימוש נוסף ל-useMemo הוא בעבודה עם אובייקטים. כידוע אובייקטים נשמרים בזיכרון לא כערכים אלא ברפרנס למקום בזיכרון. בדוגמה שלפנינו בכל רינדור מחדש של הקומפוננטה, ה-themeStyles יהיה אובייקט חדש שנוצר בזיכרון בעל רפרנס אחר לזיכרון, מה שיגרום ל-useEffect לרוץ בכל רנדור מחדש, כיוון שמנקודת מבטו הוא השתנה. 

כדי להמנע מכך ניתן לעטוף את האובייקט ב-useMemo וכל עוד הערך במערך התלויות של ה-useMemo, במקרה הזה זה המשתנה "dark", לא ישתנה, לא יווצר אובייקט חדש ויישמר הרפרנס בזיכרון לאותו אובייקט וה-useEffect לא ירוץ ללא צורך. 

#23 – מה זה useCallback?

זה hook שעוטף פונקציה ומונע את יצירתה מחדש ברנדור חדש אם הערך שמועבר אליה במערך התלויות (dependencies array) אינו משתנה. 

מה ש-useCallback מחזיר זה את כל הפונקציה שהוא עוטף ולא רק את הערך שהפונקציה הזו מחזירה בניגוד ל-useMemo, שמחזיר רק את הערך שהפונקציה מחזירה.

בדוגמה הזו getItems היא פונקציה ולא תוצאת הפונציה בלבד.

כמו כן הפונקציה ש-useCallback עוטפת, יכולה לקבל ארגומנטים:

מתחת למכסה המנוע מה ש-useCallback עושה היא שומרת על הרפרנס של הפונקציה בזיכרון (referential equality) וכל עוד מערך התלויות שלה לא משתנה, יתבצע שימוש בפונקציה השמורה בזיכרון ולא תיווצר פונקציה חדשה בכל רנדור. אחרת יתבצע רנדור מחדש מיותר לקומפוננת הבת אם היא מועברת אליה כ-prop למשל ואז עוברת פונקציה חדשה לגמרי ללא צורך בכל פעם.

מומלץ לעשות שימוש ב-useCallback כאשר הפונקציה היא חלק ממערך התלויות של hook ה-useEffect, או כאשר לפונקציה עצמה יש state פנימי משלה כמו למשל בפונקציית debounce. במקרים כאלה חשוב לשמור על שיוויון ברפרנס של הפונקציה כדי שמערך התלויות לא יזהה שינוי לא מהותי או שערך ה-state הפנימי שלה יישמר.

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

דוגמה למתי אין צורך להשתמש ב-useCallback:

#24 – מהם הכללים בשימוש ב-hooks?

• ניתן להשתמש ב-hooks רק בקומפוננטות פונקציונליות. 
• הם צריכים להיות ב-top level של הקומפוננטה. 
• אין להשתמש בהם בתוך בלוקים אחרים של קוד כמו לולאות, תנאים או בפונקציות אחרות.
• הם יוצאים לפועל לפי הסדר שלהם בקוד. 

שמירה על כללים אלה מבטיחים שה-hooks יקראו תמיד באותו סדר בכל פעם שהקומפוננטה מתרנדרת. זה מאפשר לריאקט לשמר נכון את ה-state של ה-hooks בין קריאות useState ו-useEffect מרובות.

#25 – מה ההבדל קומפוננטות מבוססות קלאסים לקומפוננטות פונקציונליות?

בגישה הישנה קומפוננטות בריאקט היו קלאסים. בגישה החדשה קומפוננטות יכולות להיות פונקציות וניהול הסטייט נעשה בהן באמצעות ה-hook שנקרא useState. 

קומפוננטות פונקציונליות הן פונקציות טהורות (pure function) שמקבלות ארגומנטים בצורת props ומחזירות אלמנטים בצורת JSX. 

בקומפוננטות מבוססות קלאסים יש לעשות extend from React.Component וחובה להשתמש בפונקציית render אשר מזירה אלמנטים בצורת JSX.

בקומפוננטות מבוססות קלאסים יש פונקציות life cycle שלא ניתן להריץ בקומפוננטות פונקציונליות. החלופה להן בקומפוננטות פונקציונליות היא בשימוש ב-hook שנקרא useEffect והעברת ארגומנטים למערך התלויות שלו, או החזרת פונקציה בתוכו, מה שגורם לו לפעול בשלבים שונים של חייה של הקומפוננטה. 

לקריאה נוספת:

• 11 קורסי אונליין שלימדו אותי פיתוח פרונט אנד
• 10 טיפים לראיון קוד מוצלח

אורי ברעם

מפתח Web ומרצה לתכנות בבוטקאמפ פולסטאק.
היכנסו לאתר שלי >> https://ori-baram.dev

The post 25 שאלות על ריאקט | "שליף" אולטימטיבי לראיון ב- React appeared first on TechMonster.