useRef — CompileDaily Study

Penjelasan

useRef punya dua kegunaan utama: (1) mengakses elemen DOM langsung (mis. auto-focus input), dan (2) menyimpan nilai mutable yang BERTAHAN antar render TAPI tidak memicu render ulang saat diubah — beda dengan state yang selalu memicu render ulang tiap kali berubah.

Contoh Konsep

import { useRef, useEffect } from 'react';

function InputAutoFocus() {
    const inputRef = useRef(null);

    useEffect(() => {
        inputRef.current.focus(); // akses elemen DOM langsung
    }, []);

    return <input ref={inputRef} type="text" />;
}

function Timer() {
    const jumlahRender = useRef(0);
    jumlahRender.current += 1; // TIDAK memicu render ulang

    return <p>Komponen ini sudah dirender {jumlahRender.current} kali</p>;
}

Praktikum

Buat komponen dengan input teks yang otomatis ter-focus saat komponen pertama kali muncul, memakai useRef dan useEffect dengan dependency array kosong.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Nilai ref diakses/diubah lewat properti .current (mis. inputRef.current), BUKAN langsung — dan mengubah ref.current TIDAK memicu render ulang komponen, jadi JANGAN pakai useRef untuk data yang perlu langsung tampil di UI saat berubah, pakai useState untuk itu.