State ו-useState - הנתונים שגורמים ל-UI להתעדכן

State הוא המנגנון שהופך React ל-interactive. בלי state, כל component הוא static - מקבל props, מחזיר JSX, נגמר. עם state, component יכול לזכור דברים בין renders ולהגיב לאינטראקציה של המשתמש.

כשמסתכלים על מוצר כמו Monday.com, כל לחיצה על סטטוס task, כל שינוי בשם board, כל toggle של sidebar - אלה state changes. כל הממשק הדינמי של Wix Editor, כשגוררים אלמנט ורואים אותו זז - state. Fiverr שמעדכנת מונה הצעות בזמן אמת - state. React מאפשרת לכל ה-interactions האלה לקרות בלי page reload, וכל ה-magic מתחיל ב-useState.

נניח שאתה בונה counter. ניסיון ראשון:

function Counter() {
  let count = 0;

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => { count++; console.log(count); }}>
        הוסף
      </button>
    </div>
  );
}

לוחצים. ה-console מראה 1, 2, 3. אבל ה-UI מראה 0 כל הזמן. למה?

כי כל פעם שReact מרנדרת את Counter, היא קוראת לפונקציה מחדש, ו-count מתחיל שוב מ-0. המשתנה count לא שורד בין renders. ו-גם אם הוא שרד - שינוי שלו לא מפעיל re-render. React לא יודעת שמשהו השתנה.

זה בדיוק הבעיה ש-useState פותרת. הבנה עמוקה של למה useState עובד כך תמנע ממך שעות של debugging עתידי.