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

import "./styles.css";

function Counter() {
  function handleClick() {
    const btn = document.querySelector(".counter button");
    const count = Number(btn.textContent);
    btn.textContent = count + 1;
  }

  return (
    <div className="counter">
      <button onClick={handleClick}>0</button>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

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

1. הקוד לא יציב - אם App ישתנה, למשל אם יוסיפו עוד Counter, אז אחד מהם יפסיק לעבוד בגלל השימוש ב document.querySelector. יותר מזה, אם יוסיפו משתנה State או Props ל Counter אז ברינדור הבא הערך שכתוב בכפתור יימחק.

2. הקוד מעודד סטנדרטים לא טובים - ככל שהקוד יועתק ליותר מקומות למערכת (כמו שקורה לקוד), איכות הקוד הכללי במערכת תרד. מי שכתב אותו בבירור לא מבין מספיק את ריאקט.

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

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