מהו מצב?

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

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

import { useState } from 'react';

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

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

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

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