הוקים מותאמים אישית ב-React: איך כותבים הוק משלכם

הוק מותאם אישית (custom hook) הוא פונקציה ששמה מתחיל ב-use ושקוראת להוקים אחרים. כותבים אחד כששתי קומפוננטות צריכות את אותה לוגיקה עם state: מעבירים את קריאות ה-useState וה-useEffect לתוך הפונקציה, מחזירים את מה שהקומפוננטה צריכה, וקוראים לה מכל קומפוננטה.

import { useState } from 'react';

function useToggle(initial = false) {
    const [on, setOn] = useState(initial);
    const toggle = () => setOn((v) => !v);
    return [on, toggle];
}

function Spoiler({ title, children }) {
    const [open, toggle] = useToggle();
    return (
        <div style={{ marginBottom: 8 }}>
            <button onClick={toggle}>{open ? 'Hide' : 'Show'} {title}</button>
            {open && <p>{children}</p>}
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Spoiler title="ending">The butler did it.</Spoiler>
            <Spoiler title="sequel">The butler did it again.</Spoiler>
        </div>
    );
}

שני הספוילרים קוראים ל-useToggle, ופתיחה של אחד משאירה את השני סגור. כל קריאה מריצה useState משלה, כך שכל קומפוננטה מקבלת ערך משלה. הוק מותאם משתף לוגיקה, לא state.

הכללים לכתיבת הוק

• השם מתחיל ב-use ובאות גדולה: useToggle, useOnlineStatus. כלל ה-lint של ההוקים משתמש בקידומת כדי למצוא קריאות להוקים ולבדוק אותן.
• הוא קורא לפחות להוק אחד. פונקציית עזר שלא קוראת לשום הוק היא פונקציה רגילה; תנו לה שם כמו formatDate, לא useFormatDate, כדי שאפשר יהיה לקרוא לה בכל מקום, גם בתוך תנאים.
• הוא עוקב אחרי כללי ההוקים: קוראים להוקים ברמה העליונה שלו, וקוראים לו רק מקומפוננטות או מהוקים מותאמים אחרים.
• הוא מחזיר כל מה שמועיל. מערך ([on, toggle]) נוח כשמי שקורא לו משנה את שמות הערכים; אובייקט ({ data, loading, error }) נקרא טוב יותר כשיש שלושה ערכים או יותר.

useLocalStorage: state ששורד רענון

useState שוכח הכל ברענון. ההוק הזה קורא את הערך ההתחלתי מ-localStorage וכותב בחזרה כל שינוי.

import { useState, useEffect } from 'react';

function readStored(key, fallback) {
    try {
        const raw = window.localStorage.getItem(key);
        return raw === null ? fallback : JSON.parse(raw);
    } catch {
        console.warn('localStorage is not available, keeping the value in memory');
        return fallback;
    }
}

function useLocalStorage(key, initial) {
    const [value, setValue] = useState(() => readStored(key, initial));

    useEffect(() => {
        try {
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch {
            // Storage blocked or full: the value still works for this visit
        }
    }, [key, value]);

    return [value, setValue];
}

export default function App() {
    const [name, setName] = useLocalStorage('demo-name', '');
    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
            <p>Hello, {name || 'stranger'}.</p>
        </div>
    );
}

התצוגה המקדימה רצה בתוך frame מבודד (sandbox) שבו הדפדפן חוסם את localStorage, אז כאן תראו את האזהרה ב-Console וההוק חוזר ל-state רגיל. בדף רגיל השם שורד רענון. ה-try/catch לא נועד רק לתצוגה המקדימה הזו: מצבי גלישה פרטית, עוגיות חסומות ומכסה מלאה גורמים לאחסון לזרוק שגיאה גם באפליקציות אמיתיות. העברת פונקציה ל-useState אומרת שהאחסון נקרא פעם אחת, ברינדור הראשון.

useDebounce: לחכות עד שהמשתמש מפסיק להקליד

תיבת חיפוש לא צריכה לשלוח בקשה בכל הקשה. useDebounce מחזיר עותק של ערך שמתעדכן רק אחרי שהוא הפסיק להשתנות לפרק זמן קבוע.

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
    const [debounced, setDebounced] = useState(value);

    useEffect(() => {
        const id = setTimeout(() => setDebounced(value), delay);
        return () => clearTimeout(id);
    }, [value, delay]);

    return debounced;
}

export default function App() {
    const [text, setText] = useState('');
    const query = useDebounce(text, 500);

    useEffect(() => {
        if (query) console.log('search for:', query);
    }, [query]);

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Search" />
            <p>Typed: {text}</p>
            <p>Debounced: {query}</p>
        </div>
    );
}

הקלידו מילה מהר: Typed עוקב אחרי כל מקש, Debounced משיג אותו חצי שנייה אחרי שאתם עוצרים, וה-Console רושם חיפוש אחד. כל הקשה משנה את value, ולכן React מריצה את ה-cleanup (clearTimeout) לפני שהיא מפעילה טיימר חדש. שנו את 500 ל-0 וכל הקשה רושמת חיפוש משלה.

useWindowWidth: הרשמה עם cleanup

הוק שמאזין לדפדפן חייב להסיר את ה-listener שלו כשהקומפוננטה נעלמת, אחרת כל mount משאיר אחד מאחור.

import { useState, useEffect } from 'react';

function useWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', onResize);
        console.log('resize listener added');
        return () => {
            window.removeEventListener('resize', onResize);
            console.log('resize listener removed');
        };
    }, []);

    return width;
}

function WidthBadge() {
    const width = useWindowWidth();
    return <p>This frame is {width}px wide: {width < 500 ? 'narrow' : 'wide'} layout.</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Unmount' : 'Mount'} badge</button>
            {show && <WidthBadge />}
        </div>
    );
}

שנו את גודל חלון הדפדפן והמספר עוקב. לחצו על הכפתור וה-Console מראה שה-listener מוסר. מחקו את ה-return מהאפקט, ואז עשו mount ו-unmount כמה פעמים: מקבלים שורת added בכל פעם ואף שורת removed, כך שה-listeners הישנים מצטברים. לערכי דפדפן כמו זה, useSyncExternalStore הוא ההוק ש-React בנתה בדיוק לשם כך, וטוב לקרוא לו בתוך הוק מותאם.

הלוגיקה משותפת, ה-state לא

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

import { useState } from 'react';

function useCounter() {
    const [count, setCount] = useState(0);
    return [count, () => setCount((c) => c + 1)];
}

function Counter({ name }) {
    const [count, increment] = useCounter();
    return (
        <p>
            {name}: {count} <button onClick={increment}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter name="First" />
            <Counter name="Second" />
        </div>
    );
}

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

מתי לכתוב הוק מותאם

חלצו הוק כשאותה קבוצה של קריאות להוקים מופיעה בשתי קומפוננטות, או כשלוגיקת האפקט של קומפוננטה אחת ארוכה מספיק כדי ששם יסביר אותה טוב יותר (useOnlineStatus() נקרא טוב יותר מעשרים שורות של listeners). אל תעטפו קריאה בודדת ל-useState בהוק רק כדי לשנות לה שם, ואל תכתבו הוקים שרק קוראים ל-useEffect כדי לקבוע state מ-props; חשבו את הערך הזה בזמן הרינדור במקום.