useState – Basics

תוכן עניינים

מה זה useState?
Destructuring (Array) – איך שולפים את הערכים
דוגמה בסיסית: Counter
כמה סטייטים נפרדים (name/age/hobby)
סטייט כאובייקט אחד
עדכון פונקציונלי ולמה הוא חשוב
מתי מתבצע re-render?

1) מה זה useState?

useState הוא Hook שמאפשר לרכיבי פונקציה בריאקט להחזיק מצב (state). הוא מחזיר מערך עם שני איברים:
• הערך הנוכחי של ה־state
• פונקציה שמעדכנת את ה־state (העדכון גורר re-render של הרכיב)

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

בדוגמה הבאה נראה את חתימת הבסיס של useState — איך מגדירים state, ואיך מבצעים destructuring כדי לקבל את הערך ואת פונקציית העדכון.

import { useState } from 'react';

// חתימה בסיסית:
const [stateValue, setStateValue] = useState(defaultValue);

// דוגמה קצרה:
const [isOpen, setIsOpen] = useState(false);
setIsOpen(true); // יגרום ל-re-render עם isOpen=true

2) Destructuring (Array)

מכיוון ש־useState מחזיר מערך, מקובל להשתמש ב־Array Destructuring כדי לשלוף את שני האיברים ל־2 משתנים. השם הראשון הוא ה־state, והשני הוא פונקציית העדכון (מקובל להוסיף קידומת set).

כך עושים Destructuring בצורה קריאה: שם ה־state מסביר מה נשמר, ושם פונקציית העדכון מסביר מה היא מעדכנת.

const [count, setCount] = useState(0);
const [name, setName] = useState('peter');

3) דוגמה בסיסית: Counter

כאן נשתמש ב־useState כדי להחזיק מונה. כל לחיצה על הכפתור תקפיץ את הערך. שים לב: קריאה ל־setCount תגרום ל־re-render.

בדוגמה: count הוא הערך, ו־setCount היא פונקציית העדכון. ברירת מחדל 0, ובלחיצה אנחנו שולחים ערך חדש.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>count: {count}</p>
      <button className='btn' onClick={() => setCount(count + 1)}>
        +
      </button>
    </>
  );
}

דוגמה חיה

4) כמה סטייטים נפרדים (name/age/hobby)

לפעמים נוח להפריד בין ערכים שונים ל־state נפרד לכל שדה. זה הופך עדכונים לפשוטים וממוקדים.

כאן נגדיר שלושה סטייטים: name, age, hobby. כפתור אחד יעדכן את שלושתם.

import { useState } from 'react';

const UseStateObject = () => {
  const [name, setName] = useState('peter');
  const [age, setAge] = useState(24);
  const [hobby, setHobby] = useState('read books');

  const displayPerson = () => {
    setName('john');
    setAge(28);
    setHobby('scream at the computer');
  };
  return (
    <>
      <h3>{name}</h3>
      <h3>{age}</h3>
      <h4>Enjoys To: {hobby}</h4>
      <button className='btn' onClick={displayPerson}>
        show john
      </button>
    </>
  );
};

export default UseStateObject;

דוגמה חיה

name: peter

age: 24

hobby: read books

5) סטייט כאובייקט אחד

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

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

import { useState } from 'react';

const UseStateObject = () => {
  const [person, setPerson] = useState({
    name: 'peter',
    age: 24,
    hobby: 'read books',
  });

  const displayPerson = () => {
    setPerson({ name: 'john', age: 28, hobby: 'scream at the computer' });
    // עדכון חלקי נכון:
    // setPerson(prev => ({ ...prev, name: 'susan' }));
  };
  return (
    <>
      <h3>{person.name}</h3>
      <h3>{person.age}</h3>
      <h4>Enjoys To: {person.hobby}</h4>
      <button className='btn' onClick={displayPerson}>
        show john
      </button>
    </>
  );
};

export default UseStateObject;

דוגמה חיה

name: peter

age: 24

hobby: read books

6) עדכון פונקציונלי – כשהערך תלוי בערך הקודם

למה צריך? הקריאה ל־setState לא מעדכנת מיידית — ולכן אם הערך החדש תלוי בערך הקודם, עדיף להשתמש בצורה הפונקציונלית: setState(prev => next) . זה מבטיח שתשתמשו בערך העדכני.

הדוגמה הראשונה מעלה מונה בבטחה. הדוגמה השנייה מראה איך לעשות זאת גם אחרי השהייה (timeout).

const [value, setValue] = useState(0);

// תלוי בערך הקודם:
setValue(prev => prev + 1);

// אובייקט תלוי־ערך:
setState(prev => ({ ...prev, count: prev.count + 1 }));

דוגמה חיה

7) מתי מתבצע Re-render?

כל קריאה ל־setState שמחליפה ערך במשהו חדש תגרום ל־re-render.
React 18 עושה Auto-batching: כמה עדכונים צמודים באותו event-loop יאוחדו לרינדור אחד.
אם תדפיסו ללוג מיד אחרי setState, תראו את הערך הישן. הרינדור החדש יגיע מיד לאחר מכן.

📚 מקורות מומלצים (Docs) – useState

עמודי תיעוד רשמיים להבנת useState לעומק, דפוסי עדכון וארכיטקטורת state:

📘React - מדריך

useState – Basics

תוכן עניינים

1) מה זה useState?

2) Destructuring (Array)

3) דוגמה בסיסית: Counter

דוגמה חיה

4) כמה סטייטים נפרדים (name/age/hobby)

דוגמה חיה

5) סטייט כאובייקט אחד

דוגמה חיה

6) עדכון פונקציונלי – כשהערך תלוי בערך הקודם

דוגמה חיה

7) מתי מתבצע Re-render?

📚 מקורות מומלצים (Docs) – useState