הוקים ב-React: כל ההוקים בהסבר עם דוגמאות חיות

הוקים ב-React הם פונקציות ששמן מתחיל ב-use ומאפשרות לקומפוננטת פונקציה להשתמש ביכולות של React: useState כדי לזכור ערך, useEffect כדי להריץ קוד אחרי הרינדור, useRef כדי להחזיק צומת DOM, useContext כדי לקרוא נתונים משותפים. קוראים להם בראש הקומפוננטה, ו-React שומרת את הערכים שלהם בין רינדורים.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

ארבעה הוקים עובדים כאן יחד. useState שומר את הטקסט, useRef מצביע על השדה כדי שהכפתור יוכל לתת לו פוקוס, useMemo שומר את הרשימה המסוננת עד שהשאילתה משתנה, ו-useEffect רושם אחרי כל רינדור שבו השאילתה השתנתה. הקלידו an ושימו לב ל-Console: שורה אחת לכל הקשה, אחרי שהרשימה מתעדכנת.

למה הוקים קיימים

לפני React 16.8, קומפוננטה שהייתה צריכה state או קוד מחזור חיים הייתה חייבת להיות class. הלוגיקה של פיצ'ר אחד התפצלה בין componentDidMount, componentDidUpdate ו-componentWillUnmount, ושיתוף שלה בין קומפוננטות דרש mixins (שאף פעם לא עבדו עם תחביר class), higher order components או render props, וכולם עטפו את העץ בשכבות נוספות.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

עם הוקים אותו פיצ'ר חי במקום אחד: האפקט מפעיל את הטיימר וה-cleanup שלו עוצר אותו.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

הסתירו את השעון וה-Console מדפיס timer stopped: React הריצה את ה-cleanup כש-Clock עזב את המסך. הציגו אותו שוב וטיימר חדש מתחיל. קומפוננטות class עדיין עובדות ב-React 19, אבל קוד חדש משתמש בהוקים.

כל ההוקים המובנים

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

use, useActionState, useOptimistic ו-useFormStatus הגיעו עם React 19, ו-useEffectEvent נהיה יציב ב-19.2. כל שאר ההוקים ברשימה עובדים גם ב-React 18.

state מרנדר, refs לא

לא כל הוק מפעיל רינדור. useState ו-useReducer כן: שנו את הערך שלהם ו-React מציירת את הקומפוננטה שוב. useRef נותן לכם אובייקט שאפשר לשנות את שדה ה-current שלו בחופשיות, ו-React אף פעם לא מרנדרת מחדש בגללו. זה הופך אותו למקום הנכון למזהה טיימר, לערך קודם, או לספירה שהמסך לא מציג.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer מחזיק את העגלה ו-useState מחזיק את ההערה; שניהם גורמים לרינדור כשהם משתנים, והאפקט רושם שורה אחת לכל רינדור. האפקט גם משנה את commits.current, ובכל זאת השינוי הזה אף פעם לא גורם לרינדור משלו, ולכן הלוג לא נכנס ללולאה. הספירה מתעדכנת באפקט ולא בגוף הקומפוננטה כי הגוף לא אמור לשנות שום דבר בזמן שהוא מתרנדר.

כללי ההוקים

כל הוק עוקב אחרי שני כללים:

1. קראו להוקים ברמה העליונה של הקומפוננטה, אף פעם לא בתוך תנאי, לולאה או פונקציה מקוננת.
2. קראו להוקים רק מקומפוננטות פונקציה או מהוקים מותאמים משלכם.

React לא מכירה הוקים לפי שם. היא מכירה אותם לפי הסדר שבו קוראים להם, ומצפה שהסדר הזה יהיה זהה בכל רינדור. הוק בתוך if היה מזיז כל הוק שאחריו. הדף על כללי ההוקים מראה מה נשבר ואיך מתקנים. use הוא החריג היחיד: מותר לקרוא לו בתוך תנאי.

ההוק המותאם הראשון שלכם

כששתי קומפוננטות צריכות את אותה לוגיקה עם state, העבירו אותה לפונקציה ששמה מתחיל ב-use. הפונקציה הזו יכולה לקרוא לכל הוק אחר. כל קומפוננטה שקוראת לה מקבלת state משלה.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

שני המונים מריצים את אותו הוק, אבל לחיצה על אחד לא נוגעת בשני: הוק מותאם משתף לוגיקה, לא state. הוסיפו פונקציית decrement ל-useCounter וכפתור שקורא לה, ושני המונים מקבלים אותה בבת אחת. דפוסים נוספים (useToggle, useDebounce, useLocalStorage) נמצאים בדף על הוקים מותאמים אישית.

לאיזה הוק לפנות

• המסך צריך להשתנות כשערך משתנה: useState, או useReducer כשהרבה אירועים מעדכנים את אותו state.
• צריך לדבר עם משהו מחוץ ל-React (טיימר, מנוי, בקשה): useEffect.
• צריך צומת DOM או ערך שהמסך לא מציג: useRef.
• הרבה קומפוננטות עמוק בעץ צריכות את אותו ערך: useContext.
• רינדור איטי בגלל חישוב אחד או בגלל שילד עם memo מתרנדר מחדש: useMemo ו-useCallback. React Compiler יכול להוסיף את ה-memoization הזה בשבילכם, אבל כתיבה ידנית עדיין עובדת ועדיין נפוצה.
• ההקלדה מרגישה איטית כי העדכון שמאחוריה כבד: useTransition או useDeferredValue.