ההוק useRef ב-React: refs ל-DOM וערכים שנשמרים

useRef מחזיר אובייקט, { current: initialValue }, ש-React שומרת לאורך כל חיי הקומפוננטה. שינוי של ref.current לא מרנדר שום דבר מחדש. זה הופך את ה-refs למתאימים לשתי עבודות: החזקת צומת DOM כדי לקרוא עליו למתודות כמו focus(), וזכירת ערך בין רינדורים שהמסך לא צריך להציג.

import { useRef } from 'react';

export default function App() {
    const inputRef = useRef(null);

    function handleClick() {
        inputRef.current.focus();
        console.log('focused:', inputRef.current.tagName);
    }

    return (
        <div>
            <input ref={inputRef} placeholder="Click the button" />{' '}
            <button onClick={handleClick}>Focus the input</button>
        </div>
    );
}

העברת אובייקט ה-ref ל-ref={inputRef} אומרת ל-React לשים את צומת ה-DOM של ה-<input> ב-inputRef.current. שנו את focus() ל-select(), הקלידו משהו ולחצו שוב: הטקסט מסומן.

התחביר

const myRef = useRef(initialValue);

myRef.current;          // read
myRef.current = value;  // write, no re-render

• initialValue משמש רק ברינדור הראשון. ב-refs ל-DOM הוא null.
• React מחזירה את אותו אובייקט בכל רינדור. רק current משתנה.
• קריאה וכתיבה של current הן JavaScript רגיל. React לא עוקבת אחריהן.

ערך שלא גורם לרינדורים

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

import { useRef, useState } from 'react';

export default function App() {
    const clicks = useRef(0);
    const [renders, setRenders] = useState(0);

    console.log('render: ref =', clicks.current, ', state =', renders);

    function addToRef() {
        clicks.current = clicks.current + 1;
        console.log('ref.current is now', clicks.current, '(no render)');
    }

    return (
        <div>
            <p>Ref counter: {clicks.current}</p>
            <p>State counter: {renders}</p>
            <button onClick={addToRef}>Ref + 1</button>{' '}
            <button onClick={() => setRenders(renders + 1)}>State + 1</button>
        </div>
    );
}

לחצו על Ref + 1 כמה פעמים. הקונסול מראה ש-ref.current עולה, אבל בדף עדיין כתוב 0 ולא נרשם רינדור. עכשיו לחצו על State + 1: הקומפוננטה מתרנדרת, ומונה ה-ref על המסך קופץ למספר שה-ref כבר החזיק. ה-ref שמר את הערך שלו כל הזמן; ל-React פשוט לא הייתה סיבה לצייר אותו.

refs מול state

אם אתם לא בטוחים, שאלו אם ה-JSX קורא את הערך. אם כן, הוא שייך ל-state.

שמירת מזהה טיימר

setInterval מחזיר מזהה שצריך אחר כך כדי לעצור את הטיימר. זה מתאים מצוין ל-ref: ה-handler של Stop צריך אותו, אבל המסך אף פעם לא מציג אותו, ושמירה שלו במשתנה רגיל הייתה מאבדת אותו ברינדור הבא.

import { useRef, useState } from 'react';

export default function App() {
    const [seconds, setSeconds] = useState(0);
    const intervalRef = useRef(null);

    function start() {
        if (intervalRef.current !== null) return;
        intervalRef.current = setInterval(() => setSeconds((s) => s + 1), 1000);
        console.log('started timer', intervalRef.current);
    }

    function stop() {
        clearInterval(intervalRef.current);
        console.log('stopped timer', intervalRef.current);
        intervalRef.current = null;
    }

    return (
        <div>
            <p>{seconds} s</p>
            <button onClick={start}>Start</button>{' '}
            <button onClick={stop}>Stop</button>
        </div>
    );
}

החליפו את useRef(null) ב-let intervalRef = { current: null }; ונסו Start, חכו שתי שניות, ואז Stop: הטיימר ממשיך. כל tick מרנדר את הקומפוננטה, מה שיוצר אובייקט חדש, ולכן Stop לא מנקה כלום.

זכירת הערך הקודם

אפקט רץ אחרי הרינדור, ולכן הוא יכול להשוות את הערך החדש לזה ששמור ב-ref, ואז לשמור את החדש לפעם הבאה:

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

export default function App() {
    const [color, setColor] = useState('red');
    const previous = useRef(null);

    useEffect(() => {
        if (previous.current !== null) {
            console.log('changed from', previous.current, 'to', color);
        }
        previous.current = color;
    }, [color]);

    return (
        <div>
            {['red', 'green', 'blue'].map((c) => (
                <button key={c} onClick={() => setColor(c)}>{c}</button>
            ))}
            <p style={{ color }}>The color is {color}</p>
        </div>
    );
}

לחצו על green, ואז על blue: הקונסול רושם changed from red to green ו-changed from green to blue. לחיצה על הצבע שכבר נבחר לא רושמת כלום, כי האפקט רץ רק כש-color משתנה.

עבודה עם ה-DOM

refs הם הדרך לקרוא ל-APIs של הדפדפן שאין להם prop ב-React: focus(), select(), scrollIntoView(), play() על וידאו, או קריאת גודל עם getBoundingClientRect().

const lastItemRef = useRef(null);

function scrollToLast() {
    lastItemRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

<li ref={lastItemRef}>Last item</li>

ref.current הוא null בזמן הרינדור הראשון, כי React עוד לא יצרה את צומת ה-DOM, ושוב אחרי שהאלמנט מוסר. קראו אותו ב-event handlers ובאפקטים, שבהם הצומת קיים. כדי למדוד אלמנט ולמקם משהו לפני שהדפדפן מצייר, קראו את ה-ref ב-useLayoutEffect.

אל תקראו ואל תכתבו את ref.current בזמן הרינדור

React מצפה שגוף הקומפוננטה יהיה חישוב טהור: אותם props ו-state, אותו JSX. ref משתנה מחוץ למודל הזה, ולכן רינדור שקורא או כותב אותו יכול להציג תוצאות שונות לאותם קלטים, ו-React עשויה לקרוא לגוף יותר פעמים ממה שאתם מצפים.

function Bad() {
    const count = useRef(0);
    count.current++;              // writing during render
    return <p>{count.current}</p>; // reading during render
}

קראו וכתבו refs ב-event handlers ובאפקטים. החריג היחיד הוא אתחול עצל, שבו ממלאים את ה-ref פעם אחת ברינדור הראשון:

const playerRef = useRef(null);
if (playerRef.current === null) {
    playerRef.current = new VideoPlayer(); // runs once
}

(דמו מונה ה-ref שלמעלה קורא את clicks.current ב-JSX בכוונה, כדי להראות שהמסך לא עוקב אחריו. אל תעתיקו את זה לקוד אמיתי.)

ref callbacks

במקום אובייקט ref, אפשר להעביר פונקציה ל-ref. React קוראת לה עם צומת ה-DOM כשהאלמנט נוסף. ב-React 19 הפונקציה יכולה להחזיר cleanup, ש-React קוראת לו כשהאלמנט מוסר. זה שימושי ברשימה, שבה אי אפשר לקרוא ל-useRef פעם אחת לכל פריט:

import { useState } from 'react';

function trackNode(node) {
    console.log('attached', node.textContent);
    return () => console.log('detached', node.textContent);
}

export default function App() {
    const [items, setItems] = useState(['Apples', 'Bread', 'Cheese']);

    return (
        <div>
            <button onClick={() => setItems(items.slice(0, -1))}>Remove last</button>
            <ul>
                {items.map((item) => (
                    <li key={item} ref={trackNode}>{item}</li>
                ))}
            </ul>
        </div>
    );
}

בטעינה הקונסול רושם שורת attached אחת לכל פריט. לחצו על Remove last ומופיע רק detached Cheese. trackNode מוגדרת מחוץ לקומפוננטה, ולכן היא אותה פונקציה בכל רינדור ו-React משאירה את שאר הפריטים בשקט. כתבו אותה inline בתור ref={(node) => { ... }} במקום, וכל לחיצה מנתקת ומחברת מחדש כל פריט, כי כל רינדור מעביר פונקציה חדשה.

העברת ref לקומפוננטה משלכם

ב-React 19, ref הוא prop רגיל בקומפוננטות פונקציה. ההורה יוצר את ה-ref, והילד שם אותו על אלמנט ה-DOM שהוא רוצה לחשוף:

import { useRef } from 'react';

function SearchInput({ ref, ...props }) {
    return <input ref={ref} {...props} style={{ padding: 6 }} />;
}

export default function App() {
    const searchRef = useRef(null);

    return (
        <div>
            <SearchInput ref={searchRef} placeholder="Search" />{' '}
            <button onClick={() => searchRef.current.focus()}>Focus search</button>
        </div>
    );
}

לפני React 19 זה דרש forwardRef, שעדיין עובד. הדף על forwardRef מציג את שתי הגרסאות ואיך חושפים רק כמה מתודות עם useImperativeHandle.

טעויות נפוצות

הצגת ערך של ref ב-JSX. המסך לא עוקב אחריו. אם המשתמש צריך לראות את הערך, השתמשו ב-state.

שימוש ב-ref.current כתלות של אפקט. [ref.current] קורא את הערך בזמן הרינדור ו-React לא יודעת מתי הוא משתנה, ולכן האפקט לא רץ מחדש כשזה קורה. השתמשו ב-ref callback כדי להגיב לחיבור של צומת.

קריאת ref של DOM בזמן הרינדור הראשון. הוא null עד ש-React יצרה את הצומת. קראו אותו באפקט או ב-handler.

יצירת אובייקט חדש במקום להשתמש בהוק. const ref = { current: null } בגוף הקומפוננטה הוא אובייקט חדש בכל רינדור. רק useRef נותן לכם את אותו אובייקט בכל פעם.