ביום חמישי עוד שבוע וחצי אעביר פה וובינר על React Native. מקווה שתבואו. בינתיים עברתי על התיעוד של הספריות שרציתי להראות ונתקלתי בדוגמה הבאה מתוך התיעוד של React Navigation:

function HomeScreen({ navigation }) {
  const [count, setCount] = React.useState(0);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount((c) => c + 1)} title="Update count" />
      ),
    });
  }, [navigation]);

  return <Text>Count: {count}</Text>;
}

עם הכיתוב הזה מעל הדוגמה:

To be able to interact with the screen component, we need to use navigation.setOptions to define our button instead of the options prop. By using navigation.setOptions inside the screen component, we get access to screen's props, state, context etc.

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

אם ננסה לעדכן קצת את הכפתור שגם יציג את הערך של count נקבל את הקוד הבא:

function HomeScreen({ navigation }) {
  const [count, setCount] = React.useState(0);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount((c) => c + 1)} title={`Update count. Current value = ${count}`} />
      ),
    });
  }, [navigation]);

  return <Text>Count: {count}</Text>;
}

שלא עובד. או לפחות רץ ותמיד מציג 0 בתור הערך בכפתור (למרות שהערך במסך המרכזי כן מתעדכן).

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

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