React Hooks מובנים

State Hooks

State מאפשר לקומפוננטה “לזכור” מידע כמו קלט מהמשתמש. לדוגמה, קומפוננטת טופס יכולה להשתמש ב-state כדי לשמור את ערך הקלט, בעוד קומפוננטת גלריית תמונות יכולה להשתמש ב-state כדי לשמור את אינדקס התמונה שנבחרה.

כדי להוסיף state לקומפוננטה, השתמשו באחד מה-Hooks הבאים:

• useState מצהיר על משתנה state שאפשר לעדכן ישירות.
• useReducer מצהיר על משתנה state עם לוגיקת העדכון בתוך פונקציית reducer.

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

Context Hooks

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

• useContext קורא ל-context ונרשם אליו.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Ref Hooks

Refs מאפשרים לקומפוננטה להחזיק מידע שלא משמש לרינדור, כמו DOM node או מזהה timeout. בניגוד ל-state, עדכון של ref לא מרנדר מחדש את הקומפוננטה. Refs הם “escape hatch” מהפרדיגמה של React. הם שימושיים כשצריך לעבוד עם מערכות שאינן React, כמו APIs מובנים של הדפדפן.

• useRef מצהיר על ref. אפשר לשמור בו כל ערך, אבל לרוב משתמשים בו כדי לשמור DOM node.
• useImperativeHandle מאפשר להתאים אישית את ה-ref שהקומפוננטה חושפת. זה בשימוש נדיר.

function Form() {
  const inputRef = useRef(null);
  // ...

Effect Hooks

Effects מאפשרים לקומפוננטה להתחבר ולהסתנכרן עם מערכות חיצוניות. זה כולל עבודה עם רשת, DOM של הדפדפן, אנימציות, ווידג’טים שנכתבו בספריית UI אחרת, וקוד נוסף שאינו React.

• useEffect מחבר קומפוננטה למערכת חיצונית.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Effects הם “escape hatch” מהפרדיגמה של React. אל תשתמשו ב-Effects כדי לתזמר את זרימת הנתונים של האפליקציה. אם אתם לא מקיימים אינטראקציה עם מערכת חיצונית, יכול להיות שאין צורך ב-Effect.

יש שתי וריאציות נדירות יותר של useEffect עם הבדלים בתזמון:

• useLayoutEffect מופעל לפני שהדפדפן מצייר מחדש את המסך. אפשר למדוד layout כאן.
• useInsertionEffect מופעל לפני ש-React מבצעת שינויים ב-DOM. ספריות יכולות להכניס כאן CSS דינמי.

Performance Hooks

דרך נפוצה לאופטימיזציה של ביצועי רינדור מחדש היא לדלג על עבודה מיותרת. לדוגמה, אפשר לבקש מ-React להשתמש מחדש בחישוב שמור או לדלג על רינדור חוזר אם הנתונים לא השתנו מאז הרינדור הקודם.

כדי לדלג על חישובים ורינדורים מיותרים, השתמשו באחד מה-Hooks הבאים:

• useMemo מאפשר לשמור במטמון תוצאה של חישוב יקר.
• useCallback מאפשר לשמור במטמון הגדרת פונקציה לפני שמעבירים אותה לקומפוננטה ממוטבת.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

לפעמים אי אפשר לדלג על רינדור מחדש כי המסך באמת צריך להתעדכן. במקרה כזה אפשר לשפר ביצועים על ידי הפרדה בין עדכונים חוסמים שחייבים להיות סינכרוניים (כמו הקלדה בשדה קלט) לבין עדכונים לא-חוסמים שלא צריכים לחסום את ממשק המשתמש (כמו עדכון גרף).

כדי לתעדף רינדור, השתמשו באחד מה-Hooks הבאים:

• useTransition מאפשר לסמן מעבר state כלא-חוסם ולאפשר לעדכונים אחרים להפריע לו.
• useDeferredValue מאפשר לדחות עדכון של חלק לא-קריטי ב-UI ולאפשר לחלקים אחרים להתעדכן קודם.

Resource Hooks

Resources ניתנים לגישה מתוך קומפוננטה גם בלי להיות חלק מה-state שלה. לדוגמה, קומפוננטה יכולה לקרוא הודעה מתוך Promise או מידע עיצובי מתוך context.

כדי לקרוא ערך ממשאב, השתמשו ב-Hook הבא:

• use מאפשר לקרוא ערך ממשאב כמו Promise או context.

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}

Hooks נוספים

ה-Hooks האלה שימושיים בעיקר למחברי ספריות, ולא בשימוש נפוץ בקוד אפליקטיבי.

• useDebugValue מאפשר להתאים את התווית ש-React DevTools מציג עבור custom Hook.
• useId מאפשר לקומפוננטה לשייך לעצמה מזהה ייחודי. לרוב בשילוב עם APIs של נגישות.
• useSyncExternalStore מאפשר לקומפוננטה להירשם לחנות חיצונית.

Hooks משלכם

אפשר גם להגדיר custom Hooks משלכם כפונקציות JavaScript.