מדריך ריאקט – react hooks | useState

כפי שציינתי הפוסט הקודם: מדריך ריאקט – classes, functional component & hooks העולם של מפתחי ריאקט הולך לכיוון של רכיבים כפונקציות, ולכן השימוש בהוקים הוא נפוץ יותר. ריאקט מביאים איתם אוסף של hooks מאד שימושיים שאותם נרצה להכיר. ונתחיל בהוק הראשון והנפוץ ביותר (או לפחות המוכר ביותר)

מדריך ריאקט בנושא: useState

למעשה השימוש ב useState מזכיר את הרעיון של setState ו State בקלאסים. אבל זה לא נרכיב על קלאסים כרגע כי זה פחות רלוונטי, אבל מי שמכיר קלאסים אולי זה יעזור לו להבין.

בעזרת useState תוכלו להנהל מידע "מקומי", כלומר של הרכיב עצמו , למשל :

import React, { useState } from 'react';

function CountCrocs() {
  // Declare a new state variable, which we'll call "count"
  const [totalCrocs, addCrocs] = useState(0);

  return (
    <div>
      <p>תנינים ברשת {count} יש לך </p>
      <button onClick={() => addCrocs(totalCrocs + 1)}>
        תפוס תנין
      </button>
    </div>
  );
}

נסביר לעומק על היכולות של useState ומה הוא עושה

קודם כל יש לייבא את useState מתוך react.

לאחר מכן נגדיר משתנה מערכי (Destructuring assignment) . המשתנה הראשון יהיה ההערך עצמו. המשתנה השני הוא הפונקציה שמנהלת את המידע . למשל במקרה שלנו מוסיפה אחד, וכמובן מחזירה אותו לתוך הערך של totalCrocs.

אפשר גם להשתמש בצורה הבאה ולראות שניתן גם לעשות שימוש בערך הקודם שהוגדר ל totalCrocs:

import React, { useState } from 'react';

function CountCrocs() {
  // Declare a new state variable, which we'll call "count"
  const [totalCrocs, addCrocs] = useState({type: null});

  return (
    <div>
      <p>תנינים ברשת {count.type} יש לך </p>
      <button onClick={() => addCrocs({type: 'codcodile'})}>
        תפוס תנין
      </button>
    </div>
  );
}

למעשה הפונקציה של useState מקבלת פוקציה שלוקחת את הערך הקודם ששמרה ומוסיפה לו 1 (המקרה שלנו) .

שימושים נוספים ל useState הם למשל לשמור מערך של מידע או אובייקט . לדוגמה:

סיכום useState Hook

שימושים רבים עושים עם react useState, וכן זהו הוק פשוט להבנה ומימוש, ההוקים הבאים הולכים ונהיים מורכבים יותר ובהמשך המדריך גם custom hooks משלכם. לכן חשוב לתרגל ולהבין היטב את ההוקים הראשונים הפשוטים על מנת להשתפר ולהתקדם בהמשך בלי להסתבך.

ההוק הבא שלנו הוא useEffect

פוסטים קשורים:

מדריך ריאקט – react hooks | useEffect מדריך ריאקט – react hooks | useReducer מדריך ריאקט – react hooks | useContext מדריך ריאקט – react hooks | useRef