Hook useRef trong React: ref DOM và giá trị được giữ lại

useRef trả về một object, { current: initialValue }, mà React giữ suốt vòng đời của component. Thay đổi ref.current không làm gì render lại. Điều đó khiến ref phù hợp cho hai việc: giữ một node DOM để bạn gọi các phương thức như focus() trên nó, và ghi nhớ một giá trị giữa các lần render mà màn hình không cần hiển thị.

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>
    );
}

Truyền object ref cho ref={inputRef} là bảo React đặt node DOM của <input> vào inputRef.current. Đổi focus() thành select(), gõ gì đó, rồi click lần nữa: đoạn chữ được bôi đen.

Cú pháp

const myRef = useRef(initialValue);

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

• initialValue chỉ được dùng ở lần render đầu tiên. Với ref DOM, nó là null.
• React trả về cùng một object ở mọi lần render. Chỉ current thay đổi.
• Đọc và ghi current là JavaScript bình thường. React không theo dõi nó.

Giá trị không gây render

State dành cho những gì màn hình hiển thị. Ref dành cho những gì component cần nhớ nhưng không hiển thị. Ví dụ này giữ một biến đếm trong ref và một trong state, rồi ghi log cả hai:

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>
    );
}

Click Ref + 1 vài lần. Console cho thấy ref.current tăng lên, nhưng trang vẫn hiện 0 và không có lần render nào được ghi log. Giờ click State + 1: component render, và biến đếm ref trên màn hình nhảy lên đúng con số mà ref đã giữ sẵn. Ref vẫn giữ giá trị suốt thời gian đó; chỉ là React không có lý do gì để vẽ nó.

Ref và state

Nếu chưa chắc, hãy hỏi xem JSX có đọc giá trị đó không. Nếu có, nó thuộc về state.

Lưu id của timer

setInterval trả về một id mà sau này bạn cần để dừng timer. Nó rất hợp để đặt trong ref: handler Stop cần nó, nhưng màn hình không bao giờ hiển thị nó, và giữ nó trong một biến thường sẽ làm mất nó ở lần render sau.

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>
    );
}

Thay useRef(null) bằng let intervalRef = { current: null }; rồi thử Start, đợi hai giây, rồi Stop: timer vẫn tiếp tục chạy. Mỗi nhịp đều làm component render, tạo ra một object mới, nên Stop chẳng xóa được gì.

Ghi nhớ giá trị trước đó

Effect chạy sau khi render, nên nó có thể so sánh giá trị mới với giá trị lưu trong ref, rồi lưu giá trị mới cho lần sau:

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>
    );
}

Click green, rồi blue: console ghi changed from red to green và changed from green to blue. Click vào màu đang được chọn thì không ghi gì, vì effect chỉ chạy khi color thay đổi.

Làm việc với DOM

Ref là cách bạn gọi các API của trình duyệt mà React không có prop tương ứng: focus(), select(), scrollIntoView(), play() trên một video, hay đọc kích thước bằng getBoundingClientRect().

const lastItemRef = useRef(null);

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

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

ref.current là null trong lần render đầu tiên, vì React chưa tạo node DOM, và lại là null sau khi phần tử bị gỡ bỏ. Hãy đọc nó trong event handler và effect, nơi node đã tồn tại. Để đo một phần tử và đặt vị trí cho thứ gì đó trước khi trình duyệt vẽ, hãy đọc ref trong useLayoutEffect.

Đừng đọc hay ghi ref.current trong lúc render

React mong thân component là một phép tính thuần: cùng props và state thì cùng JSX. Ref thay đổi bên ngoài mô hình đó, nên một lần render đọc hay ghi nó có thể cho kết quả khác nhau với cùng đầu vào, và React có thể gọi thân component nhiều lần hơn bạn nghĩ.

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

Hãy đọc và ghi ref trong event handler và effect. Ngoại lệ duy nhất là khởi tạo lười, khi bạn gán giá trị cho ref một lần ở lần render đầu tiên:

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

(Ví dụ biến đếm ref ở trên cố tình đọc clicks.current trong JSX, để cho thấy màn hình không bám theo nó. Đừng chép cách đó vào code thật.)

Ref callback

Thay vì một object ref, bạn có thể truyền một hàm cho ref. React gọi hàm đó với node DOM khi phần tử được thêm vào. Trong React 19, hàm này có thể trả về một cleanup, và React gọi nó khi phần tử bị gỡ bỏ. Cách này tiện cho danh sách, nơi bạn không thể gọi useRef một lần cho mỗi phần tử:

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>
    );
}

Khi tải trang, console ghi một dòng attached cho mỗi phần tử. Click Remove last thì chỉ có detached Cheese xuất hiện. trackNode được khai báo bên ngoài component, nên ở mọi lần render nó vẫn là cùng một hàm và React để yên các phần tử khác. Nếu viết trực tiếp ref={(node) => { ... }} thì mỗi lần click đều gỡ ra rồi gắn lại mọi phần tử, vì mỗi lần render truyền vào một hàm mới.

Truyền ref cho component của bạn

Trong React 19, ref là một prop bình thường của function component. Component cha tạo ref, và component con gắn nó lên phần tử DOM mà nó muốn cho bên ngoài dùng:

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>
    );
}

Trước React 19, việc này cần forwardRef, và cách đó vẫn hoạt động. Trang forwardRef trình bày cả hai phiên bản và cách chỉ cho bên ngoài dùng vài phương thức bằng useImperativeHandle.

Lỗi thường gặp

Hiển thị giá trị ref trong JSX. Màn hình không bám theo nó. Nếu người dùng cần thấy giá trị, hãy dùng state.

Dùng ref.current làm dependency của effect. [ref.current] đọc giá trị trong lúc render và React không biết khi nào nó thay đổi, nên effect không chạy lại khi nó đổi. Hãy dùng ref callback để phản hồi việc một node được gắn vào.

Đọc ref DOM trong lần render đầu tiên. Nó là null cho đến khi React tạo xong node. Hãy đọc nó trong effect hoặc handler.

Tạo object mới thay vì dùng hook. const ref = { current: null } trong thân component là một object mới ở mỗi lần render. Chỉ useRef mới cho bạn cùng một object mỗi lần.