Detail Info

Aplikasi form sederhana di mana saat halaman dimuat, kursor langsung fokus ke input tanpa re-render.

Kode:

jsxCopyEditimport React, { useRef, useEffect } from 'react';

function FocusInput() {
  const inputRef = useRef(null); // buat referensi ke elemen input

  useEffect(() => {
    inputRef.current.focus(); // langsung fokus ke input saat komponen mount
  }, []);

  return (
    <div>
      <h1>Auto Focus Input</h1>
      <input ref={inputRef} placeholder="Ketik di sini..." />
    </div>
  );
}

export default FocusInput;

Penjelasan useRef:

useRef(null) membuat referensi ke elemen DOM.
inputRef.current mengakses elemen <input />.
Digunakan di useEffect agar fokus saat pertama kali render.
Tidak memicu re-render saat nilainya berubah.

useRef juga sering dipakai menyimpan nilai yang ingin dipertahankan antar render, seperti timer ID atau previous value (misal: prevCountRef.current = count).

useRef – Fokus Otomatis pada Input