לימוד React – מדריך ל React Hooks מתקדמים

לימוד React – מדריך ל React Hooks מתקדמים

במאמר הקודם למדנו מה זה Hooks וראינו דוגמאות ל -Hooks הבסיסיים בריאקט כעת נעבור לשלב הבא ונכיר את ה-Hooks המתקדמים יותר: useMemo, useCallback, useLayoutEffect, useImperativeHandle, useDebugValue ו-useId. מאמר זה יספק דוגמאות קוד והסברים מפורטים לכל אחד מה-Hooks הללו.

useMemo

ה-Hook useMemo משמש למזעור חישובים חוזרים ולשיפור ביצועים על ידי החזרת ערך ממורכב רק כאשר אחת מהתלויות משתנה.

דוגמה:

import React, { useState, useMemo } from 'react';

function ExpensiveCalculationComponent({ num }) {
  const expensiveCalculation = (num) => {
    console.log("Calculating...");
    return num * 2;
  };

  const result = useMemo(() => expensiveCalculation(num), [num]);

  return <div>{result}</div>;
}

function App() {
  const [number, setNumber] = useState(0);

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value))}
      />
      <ExpensiveCalculationComponent num={number} />
    </div>
  );
}

במקרה זה, useMemo מבצע חישוב כבד רק כאשר הערך של num משתנה.

useCallback

ה-Hook useCallback מחזיר גרסה ממורכבת של פונקציה אשר משתנה רק אם אחת מהתלויות שלה משתנה. זה שימושי במיוחד כאשר מעבירים פונקציות לקומפוננטות ילד.

דוגמה:

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ handleClick }) => {
  console.log("Button re-rendered");
  return <button onClick={handleClick}>Click me</button>;
});

function App() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <Button handleClick={increment} />
    </div>
  );
}

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

useLayoutEffect

ה-Hook useLayoutEffect פועל כמו useEffect אך מתבצע לאחר כל רינדור ולאחר עדכון ה-DOM.

דוגמה:

import React, { useState, useMemo } from 'react';

function ExpensiveCalculationComponent({ num }) {
  const expensiveCalculation = (num) => {
    console.log("Calculating...");
    return num * 2;
  };

  const result = useMemo(() => expensiveCalculation(num), [num]);

  return <div>{result}</div>;
}

function App() {
  const [number, setNumber] = useState(0);

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value))}
      />
      <ExpensiveCalculationComponent num={number} />
    </div>
  );
}

במקרה זה, useLayoutEffect מאפשר גישה ל-DOM לאחר כל רינדור.

useImperativeHandle

ה-Hook useImperativeHandle מאפשר לקומפוננטות חשיפה של ערכים ופונקציות מסוימות דרך ה-Ref שלהן.

דוגמה:

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    clear: () => {
      inputRef.current.value = "";
    },
  }));

  return <input ref={inputRef} />;
});

function App() {
  const fancyInputRef = useRef();

  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button onClick={() => fancyInputRef.current.focus()}>Focus</button>
      <button onClick={() => fancyInputRef.current.clear()}>Clear</button>
    </div>
  );
}

במקרה זה, useImperativeHandle מאפשר גישה לפונקציות focus ו-clear של הקומפוננטה FancyInput.

useDebugValue

ה-Hook useDebugValue משמש להצגת ערכים במצב דיבוג.

דוגמה:

import React, { useState, useDebugValue } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useDebugValue(isOnline ? 'Online' : 'Offline');

  // דמיוני קוד להתחברות לסטטוס של חבר
  return isOnline;
}

function FriendListItem({ friendID }) {
  const isOnline = useFriendStatus(friendID);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {friendID}
    </li>
  );
}

במקרה זה, useDebugValue מציג מידע על סטטוס החבר בזמן דיבוג.

useId

ה-Hook useId משמש ליצירת מזהים ייחודיים שניתן להשתמש בהם ב-HTML.

דוגמה:

import React, { useId } from 'react';

function Form() {
  const id = useId();

  return (
    <div>
      <label htmlFor={`${id}-name`}>Name</label>
      <input id={`${id}-name`} type="text" />
    </div>
  );
}

function App() {
  return (
    <div>
      <Form />
    </div>
  );
}

במקרה זה, useId יוצר מזהה ייחודי עבור אלמנטים בטופס.

סיכום

React Hooks המתקדמים מאפשרים למפתחים לכתוב קוד אפקטיבי, ממוקד וביצועים טובים יותר. במאמר זה סקרנו את ה-Hooks useMemo, useCallback, useLayoutEffect, useImperativeHandle, useDebugValue ו-useId, יחד עם דוגמאות קוד והסברים לביצוע.

אם מעניין אותכם להתמקצע בריאקט או לעשות הסבה טכנולוגית לצוות שלכם, מוזמנים לדבר איתנו על קורס React

שתפו את הפוסט

צרו קשר

דילוג לתוכן