Hook useRef di React: Ref DOM dan Nilai yang Bertahan

useRef mengembalikan sebuah object, { current: initialValue }, yang disimpan React selama komponen itu hidup. Mengubah ref.current tidak merender ulang apa pun. Itu membuat ref tepat untuk dua tugas: menyimpan node DOM agar kamu bisa memanggil method seperti focus() padanya, dan mengingat nilai di antara render yang tidak perlu ditampilkan di layar.

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

Memberikan object ref ke ref={inputRef} memberi tahu React untuk menaruh node DOM <input> di inputRef.current. Ganti focus() menjadi select(), ketik sesuatu, lalu klik lagi: teksnya akan tersorot.

Sintaksnya

const myRef = useRef(initialValue);

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

• initialValue hanya dipakai di render pertama. Untuk ref DOM, nilainya null.
• React mengembalikan object yang sama di setiap render. Hanya current yang berubah.
• Membaca dan menulis current adalah JavaScript biasa. React tidak melacaknya.

Nilai yang tidak memicu render

State dipakai untuk apa yang ditampilkan di layar. Ref dipakai untuk apa yang perlu diingat komponen tapi tidak ditampilkan. Blok ini menyimpan satu counter di ref dan satu di state, lalu mencatat keduanya:

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

Klik Ref + 1 beberapa kali. Console menunjukkan ref.current terus naik, tapi halaman masih menampilkan 0 dan tidak ada render yang tercatat. Sekarang klik State + 1: komponen dirender, dan counter ref di layar melompat ke angka yang sudah disimpan ref itu. Ref mempertahankan nilainya sepanjang waktu; React hanya tidak punya alasan untuk menggambarnya.

Ref vs state

Kalau ragu, tanyakan apakah JSX membaca nilai itu. Kalau ya, nilai itu tempatnya di state.

Menyimpan id timer

setInterval mengembalikan id yang nanti kamu butuhkan untuk menghentikan timer. Id ini cocok disimpan di ref: handler Stop membutuhkannya, tapi layar tidak pernah menampilkannya, dan menyimpannya di variabel biasa akan membuatnya hilang di render berikutnya.

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

Ganti useRef(null) dengan let intervalRef = { current: null }; lalu coba Start, tunggu dua detik, kemudian Stop: timer-nya terus berjalan. Setiap detik komponen dirender, yang membuat object baru, jadi Stop tidak menghentikan apa pun.

Mengingat nilai sebelumnya

Effect berjalan setelah render, jadi effect bisa membandingkan nilai baru dengan nilai yang tersimpan di ref, lalu menyimpan nilai baru itu untuk berikutnya:

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

Klik green, lalu blue: console mencatat changed from red to green dan changed from green to blue. Mengklik warna yang sudah terpilih tidak mencatat apa pun, karena effect hanya berjalan saat color berubah.

Bekerja dengan DOM

Ref adalah cara memanggil API browser yang tidak punya prop di React: focus(), select(), scrollIntoView(), play() pada video, atau membaca ukuran dengan getBoundingClientRect().

const lastItemRef = useRef(null);

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

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

ref.current bernilai null selama render pertama, karena React belum membuat node DOM-nya, dan begitu pula setelah elemennya dihapus. Baca di event handler dan effect, tempat node itu sudah ada. Untuk mengukur elemen dan memosisikan sesuatu sebelum browser menggambar layar, baca ref di useLayoutEffect.

Jangan membaca atau menulis ref.current saat render

React mengharapkan badan komponen berupa perhitungan murni: props dan state yang sama, JSX yang sama. Ref berubah di luar model itu, jadi render yang membaca atau menulisnya bisa menampilkan hasil berbeda untuk input yang sama, dan React mungkin memanggil badan komponen lebih sering dari yang kamu kira.

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

Baca dan tulis ref di event handler dan effect. Satu-satunya pengecualian adalah inisialisasi lazy, saat kamu mengisi ref sekali di render pertama:

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

(Demo counter ref di atas sengaja membaca clicks.current di JSX, untuk menunjukkan bahwa layar tidak mengikutinya. Jangan menyalin cara itu ke kode sungguhan.)

Ref callback

Alih-alih object ref, kamu bisa memberikan sebuah fungsi ke ref. React memanggilnya dengan node DOM saat elemen itu ditambahkan. Di React 19, fungsi itu bisa mengembalikan cleanup, yang dipanggil React saat elemennya dihapus. Ini berguna untuk sebuah daftar, karena kamu tidak bisa memanggil useRef sekali per item:

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

Saat dimuat, console mencatat satu baris attached per item. Klik Remove last dan hanya detached Cheese yang muncul. trackNode didefinisikan di luar komponen, jadi fungsinya sama di setiap render dan React membiarkan item lainnya. Tulis secara inline sebagai ref={(node) => { ... }} dan setiap klik akan melepas lalu memasang ulang setiap item, karena setiap render memberikan fungsi baru.

Memberikan ref ke komponenmu sendiri

Di React 19, ref adalah prop biasa untuk function component. Parent membuat ref-nya, dan child memasangnya di elemen DOM yang ingin dibukanya:

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

Sebelum React 19, ini membutuhkan forwardRef, yang masih berfungsi. Halaman forwardRef menunjukkan kedua versi dan cara membuka hanya beberapa method dengan useImperativeHandle.

Kesalahan umum

Menampilkan nilai ref di JSX. Layar tidak mengikutinya. Kalau pengguna perlu melihat nilainya, pakai state.

Memakai ref.current sebagai dependensi effect. [ref.current] membaca nilainya saat render dan React tidak tahu kapan nilai itu berubah, jadi effect tidak berjalan ulang saat nilainya berubah. Pakai ref callback untuk bereaksi saat sebuah node dipasang.

Membaca ref DOM selama render pertama. Nilainya null sampai React membuat node-nya. Baca di effect atau handler.

Membuat object baru alih-alih memakai hook. const ref = { current: null } di badan komponen adalah object baru di setiap render. Hanya useRef yang memberimu object yang sama setiap kali.