רוצים להשתלב בתעשיית ההייטק?למסלולי הכשרה ב-Full Stack, סייבר ו-AI לחצו כאן

📘 מדריך React ומבוא לתכנות

הצעד הראשון שלכם בעולם הפיתוח מתחיל כאן. למידה מובנית מבית More-ways.

React logo

useState – Basics

תוכן עניינים

  1. מה זה useState?
  2. Destructuring (Array) – איך שולפים את הערכים
  3. דוגמה בסיסית: Counter
  4. כמה סטייטים נפרדים (name/age/hobby)
  5. סטייט כאובייקט אחד
  6. עדכון פונקציונלי ולמה הוא חשוב
  7. מתי מתבצע 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>
    </>
  );
}
דוגמה חיה
0

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 }));
דוגמה חיה
0

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

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

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

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

למה ללמוד תכנות וסייבר ב-More-ways?

עולם הטכנולוגיה משתנה במהירות, והיום כבר לא מספיק רק לדעת לכתוב קוד. ב-More-ways אנחנו מאמינים בשילוב קריטי בין פיתוח Full-Stack, הבנת ארכיטקטורת רשתות, ושימוש מתקדם ב-בינה מלאכותית (AI). המדריך שלפניכם הוא רק טעימה מהידע המקצועי שאנו מעבירים בקורסים שלנו, הכוללים ליווי אישי, פרויקטים מעשיים והכנה לשוק העבודה המודרני.

האם אפשר ללמוד תכנות ללא ניסיון?

בוודאי. המסלולים שלנו ב-More-ways מונגשים גם למתחילים, עם דגש על חשיבה לוגית ובניית בסיס איתן לפני הצלילה לקוד המורכב.

איך AI משתלב בלימודי הייטק?

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

מוכנים לקחת את הקריירה לשלב הבא?

מעבר לאתר More-ways הרשמי