מהו מצב?

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

React מספקת לרכיבים מצב באמצעות ה-hook useState:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

שורה אחת, שלושה חלקים:

• count: הערך הנוכחי
• setCount: הפונקציה שמשנה אותו
• useState(0): הערך ההתחלתי

כלל הזהב: לעולם אל תקצה ערך ישירות למצב. count = 5 משנה משתנה ש-React לא עוקבת אחריו. setCount(5) משנה את המצב ומרנדר מחדש את הרכיב. הרינדור מחדש הזה הוא מה שמעדכן את המסך.