זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/react/lessons/custom-hook
אם הסטייט לא שמור בפקד עצמו אלא רק בפונקציית ה-hook כיצד מתבצע הרינדור?
אפשר לדמיין את הנושא של Hooks ופקדים פונקציונאליים כאילו ריאקט שומר את כל הסטייט של כל הפקדים במקום מרכזי, ומה שמקבלים חזרה מ useState זה סוג של “מצביע” לאותו מקום מרכזי. בצורה כזאת פונקציית ה Custom Hook היא זאת שיוצרת את המצביע ומחזירה אותו לפקד אבל מה שחשוב להבין זה שלא משנה מי ייצור את הקישור לסטייט ולאן נעביר אותו - כל אחד יכול להשתמש בו.
(וגם זה לא תיאור הכי מדויק כי אפשר להשתמש ב useState רק מתוך קוד של פקד ולכן בכל מקרה אפשר להפעיל את ה Custom Hook רק מתוך קוד של פקד)
אני מבינה שכל אחד יכול להשתמש בו כמו שפקד אב יכול להעביר את הסטייט שלו לילדים כ-props.
אבל אם משנים את הסטייט ההוא אז נעשה רינדור מחדש רק של אותו פקד שבו שמור הסטייט וממילא גם של כל הילדים שלו.
ועכשיו לדוגמא פה:
function Clock() {
const tick = useTimer();
return (
<p>tick... {tick}</p>
);
}
האם זה נחשב שהפונקציה -Clock היא זו שמחזיקה את הסטייט? הרי היא רק מקבלת את הערך של המשתנה השמור בסטייט בפונקציית ה-Custom Hook. והפונקציה הזו היא לא פקד ‘אב’ שאפשר לומר שהרינדור שלה מביא לרינדור של הילד שלה.
בדיוק - אנחנו נגיד שהפונקציה Clock היא זו שמחזיקה את הסטייט (למרות שאנחנו זוכרים בלב שסטייט של פקדים פונקציונאליים נשמר במקום רחוק ומה שיש לנו ביד זה רק “מצביע” לסטייט הזה)
לייק 1
שלום ינון,
מה החידוש הגדול של custom hook? בדיוק כמו כל פונקציית java script שקוראים לה פעמיים,
וגם זה עובד בדיוק כמו שיתוף jsx במקום פונקציה שמחזירה jsx וקוראים לה ב jsx, עושים פונקציה שיוצרת קוד js ומחזירה משתנים וקוראים לה בחלק של הקוד js.
עוד משהו,
בדוגמה שלך שני הקומפוננטות נמצאות בקובץ אחד יחד עם קומפוננטת האבא,
אבל אם הייתי מחלק את הקומפוננטות לקבצים שונים (גם news Ticker, וגם clock בקובץ נפרד כל אחד), נצרך כאשר הקוד מתארך…
איך אני מעביר את הפונקציה של הcustom hooks, האם דרך props או שיש דרך יותר טובה?
תודה רבה!
הי,
נכון Custom Hook הוא בדיוק כמו פונקציית JavaScript רגילה וזה בדיוק החידוש 
צריך לזכור שלפני הכתיב של useState בריאקט לא היתה דרך קלה לקחת פוקנציונאליות שקשורה לסטייט של קומפוננטה ולהוציא אותה לפונקציה נפרדת. מנגנון ניהול הסטייט הישן יותר התבסס על ירושה בין מחלקות. ברגע שהם העבירו את שמירת הסטייט לפונקציה שמחזירה את הצמד ״משתנה״-״פונקציית עדכון״ הם איפשרו לך לזרוק את הקוד המשותף לפונקציה רגילה ופשוט להשתמש בה מכל קומפוננטה שצריכה אותה.
אתה לא צריך ״להעביר״ את ה Custom Hook בשום צורה, כי זו פונקציה גלובאלית רגילה. פשוט טוען אותה מכל קומפוננטה שצריכה אותה ומפעיל, בדיוק כמו שאתה קורא ל useState. זה לא משנה אם זה באותו קובץ או בקבצים נפרדים.
אם זה יהיה בקובץ נפרד אז בקובץ הנפרד נכתוב:
export const useClock = () => { ... };
ובקובץ שצריך את הפונקציה נכתוב:
import { useClock } from './clockHooks.js';
הדבר החשוב לזכור לגבי Custom Hooks זה שפונקציית Custom Hook בדרך כלל תקרא לפונקציות ה Hook הסטנדרטיות של ריאקט - כלומר ל useState, useEffect וכו. בגלל זה אנחנו יכולים לקרוא להן רק מתוך קומפוננטות וסדר הקריאות חייב להיות אחיד (אי אפשר לשים פונקציה כזאת בתוך if שלפעמים יקראו לה ולפעמים לא).
מסיבה זאת נוהגים לשים את התחילית use לפני פונקציית Custom Hook, כדי שתדע כשאתה מסתכל על הקוד שאת הפונקציה הזאת מותר להפעיל רק מתוך קומפוננטה ולפי הכללים של ה Hooks.
אוקיי הבנתי תודה רבה 